vue动态数据绑定1--如何监听一个对象的变化

最新推荐文章于 2024-07-07 14:44:39 发布

林雨静

最新推荐文章于 2024-07-07 14:44:39 发布

阅读量2.6k

点赞数 1

分类专栏： vue 文章标签： vue 源码

本文链接：https://blog.csdn.net/github_38402037/article/details/75223466

版权

本文探讨Vue的动态数据绑定原理，通过学习源码，介绍如何监听对象属性的变化。文章详细阐述了Observer构造函数的实现，包括如何为对象属性添加get和set方法，以及如何处理深层次的对象属性，确保所有层级的属性变化都能被跟踪。最终展示了一个成功响应getter和setter的例子。

摘要由CSDN通过智能技术生成

之前经常使用 Vue，后来不满足于仅仅使用它，我想了解其内部实现原理，所以就尝试学习其源码，获益匪浅。
- 动态数据绑定就是 Vue 最为基础，最为有用的一个功能。给定任意一个对象，如何监听其属性的读取与变化？也就是说，如何知道程序访问了对象的哪个属性，又改变了哪个属性？举个例子。

let app1 = new Observer({
  name: 'yyy',
  age: 20
});

let app2 = new Observer({
  university: 'uestc',
  major: 'computer'
});

// 要实现的结果如下：
app1.data.name // 你访问了 name
app.data.age = 100;  // 你设置了 age，新的值为100
app2.data