数据响应式

响应式

响应式即对外界变化做出反应的一种形式，数据改变，UI页面做出响应。声明一个Vue实例，如：const vm = new Vue({data:{n: 0}})；

当修改 Vue 实例中的 data 时，UI页面中的 data 会做出响应。这个联动的过程就是vue的数据响应式。vue目前通过Object.defineProperty来实现数据响应。vm相当于data的代理。

new Vue({
    data: { n: 0 }, 
    template: ` 
    <div> {{n}} 
    <hr/>
    <button @Click ="add">+1</button/> </div> 
    `, 
      methons: { add(){ this.n += 1; 
      }
     } 
  }).$mount("#app")

上面代码就是数据的响应式，当我点击按钮，n的值就会加1

响应式的原理

Vue.js的响应式原理依赖于Object.defineProperty，Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行收集，通过setter在数据变更的时候通知订阅者更新视图。

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

function proxy({data}){//解构赋值
  let value = data.n
  Object.defineProperty(data, 'n', {
    get(){
       return value
      },
    set(newValue){
       if(newValue<0)return
       value = newValue 
       } 
    }) 
      //这几句话会监听 data
    const obj = {}
    Object.definePropert(obj,'n',{
      get(){
         return data.n  
      },
      set(value){
        if(value<0)return
        data.n = value
      }
    }),
    return obj//obj是代理