Vue 数据响应式

Posted on Edited on In Views:

什么是深入响应式原理

● 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
● 这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。
● 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
● 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。

一、getter 和 setter

1、{n:0}变成{n:(…)}

一开始是{n:0}，传给new Vue之后立马变成{n:(…)}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import Vue from "vue";

Vue.config.productionTip = false;

const myData = {
  n: 0
};
console.log(myData); //本节课精髓

const vm = new Vue({
  data: myData,
  template: `
    <div>{{n}}<button @click="add">+10</div>
  `,
  methods: {
    add() {
      this.n += 10;
    }
  }
}).$mount("#app");

setTimeout(() => {
  myData.n += 10;
  console.log(myData); // 本节课精髓
  console.log(vm)
}, 3000);

2、get和set

定义的时候设置getter、setter

2.1 需求一：得到姓名

姓名后面的括号能删掉吗？
不能，因为它是函数

1
2
3
4
5
6
7
8
9
10
let obj1 = {
  姓: "高",
  名: "圆圆",
  姓名() {
    return this.姓 + this.名;
  },
  age: 18
};

console.log("需求一：" + obj1.姓名());

2.2 需求二：姓名不要括号也能得出值

总结：getter 就是这样用的。不加括号的函数，仅此而已

1
2
3
4
5
6
7
8
9
10
let obj2 = {
  姓: "高",
  名: "圆圆",
  get 姓名() {
    return this.姓 + this.名;
  },
  age: 18
};

console.log("需求二：" + obj2.姓名);

2.3 需求三：姓名可以被写

总结：setter就是这样用的。用 = xxx 触发 set 函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let obj3 = {
  姓: "高",
  名: "圆圆",
  get 姓名() {
    return this.姓 + this.名;
  },
  set 姓名(xxx) {
    this.姓 = xxx[0];
    this.名 = xxx.substring(1);
  },
  age: 18
};

obj3.姓名 = "刘诗诗";

console.log(`需求三：姓${obj3.姓}, 名${obj3.名}`);
console.log(obj3);

二、Object.defineProperty

定义完一个对象之后，想再添加新的get、set，只能通过Object.defineProperty
新定义的get、set属性xxx是不存在的，不能return this.xxx/xxx，会造成死循环，可使用局部变量_xxx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
let obj3 = {
  姓: "高",
  名: "圆圆",
  get 姓名() {
    return this.姓 + this.名;
  },
  set 姓名(xxx) {
    this.姓 = xxx[0];
    this.名 = xxx.substring(1);
  },
  age: 18
};

var _xxx = 0

Object.defineProperties(obj3, 'xxx',{
  get(){
    return _xxx
  },
  set(value){
    _xxx = value
  }
})

obj3.姓名 = "刘诗诗";

console.log(`需求三：姓${obj3.姓}, 名${obj3.名}`);
console.log(obj3);

三、代理和监听

1、需求一：用Object.defineProperty 定义n

1
2
3
4
5
6
7
let data1 = {}

Object.defineProperty(data1, 'n',{
  value:0
})

console.log(`需求一：${data1.n}`)

2、需求二： n 不能小于0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 即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 呢？

3、需求三：使用代理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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 失败`)

4、需求四

1
2
3
4
5
6
7
8
9
let myData = {n:0}
let data4 = proxy({data:myData}) // 括号里是匿名对象，无法访问

// data3 就是 obj
console.log(`杠精：${data4.n}`)
myData.n = -1
console.log(`杠精：${data4.n}, 设置为 -1 失败了吗!?`)

// 我现在改 myData，是不是还能改？！

5、需求五：用户擅自改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
let myData5 = {n:0}
let data5 = proxy2({ data:myData5})  // 括号里是匿名对象，无法访问

function proxy2({data}/* 解构赋值 */){
  // 这里的'n'写死了，天蝎座上应该遍历data的所有key，这里做了简化
  // 因为我怕你们看不懂
  let value = data.n
  delete 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}`)
data5.n = -1
console.log(`需求五：${data5.n}, 设置为 -1 失败`)
data5.n = -1
console.log(`需求五：${data5.n}, 设置为 1 失败`)

// 这代理看着眼熟吗？
// let data5 = proxy2({data:myData5})
// let vm = new Vue({data:{n:0}})