Vue数据响应式

1 什么是响应式

若一个物体能对外界的刺激做出反应，那么他就是响应式的

2 Vue数据响应式

• 声明一个Vue实例

const vm=new Vue({data:{n:0}})

• 修改vm.n，那么UI中的n会随之改变
• 这就是Vue的数据响应式

2.1 Vue如何追踪到变化

• data对象传入Vue实例vm时，Vue 将遍历此对象所有的属性
• 并使用 Object.defineProperty 把这些属性全部转为 getter/setter
• getter/setter用于对属性的读写进行监控
• vm会成为data的代理
• 监控到变化后，代理vm会操作data的属性
• vm追踪到变化，就会调用render

UI=render(data)

2.2 检测变化的注意事项

• 属性必须在 data 对象上存在才能让 Vue 将它转换为响应式

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的,会渲染

vm.b = 2
// `vm.b` 是非响应式的,不会渲染

• 否则，利用Vue.set/this.$set对象添加响应式属性

//作用：
//1.新增key
//2.自动创建代理和监听
//3.触发UI更新(但并不会立刻更新)
Vue.set(data,'b',1)
this.$set(data,'b',1)

• 如果为已有对象赋值多个新属性，应该使用下面的方法

//注意：a为旧属性，b、c为新属性，要新、旧属性混合赋值，只赋值新属性不会响应
this.data = Object.assign({}, this.data, { a: 1, b: 2 ,c:3})

• 对于对象为数组的情况，可以使用下面的方法添加新属性：

const vm = new Vue({
  data:{
    arr:['a','b','c']
  }
})

Vue.set(this.arr,3,'d') 
this.$set(this.arr,3,'d') 
this.arr.push('d') 
//注意：
//1.Vue.set/this.$set作用于数组时，并不会自动添加监听和代理
//2.push已被Vue变异，并不是数组中的push
//3.使用 Vue 提供的数组变异 API 时，会自动添加监听和代理

• 上面变异数组API有7个

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

2.3 声明响应式属性

• 建议提前声明所有的响应式属性，这样便于修改与理解，哪怕只是一个空值

const vm = new Vue({
  data: {
    // 声明 message 为一个空值字符串
    message: ''
  },
  template: '<div>{{ message }}</div>'
})
// 之后设置 `message`
vm.message = 'Hello!'

• 如果你未声明 message，Vue 将警告你渲染函数正在试图访问不存在的属性。

2.4 视图更新是异步的

未完待续.......