vue响应式原理

vue是怎么通过data对数据进行改写的

let obj = {
  姓: "高",
  名: "圆圆",
  get 姓名() {
    return this.姓 + this.名;
  },
  set 姓名(xxx){
    this.姓 = xxx[0]
    this.名 = xxx.slice(1)
  },
  age: 18
};
obj3.姓名 = '刘诗诗'

ps.console.log(obj) 可以看出姓名不是一个真实的属性，但可以通过get,set方法对姓名进行读和写

22.png

通过Object.defineProperty 方法对已定义get,set方法的对象添加虚拟属性

let _xxx = 0
Object.defineProperty(obj,'xxx',{
  get(){
    return _xxx
  },
  set(value){
    _xxx = value
  }
})

对data数据进行监听和代理

// 需求：就算用户擅自修改 myData，也要拦截他
let myData5 = {n:0}
let data5 = proxy2({ data:myData5 }) // 括号里是匿名对象，无法访问
function proxy2({data}){
  let value = data.n
  Object.defineProperty(data, 'n', {
    get(){
      return value
    },
    set(newValue){
      if(newValue<0)return
      value = newValue
    }
  })
  // 这里对data进行监听
  const obj = {}
  Object.defineProperty(obj, 'n', {
    get(){
      return data.n
    },
    set(value){
      data.n = value
    }
  })
  return obj //obj 就是代理
}

小结：

Object.defineProperty

可以给对象增加属性 value
可以给对象增加 getter/setter 方法
getter/ setter 用于属性的读写进行监控

啥是代理（设计模式）

对 myData 对象的属性读写，全权由另一个对象vm负责
那么 vm 就是 myData 的代理
比如 myData.n 不用，偏要用 vm.n 来操作 myData.n

vm = new Vue（{data:myData}）

• 会让 vm 成为 myData 的代理 （proxy）
• 会对 myData 的所有属性进行监控
  ps.为什么要监控，为了防止myData的属性变了,vm不知道
• 当vm监控到属性变了就会调用 render(data)
  UI = render(data)

55.png

data是对象且不止一层:

1. 我们知道vue是通过 object.defineProperty 来更新数据的，如果此时没定义data的值
   object.defineProperty(obj, 'n' //这里n没定义 , {})
   而直接调用，vue就会报错

2. 如果data的数据里有两层，vue只会监听到第一层，如果第二层没定义不会报错，但也无法监听到数据的变化此时需要使用 Vue.set 方式

66.png

Vue.set 和 this.$set

• 新增key
• 自动创建代理和监听（没创建过）
• 触发UI更新（但并不会立刻更细）
  this.$set( this.object , 'm' , 100 )

data是数组：

可以将这里的数组理解为：[a,b,c] === { '0':a, '1':b, '2':c } , 此时就可以用Vue.set方法新增属性，但又因为数组的长度无法确定，很难提前声明，所以vue提供了数组的 变异方法，当你将数组对象传递给vue后，他会篡改数组，在中间增加一层原型，这层原型有7个方法（push,pop,shift,unshift,splice...），而这些方法会先调用以前的方法，再自动帮你set

77.png

篡改的方法：

class VueArray extends Array { //声明了一个class，继承array的方法
    push(...args) {  //如果这个数组是VueArray实例，则执行这个push方法
        const oldLength = this.length //this当前数组
        super.push(...args)
        console.log('你 push 了')
        for(let i=oldLength; i<this.length; i++){
            Vue.set(this,i,this[i])   // 将每个新增的key都告诉Vue
        }
    }
}

ps.super.push 是ES6的方法，作用就是调用我父类上的push，然后打印出push