Vue对象的Object的变化侦测

------------恢复内容开始------------

1、什么是变化侦测

Vue.js会自动通过状态生成Dom，并输出到页面上进行显示，这过程称为渲染，当状态发生变化时vue能立刻感知到哪些状态改变了，并进行更新

2.如何追踪状态变化

js里面侦测对象的变化有两种，一种是Object.defineProperty和Es6的proxy

 

 function defineReactive(data,key,val) {
     Object.defineProperty(data,key,{
         enumerable:true,//可枚举
         configurable:true,
         get:()=>{
             console.log('isGet')
             return val
         },
         set:(newVal)=>{
             console.log(newVal,val) 
             if(val===newVal){
                 return
             }
             console.log('isSet')
             val=newVal
         }
     })
 }
 let obj={}
 defineReactive(obj,'dog','good')
 obj.dog //good
 obj.dog = 'good1' //good

每次从obj的key中读取数据时，get函数被出发，当往obj的key中设置数据时，set被触发

3，依赖收集

<template>
   <h1>{{name}}</h1>
</template>　　
当模板使用数据时，当数据发生变化，会将通知发送到组件中，内部组件通过虚拟Dom重新渲染

及首先将数据name的地方收集起来，当属性发生变化是，将收集的依赖循环触发，在getter中收集依赖，在setter中触发依赖

 

 

 

 

 

 

------------恢复内容结束------------