Vue中数据响应式原理及特性有哪些总结？

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

在探讨数据响应式之前，我们必须解决一个非常重要的问题：Vue 中 data 到底做了什么？先从 getter 和 setter 讲起，我们用那个来对虚拟属性进行读写。getter 和 setter 如下代码所示：

javascriptlet obj0={ get data() { // 获取 data 的逻辑 }, set data(value) { // 设置 data 的逻辑 }};

在说数据响应式之前，我们要解决一个很重要的问题，那就是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 ，不加括号也能得出值。