# [开发笔记] Vue使用问题集合

# 改变prop值的方法

Vue一般防止子组件改变父组件的状态,所以不应该在子组件内部改变prop

# 不改变父组件

  • data(利用prop作为初始值,后续修改本地data)
  • computed(“听父从命”,当父通知prop值改变,子组件computed)

# 改变父组件(.sync)

  • .sync(当子组件改变了prop值,这个变化也同步到父组件中)
// parent.vue
<child :inputValue.sync="name"></child>
1
2
 // child.vue
 props: {
     inputValue: { type: 'String', default: '' }
 },
 data() {
     return {
         iValue: this.inputValue
     }
 },
 watch: {
     iValue(val) {
         this.$emit('update:inputValue', val) // 当子组件需要更新inputValue时,
     },
     inputValue(val) {
         this.iValue = val
     }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

实际上,.sync代表的是

model: {
    prop: 'inputValue', // 子组件的prop值
    event: 'update' // 子组件的prop值绑定的事件
}
1
2
3
4

v-model代表的是

model: {
    prop: 'value',
    event: 'input'
}
1
2
3
4

# Vue里面的继承

# extend(单继承)

  • Vue的全局方法
Vue.extend(...) // 传递Vue实例选项
1
  • Vue的实例选项
export default {
    extends: myExtend
}
1
2
3

# mixin(多继承)

混入 可以接受 对象数组,所以类似多继承。

当使用“混入对象”时,所有“混入对象”的选项,都将适当地 合并 到该组件本身的选项

  • Vue的全局方法
Vue.mixin({
    created() {
        // ...
    }
})
1
2
3
4
5
  • Vue的实例选项
export default {
   mixins: [ ... ]
}
1
2
3

# 继承的合并规则

  • 对象(只覆盖掉冲突的属性,不冲突的属性会保留下来,且合并

    • 优先级:组件内部 > 混入对象(数组最右最优) > Extend对象
  • 钩子函数(先调用 -> 后调用)

    • 调用顺序:Extend对象 > 混入对象(数组最右最优) > 组件内部
var mixin = {
  data: function () {
    return {
      person: {
        age: 22
      }
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      person: {
        name: 'heshiyu'
      }
    }
  },
  created: function () {
    console.log(this.person)
    // => { name: 'heshiyu', age: 22 }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 为什么在vue的组件中,data要function返回对象?

类比 引用数据类型。如果不用 function return,那 这个组件的所有实例 会共享同一个数据对象。

# render做了什么?

  • render函数会返回一棵Virtual DOM Tree。
  • 在挂载之前,Vue 会通过createElemcreateChildren的相互调用,遍历整棵Virtual DOM Tree,来生成真实DOM节点。

# 为什么Vue不劫持数组上的元素

  • 如果对数组进行数据劫持,可能会导致误触发getter、setter;
  • 同时也需要对新增的元素手动observer。
    • (如对数组[1, 2, 3]进行数据劫持,调用unshift(0),那只有下标为0、1、2的元素具有劫持效果)
  • Vue采取的做法是:修改了Array原型上的方法,做了劫持修改,可以发出通知。

# $attrs 和 $listeners 的区别?

- **$attrs** 是一个对象,存着由父组件传递给子组件、但不在 **子组件prop** 里的特性

**$listeners** 也是一个对象,存着在`父作用域中的v-on事件监听器`
- 通过`$listeners`,子组件可以向孙组件去传递那些可emit的事件。可实现由 “孙组件” 去触发 “爷组件” 的方法
    ```html
    <!-- u-search-type.vue -->
    <u-input @keypress.enter="goSearch"></u-input>

    <!-- u-input.vue -->
    <input v-on="$listeners" />
    ```

# key值的作用

查看

更新时间: 4/19/2020, 6:18:44 PM