什么是 Vue 的数据响应式
- 数据改变，UI页面做出响应。
- 当修改 Vue 实例中的 data 属性时，UI页面中的 data 会做出响应，Vue 是通过
Object.defineProperty来实现数据响应的。const vm = new Vue ({data:0})
Object.defineProperty
- 可以给对象添加属性 value
- 可以给对象添加 getter / setter
- getter / setter 用于堆属性的读写进行监控
什么是代理（设计模式）
- 对 myData 对象的属性读写，全权由另一个对象 vm 负责
- 那么 vm 就是 myData 的代理
- 比如 myData.n 不用，偏要用 vm.n 来操作myData.n
vm = new.vue ({data:myData})
- 会让 vm 成为 myData 的代理(proxy)
- 会让 myData 的所有属性进行监控
- 为防止 myData 的属性变了 vm 不知道 ----为什么要监控？
- 属性变了就可以用 render(data) ----vm 知道了又如何
- ul=render(data)
vue 如何实现数据响应式
使用 getter和setter修改对象属性实现数据响应
//修改姓名
let obj3 = {
姓: "亚",
名: "索",
age: 18,
get 姓名() {
return this.姓 + this.名;
},
set 姓名(xxx) {
//设置姓名为obj3.姓名
this.姓 = xxx[0];
this.名 = xxx.substring(1);
}
};
obj3.姓名 = "盲仔";
console.log(`姓名：${obj3.姓}${obj3.名}`);
Vue 中，用于设置 data 中的新增的 key 的 API 是Vue.set,vm.$set
使用定义完成的对象通过Object.defineProperty(obj,'n',{value:4})添加属性
let data2 = {};
data2._n = 0;
Object.defineProperty(data2, "n", {
get() {
return this._n;
},
set(value) {
if (value < 0) return;
this._n = value;
}
});
console.log(data2.n);//输出0
data2.n=-1
console.log(data2.n)//输出0，当n=-1<0data的属性n不变
data2.n=1
console.log(data2.n)//输出1
通过给数组添加元素
import Vue from "vue/dist/vue.js";
Vue.config.productionTip = false;
new Vue({
data: {
array: ["a", "b", "c"]
},
template: `
<div>
{{array}}
<button @click="setD">set d</button>
</div>
`,
methods: {
setD() {
Vue.set(this.array,3,'d');//可以实现添加d元素
}
}
}).$mount("#app");
// 也可以使用 this.array.push('d')
通过Vue.set(this.array,3,'d')实现数据响应
也可以通过this.array.push('d');实现数据响应
关于数组变异 7 种方式
push(),pop(),shift(),unshift(),splice(),sort(),reverse()会自动添加监听和代理，this.$set 作用于数组时，并不会自动添加监听和代理。
