什么是响应式
如果一个物体对外界的刺激做出反应，它就是响应式的。比如：我打你一拳你喊疼，那你就是响应式的。
Vue中的数据响应式
只要在Vue实例中声明的数据，它就是响应式的。也就是说，当我修改数据时，视图中就会重新渲染，出现最新的值。
比如：页面上显示的初始值为0，当我点击+1按钮时，页面上的数据就会立马变成1，这就是数据响应式。
new Vue({
data() {
return {
n: 0
};
},
template: `
<div>
{{n}}
<button @click="add">+1</button>
</div>
`,
methods: {
add() {
this.n += 1;
}
}
}).$mount("#app");
响应式原理
Vue通过Object.defineProperty给对象添加getter，和setter，对属性进行的读写进行监控。
了解getter和setter
// 需求一：得到姓名
let obj={
姓:"周",
名:"星驰",
姓名(){
return this.姓+this.名
}
}
console.log("需求一："+ obj.姓名()) //周星驰
// 需求二：通过get方法得到姓名
let obj1={
姓:"周",
名:"星驰",
get 姓名(){
return this.姓+this.名
}
}
console.log("需求二："+ obj1.姓名) //周星驰
// 需求三：通过set方法设置姓名
let obj2={
姓:"周",
名:"星驰",
get 姓名(){
return this.姓+this.名
},
set 姓名(xxx){
this.姓=xxx[0]
this.名=xxx.slice(1)
}
}
obj2.姓名='周星星'
console.log(`需求三：${obj2.姓}${obj2.名}`) // 周星星
了解Object.defineProperty
使用Object.defineProperty
// 需求一：使用Object.defineProperty定义n
let data1={}
Object.defineProperty(data1,'n',{
value:0
})
console.log(`需求一：${data1.n}`)
// 需求二：使用Object.defineProperty设置n的值，当为负数时无效
let data2 = {};
data2._n = 0;
Object.defineProperty(data2, "n", {
get() {
return this._n;
},
set(xxx) {
if (xxx < 0) {
return this._n
}else{
this._n=xxx
}
}
});
console.log(`需求二：${data2.n}`)
data2.n = -1
console.log(`需求二：${data2.n} 设置为 -1 失败`)
data2.n = 1
console.log(`需求二：${data2.n} 设置为 1 成功`)
打印结果：
需求二：0
需求二：0 设置为 -1 失败
需求二：1 设置为 1 成功
//为防止直接修改data2._n,使用代理
let data3 = Proxy({ data: { n: 0 } }); //匿名函数
function Proxy({ data }) {
let obj = {};
Object.defineProperty(obj,'n',{
get(){return data.n},
set(value){
if(value<0){return}
data.n=value
}
})
return obj //obj就是代理
}
console.log(`需求三：${data3.n}`)
data3.n=-1
console.log(`需求三：${data3.n} 设置-1失败`)
data3.n=1
console.log(`需求三：${data3.n} 设置成功`)
打印结果：
需求三：0
需求三：0 设置-1失败
需求三：1 设置成功
// 添加监听，使其更加完善
let data5={n:0}
let data4 = Proxy2({ data:data5});
function Proxy2({data}){
let value = data.n
Object.defineProperty(data5,'n',{
get(){
return value
},
set(newVlaue){
if(newVlaue<0){return}
value=newVlaue
}
})
// 上面几句，这几句话会监听 data
const obj={}
Object.defineProperty(obj,'n',{
get(){
return data.n
},
set(value){
if(value<0)return//这句话多余了
data.n = value
}
})
return obj
}
console.log(`需求四：${data4.n}`)
data5.n = -1
console.log(`需求四：${data4.n}，设置为 -1 失败了`)
data5.n = 1
console.log(`需求四：${data4.n}，设置为 1 成功了`)
结果：
需求四：0
需求四：0，设置为 -1 失败了
需求四：1，设置为 1 成功了
小结
-
Object.defineProperty
可以给对象添加value属性，可以给对象添加getter,setter。getter,setter用来对属性进行监听和读写。 -
代理
代理只是一种设计模式 -
const vm=new Vue({data:myData})
1.让vm成为myData的代理 2，对myData的所有属性进行监控，做到数据的实时更新
Vue.set this.$set
之前说到Vue通过Object.defineProperty来完成对属性的监听和读写，来达到页面实时更新的效果。
但是Object.defineProperty存在一个隐藏的bug,比如我忘记写n的值
new Vue({
data: {
obj: {
a: 0 // obj.a 会被 Vue 监听 & 代理
}
},
template: `
<div>
{{obj.b}}
<button @click="setB">set b</button>
</div>
`,
methods: {
setB() {
this.obj.b = 1; //请问，页面中会显示 1 吗？
}
}
}).$mount("#app");
上面代码我想实现点击按钮，让b的值为1 。执行后发现页面并没有变化，因为在data中我们并没有定义b,
解决问题使用 Vue.set或this.$set即可
new Vue({
data: {
obj: {
a: 0 // obj.a 会被 Vue 监听 & 代理
}
},
template: `
<div>
{{obj.b}}
<button @click="setB">set b</button>
</div>
`,
methods: {
setB() {
// Vue.set(this.obj,'b',0)
this.$set(this.obj,'b',0)
}
}
}).$mount("#app");
- 当data中有数组时,无法知道数组的长度，这时声明数组的key不切实际
如下当我网原有数组添加d时，可以用Vue.set或this.$set实现，
new Vue({
data: {
array: ["a", "b", "c"]
},
template: `
<div>
{{array}}
<button @click="setD">set d</button>
</div>
`,
methods: {
setD() {
this.$set(this.array,3,'d')
}
}
}).$mount("#app");
当数组很长的时候，使用Vue.set或this.$set显得很鸡肋，麻烦，这时尤雨溪给我提供了便利的做法，直接使用push
当然这个push是被做了手脚的
new Vue({
data: {
array: ["a", "b", "c"]
},
template: `
<div>
{{array}}
<button @click="setD">set d</button>
</div>
`,
methods: {
setD() {
this.array.push('d','e')
}
}
}).$mount("#app");
总结
- 对象中新增的key 1,vue没有办法事先对其监听和代理
2，用Vue.set或this.$set来新增，并对其进行监听和代理
3，最好提前把属性写出来
- 数组中新增的key 1,用Vue.set或this.$set来新增 2,尤雨溪给我们提供了很好用的7个api,他们会自动处理和更新
