vue- 数据响应试

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做了两件事情

1. 会让vm成为mydata的代理，同时你也可以用this来访问这个vm

2. 会对mydata的所有属性进行监控

为什么要监控，为了防止mydata的属性变了，vm确不知道

vm就可以调用render(data)

UI = render(data)

data 中有数组怎么办

篡改数组的API，七个API会被Vue篡改，调用后会更新UI

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()