Vue数据响应式
Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。
前置知识
Vue对Data做了什么
getter 和 setter
let obj0 = {
姓: "高",
名: "圆圆",
age: 18
};
// 需求一，得到姓名
let obj1 = {
姓: "高",
名: "圆圆",
姓名() {
return this.姓 + this.名;
},
age: 18
};
console.log("需求一：" + obj1.姓名());
// 姓名后面的括号能删掉吗？不能，因为它是函数
// 怎么去掉括号？
// 需求二，姓名不要括号也能得出值
let obj2 = {
姓: "高",
名: "圆圆",
get 姓名() {
return this.姓 + this.名;
},
age: 18
};
console.log("需求二：" + obj2.姓名);
// 总结：getter 就是这样用的。不加括号的函数，仅此而已。
// 需求三：姓名可以被写
let obj3 = {
姓: "高",
名: "圆圆",
get 姓名() {
return this.姓 + this.名;
},
set 姓名(xxx) {
this.姓 = xxx[0]
this.名 = xxx.slice(1)
},
age: 18
};
obj3.姓名 = '高媛媛'
console.log(`需求三：姓 ${obj3.姓}，名 ${obj3.名}`)
// 总结：setter 就是这样用的。用 = xxx 触发 set 函数
Object.defineProperty()
之前在使用getter、setter时，是在定义这个对象时直接使用的。在定义完一个对象之后，要想再添加新的get set时只能用Object.defineProperty()
// 需求：n不能小于0
let data2 = {}
data2._n = 0 //用_n存储n的值
Object.defineProperty(data2, 'n', {
get(){
return this._n
},
set(value){
//set可以添加判断:小于0直接return,否则将n值置为最新value
if(value < 0) return
this._n = value
}
})
代理和监听
let myData5 = { n: 0 };
let data5 = proxy2({ data: myData5 }); // 括号里是匿名对象，无法访问
function proxy2({ data } ) {
let value = data.n;
Object.defineProperty(data, "n", {
get() {
return value;
},
set(newValue) {
if (newValue < 0) return;
value = newValue;
}
});
// 就加了上面几句，这几句话会监听 data
const obj = {};
Object.defineProperty(obj, "n", {
get() {
return data.n;
},
set(value) {
if (value < 0) return; //这句话多余了
data.n = value;
}
});
return obj; // obj 就是代理
}
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 不知道
vm 知道属性变了就可以调用 render(data) UI = render(data)
总之对data做了任何修改，Vue必须知道才能做到响应刷新
回到最初的问题，Vue对Data做了什么
1.Vue会对data后面的{n:0}进行窜改，给它加监听。
2.会新生成一个对象，这个对象会代理篡改后的对象。
图片1.png
Vue数据响应式
响应式：若一个物体对外界刺激有所反应，那就是响应式
Vue的data是响应式
const vm=new Vue({data:{n:0}})
我如果修改vm.n,那么UI中的n就会响应我
Vue 2通过Object.defineProperty来实现数据响应式
data.png
Vue的data的bug
new Vue({
data: {
obj: {
a: 0 //obj.a会被Vue监听 & 代理
//b:undefined
}
},
template: `
<div>
{{obj.b}}
<button @click="setB">set b</button>
</div>
`,
methods: {
setB() {
this.obj.b = 1; //页面中不会显示1
//Vue.set(this.obj,'b'，1)
//this.$set(this.obj,'b'，1)
}
}
}).$mount("#app");
页面中不会显示1，因为Vue没法监听一开始不存在的obj.b
解决办法
1.把k都声明好，后面不再加属性 比如b:undefined
2.使用Vue.set或者this.$set
set(this.obj,'b'，1)`
Vue.set和this.$set作用:
- 新增key
- 自动创建代理和监听(如果没有创建过)
- 触发UI更新(但不会立刻更新)
数组变异
如果data中有数组，没法提前声明key的情况
data: {
array: ["a", "b", "c"]
},
template: `
<div>
{{array}}
<button @click="setD">set d</button>
</div>
`,
methods: {
setD() {
//this.array[3] = "d"; 页面中不会显示'd'
//this.$set(this.array,3,'d') 增加下标的方式实现添加
this.array.push('d')//尤雨溪的做法
console.log(this.array)
}
}
}).$mount("#app");
变更方法
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
-
push() -
pop() -
shift() -
unshift() -
splice() -
sort() -
reverse()
Vue在这个对象，你以为这个是数组对象，你传给Vue之后，Vue就会篡改这个数组。它会在中间加一层原型。这个原型有7个方法，这7个方法跟以前是同名的但是代码被尤雨溪改了,会帮你set(监听,每次push都会通知Vue)。也就是说push会做2件事情:调以前的push,调完后通知Vue添加监听和代理。
总结
1.对象中新增的key
Vue无法事先监听和代理
要使用set来新增key,创建监听和代理,更新UI
最好提前把属性都写出来，不要新增key
但数组做不到「不新增key」
2.数组中新增的key
也可用set来新增key,更新UI
不过尤雨溪篡改了7个API方便你对数组进行增删
这7个API会自动处理监听和代理，并更新UI
结论:数组新增key最后通过7个API
对数据响应式的理解
简单说就是用户更改数据时，视图可以自动刷新，页面UI能够响应数据变化。Object.defineProperty()给数据对象添加value属性，设置getter和setter监控属性的读写，这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。并使用vm对象负责数据对象的代理，当属性更新时，调用render()更新。
