vue数据响应式

响应式的意思就是指当数据改变后，vue会找到data里面的数据发生改变，并在UI视图里面更新，这里我们就用到Object.defineProperty()

Object.defineProperty()里设置getter和setter

• getter：获取到当前数据

• setter：设置当前数据

let data3 = proxy({ data:{n:0} }) // 括号里是匿名对象，无法访问

function proxy({data}){
  const obj = {}
  Object.defineProperty(obj, 'n', { 
    get(){
      return data.n
    },
    set(value){
      if(value<0)return
      data.n = value
    }
  })
  return obj // obj 就是代理
}

new Vue({
    data:{
        a:1
    },
    methods:{
        this.a =2 //data里面有a，所以改变a的值为2。成功
        this.b =1 //找不到data里的key为b，失败
        
    }
})

• 对于data里面没有的key，也可以使用Vue.set(object, propertyName, value)

this.$set(this.someObject,'b',1) //得到data:{a:2,b:1}

• 重点是getter和setter属性是用户不可见的