vue是怎么通过data对数据进行改写的
let obj = {
姓: "高",
名: "圆圆",
get 姓名() {
return this.姓 + this.名;
},
set 姓名(xxx){
this.姓 = xxx[0]
this.名 = xxx.slice(1)
},
age: 18
};
obj3.姓名 = '刘诗诗'
ps.console.log(obj) 可以看出姓名不是一个真实的属性，但可以通过get,set方法对姓名进行读和写
22.png
通过Object.defineProperty 方法对已定义get,set方法的对象添加虚拟属性
let _xxx = 0
Object.defineProperty(obj,'xxx',{
get(){
return _xxx
},
set(value){
_xxx = value
}
})
对data数据进行监听和代理
// 需求：就算用户擅自修改 myData，也要拦截他
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){
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 的所有属性进行监控
ps.为什么要监控，为了防止myData的属性变了,vm不知道 - 当vm监控到属性变了就会调用 render(data)
UI = render(data)
55.png
data是对象且不止一层:
我们知道vue是通过 object.defineProperty 来更新数据的，如果此时没定义data的值
object.defineProperty(obj, 'n' //这里n没定义 , {})
而直接调用，vue就会报错如果data的数据里有两层，vue只会监听到第一层，如果第二层没定义不会报错，但也无法监听到数据的变化此时需要使用 Vue.set 方式
66.png
Vue.set 和 this.$set
- 新增key
- 自动创建代理和监听（没创建过）
- 触发UI更新（但并不会立刻更细）
this.$set( this.object , 'm' , 100 )
data是数组：
可以将这里的数组理解为：[a,b,c] === { '0':a, '1':b, '2':c } , 此时就可以用Vue.set方法新增属性，但又因为数组的长度无法确定，很难提前声明，所以vue提供了数组的 变异方法，当你将数组对象传递给vue后，他会篡改数组，在中间增加一层原型，这层原型有7个方法（push,pop,shift,unshift,splice...），而这些方法会先调用以前的方法，再自动帮你set
77.png
篡改的方法：
class VueArray extends Array { //声明了一个class，继承array的方法
push(...args) { //如果这个数组是VueArray实例，则执行这个push方法
const oldLength = this.length //this当前数组
super.push(...args)
console.log('你 push 了')
for(let i=oldLength; i<this.length; i++){
Vue.set(this,i,this[i]) // 将每个新增的key都告诉Vue
}
}
}
ps.super.push 是ES6的方法，作用就是调用我父类上的push，然后打印出push
