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中触发依赖

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

原文地址:https://www.cnblogs.com/lk1186578324/p/12570595.html