浅谈Vue2(2)

在 Vue 实例中声明过的数据，这些数据就是响应式的。什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。

理解响应式

====================================================================

Vue是如何追踪变化得呢，那么我们就要弄懂以下三个问题：

• Vue是怎么知道数据发生了改变？

• Vue是怎么知道去更新哪些视图？

• Vue是怎么知道在什么时间更新视图？

Vue通过Object.defineProperty知道数据发生了改变

---

Object.defineProperty是 Vue 响应式系统的精髓；Vue使用 Object.defineProperty 为对象中的每一个属性，设置 get 和 set 方法，进行数据劫持/监听；get 值是一个函数,当属性被访问时，会触发 get 函数，set 值同样是一个函数，当属性被赋值时，会触发 set 函数；

var obj={

name:Vue是响应式吗？

}

Object.defineProperty(obj,“name”,{

get(){

console.log(“get方法被触发”)

},

set(val){

console.log(“set方法被触发”)

}

})

var str = obj.name //get方法被触发

obj.name = “Vue是响应式的” // set方法被触发

因而当数据改变时，触发 属性的 set 方法，Vue 就能知道数据有改变；

Vue通过依赖收集去更新视图

---

data 中每个声明的属性都会有一个专属的依赖收集器dep.subs数组，当页面使用到 某个属性时，触发 ObjectdefineProperty - get函数，页面的 watcher 就会被放到属性的依赖收集器 subs 中进行保存。它知道谁依赖它之后，它就可以在发生改变的时候，通知 依赖它的页面，从而让页面完成更新；

Vue是响应式吗?

//此节点是name的订阅者watch，vue也把此节点存在name的依赖收集器；

{{name}}

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。