Vue数据响应式
- 响应式即对外界的变化做出的反应的一种形式。
- const vm = new Vue({data:{n: 0}})
- 当修改 vm.n 或 data.n 时,render(data...) 中的 n 就会做出响应的响应。
- 这个联动的过程就是 vue 的 数据响应式。
- vue 目前通过 Object.defineProperty 来实现数据响应式
深入理解options.data
深入响应式原理文档
vue到底对data做了什么
ES6的getter、setter
getter
只是不加括号的函数名,仅此而已
式例
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 就是这样用的。必须接收一个新的值 才能触发 set 函数
Object.defineProperty:会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
可以给对象添加getter/setter , 用于对属性的读写进行监控
var _xxx = 0
Object.defineproperty(obj3, 'xxx',{
get(){
return _xxx
},
set(value){
_xxx = value
}
})
vue 里面的Object.defineProperty会存在问题
Object.defineProterty(obj,'n',{...})
里面必须要有一个'n'
,才能监听或者代理obj.n
解决方法1.把key声明好 2.使用Vue.set或者this.$set
Vue.set(this.obj, 'b',1)
this.$set(this.obj,'b',1)
当你写vm = new Vue({data: myData})
的时候,vue做了两件事情
-
会让
vm
成为mydata
的代理,同时你也可以用this
来访问这个vm
-
会对
mydata
的所有属性进行监控
为什么要监控,为了防止mydata
的属性变了,vm确不知道
vm就可以调用render(data)
UI = render(data)
data 中有数组怎么办
篡改数组的API,七个API会被Vue篡改,调用后会更新UI
push()
pop()
shift()
unshift()
splice()
sort()
reverse()