Vue数据响应式原理是如何实现自动追踪依赖和高效更新视图的？

本文共计1575个文字，预计阅读时间需要7分钟。

在讨论数据响应式之前，我们首先要解决一个非常重要的问题：Vue中到底对data做了什么？先从getter和setter说起，我们用那个让其他们来对虚拟属性进行读写操作。例如：

javascriptlet obj0={ // ...};

在说数据响应式之前，我们要解决一个很重要的问题，那就是Vue到底对data做了什么？先从getter和setter说起，我们用那个他们来对虚拟的属性进行读写。

getter和setter

有如下代码

let obj0 = { 姓: "高", 名: "圆圆", age: 18 }; // 需求一，得到姓名 let obj1 = { 姓: "高", 名: "圆圆", 姓名() { return this.姓 + this.名; }, age: 18 }; console.log("需求一：" + obj1.姓名());//高圆圆

此时我们log出来的结果是高圆圆，这个大家都能看懂，但是姓名后面的括号能删掉吗？不能，因为它是函数，那么我们怎么去掉括号呢？下面就有我们的需求二

// 需求二，姓名不要括号也能得出值 let obj2 = { 姓: "高", 名: "圆圆", get 姓名() { return this.姓 + this.名; }, age: 18 }; console.log("需求二：" + obj2.姓名);//高圆圆

此时我们使用getter ，不加括号也能得出值。