Vue数据响应式
深入理解options.data
什么是数据响应式
数据响应式是指,在改变数据的时候,视图也会跟着更新。
当修改 Vue 实例中的数据式,视图就会重新渲染,出现新的内容。这就是 Vue 的数据响应式。
Vue 是利用 Object.defineProperty 的方法里面的 getter 与 setter 方法的观察者模式来实现数据响应式的
主要原理在文档的深入响应式原理章节内可以找到
Vue对data做了什么
做个实验
如果data变了
代码:myData变了
//一般没人这么写,这样写是为了引用完整版 Vue
import Vue from "vue/dist/vue.js";
import App from "./App.vue";
Vue.config.productionTip = false;
const myData = {
n: 0
}
console.log(myData) //重点
new Vue({
data: myData,
template: `
<div>{{n}}</div>
`
}).$mount("#app");
setTimeout(()=>{
myData.n += 10
console.log(myData) //重点
},3000)
- 一开始是,传给new Vue之后里面变成{n:(...)}
- 这时候就需要学习ES6的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.substring(1)
},
age: 18
};
obj3.姓名 = '高媛媛'
console.log(`需求三:姓 ${obj3.姓},名 ${obj3.名}`)
// 总结:setter 就是这样用的。用 = xxx 触发 set 函数
并不存在一个{n:()}的属性,而是有getter n和setter n,它们来模拟对一个虚拟的属性 n 进行读写操作。
为什么要把n变成get n 和 set n呢?
Object.defineProperty方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
let data0 = {
n: 0
}
// 需求一:用 Object.defineProperty 定义 n
let data1 = {}
Object.defineProperty(data1, 'n', {
value: 0
})
console.log(`需求一:${data1.n}`)
// 总结:这语法把事情搞复杂了?非也,继续看。
// 需求二:n 不能小于 0
// 即 data2.n = -1 应该无效,但 data2.n = 1 有效
let data2 = {}
data2._n = 0 // _n 用来偷偷存储 n 的值
Object.defineProperty(data2, 'n', {
get(){
return this._n
},
set(value){
if(value < 0) return
this._n = value
}
})
console.log(`需求二:${data2.n}`)
data2.n = -1
console.log(`需求二:${data2.n} 设置为 -1 失败`)
data2.n = 1
console.log(`需求二:${data2.n} 设置为 1 成功`)
//那如果对方直接使用 data2._n 呢?
// 需求三:使用代理
let data3 = proxy({ data:{n:0} }) // 括号里是匿名对象,无法访问
function proxy({data}/* 解构赋值 */){
const obj = {}
// 这里的 'n' 写死了,理论上应该遍历 data 的所有 key,这里做了简化
Object.defineProperty(obj, 'n', {
get(){
return data.n
},
set(value){
if(value<0)return
data.n = value
}
})
return obj // obj 就是代理
}
// data3 就是 obj
console.log(`需求三:${data3.n}`)
data3.n = -1
console.log(`需求三:${data3.n},设置为 -1 失败`)
data3.n = 1
console.log(`需求三:${data3.n},设置为 1 成功`)
// 需求四
let myData = {n:0}
let data4 = proxy({ data:myData }) // 括号里是匿名对象,无法访问
// data3 就是 obj
console.log(`myData:${data4.n}`)
myData.n = -1
console.log(`myData:${data4.n},设置为 -1 失败了吗!?`)
// 我现在改 myData,是不是还能改?!你奈我何
// 需求五:就算用户擅自修改 myData,也要拦截他
let myData5 = {n:0}
let data5 = proxy2({ data:myData5 }) // 括号里是匿名对象,无法访问
function proxy2({data}/* 解构赋值 */){
// 这里的 'n' 写死了,理论上应该遍历 data 的所有 key,这里做了简化
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 就是代理
}
// data3 就是 obj
console.log(`需求五:${data5.n}`)
myData5.n = -1
console.log(`需求五:${data5.n},设置为 -1 失败了`)
myData5.n = 1
console.log(`需求五:${data5.n},设置为 1 成功了`)
// 这代码看着眼熟吗?
// let data5 = proxy2({ data:myData5 })
// let vm = new Vue({data: myData})
// 现在我们可以说说 new Vue 做了什么了
Object.defineProperty
- 可以给对象添加属性value
- 可以给对象添加getter/setter
- getter/setter用于对属性的读写进行监控
代理是什么(设计模式)
- 对myData对象的属性读写,全权由另一个对象vm负责
- 那么vm就是myData的代理(类似中介代理房东)
- 比如myData.n 不用,使用vm.n 来操作myData.n
vm = new Vue()
- 会让vm称为myData的代理(proxy)
- 会对myData的所有属性进行监控
- 为什么要监控?为了防止myData的属性变了,vm不知道
- vm知道了就可以调用render(data),UI = render(data)
如果data有多个属性n、m、k,那么就会有get n/get m /get k等
数据响应式
什么是数据响应式
- 若一个物体能对外界的刺激做出反应,那么它就是响应式的。
Vue的data是响应式
- const vm = new Vue({data:})
- 如果修改vm.n,那么UI中的n就会响应我
- Vue2通过Object.defineProperty来实现数据响应式
响应式网页
- 如果我改变窗口大小,网页内容也随之改变,那就是响应式网页
- 比如这个网站就是响应式的https://www.smashingmagazine.com/
Object.defineProperty的问题
-
Object.defineProperty(obj,’n’,)
-
必须要有一个‘n’,才能监听&代理obj.n
-
如果没有给n怎么办,Vue会给出一个警告,Vue只会检查第一层属性
-
//一般没人这么写,我这样写是为了引用完整版 Vue import Vue from "vue/dist/vue.js"; Vue.config.productionTip = false; new Vue({ data: {}, template: ` <div>{{n}}</div> ` }).$mount("#app");
//一般没人这么写,我这样写是为了引用完整版 Vue import Vue from "vue/dist/vue.js"; Vue.config.productionTip = false; 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(thid.obj,'b',1) // 解决方法二 this.$set(thid.obj,'b',1) } } }).$mount("#app");
-
此时如果点击set b,视图中会显示1吗?不会,因为Vue没办法监听一开始不存在的obj.b
解决办法
- 把key都声明好,后面不再加属性
- 使用Vue.set 或者 this.$set
Vue.set 和 this.$set
作用
- 新增key
- 自动创建代理和监听(如果没有创建过)
- 触发UI更新(但并不会立即更新)
举例
- this.$set(this.object,’m’,100)
下面模仿Vue包裹的方法:
class VueArray extends Array{
push(...args){
const oldLength=this.length
super.push(...args)
for(let i=oldLength;i<this.length;i++){
Vue.set(this,i,this[i]) //将每一个新增的key都告诉Vue
}
}
}
总结
对象中新增的key
- vue没有办法事先监听和代理
- 要使用set来新增key,创建监听和代理,更新UI
- 最好提前把属性写出来,不要新增key
- 但数组做不到[不新增key]
数组中新增的key
- 也可以用set来新增key,
且创建监听和代理,更新UI- this.$set 作用于数组时,并不会自动添加监听和代理,原因未知,只能问尤雨溪了。使用 Vue 提供的数组变异 API 时,会自动添加监听和代理
- et 了之后再用 this.array[n] += 1 是否会触发 UI 更新(答案是不会)
- 不过Vue篡改了7个API方便对数组进行增删
- 这七个API会自动处理监听和代理,并更新UI (push()、pop()、shift()、unshift()、splice()、sort()、reverse())
- 它们不是Array原来的API,是Vue在中间加上去的
- 结论:数组新增key最好通过这7个API