深入理解Vue的数据响应式

2020-04-26 本文已影响0人云卷云舒听雨声

【目录】
一、Vue对data做了什么？
二、数据响应式
三、Vue.set和this.$set

【正文】
在学习Vue的时候，发现Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接。这篇文章就深入理解一下Vue的数据响应式。

我们从一个问题切入，Vue对data做了什么？

一、Vue对data做了什么？

先看下面这行代码:

import Vue from "vue/dist/vue.js"; 

const myData = {
  n: 0
}
 console.log(myData) 
new Vue({
  data: myData,
  template: `
    <div>{{n}}</div>
  `
}).$mount("#app");

运行代码之后打开控制台，发现:

myData变了，一开始是{n:0}，传给new Data之后立马变成{n:(...)}。

那么问题来了，{n:(...)}是什么东西，为什么表现的和{n:0}一致？
要探究这个问题，我们要了解一下ES 6的getter和setter。看过文档之后，再看下面这段代码:

需求一 : 得到姓名

let obj1 = {
  姓: "高",
  名: "圆圆",
  姓名() {
    return this.姓 + this.名;
  },
  age: 18
};
console.log("需求一：" + obj1.姓名());

console.log("需求一：" + obj1.姓名())这里的姓名后面的括号能删掉吗？不能，因为它是函数，怎么去掉括号？

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

let obj2 = {
  姓: "高",
  名: "圆圆",
  get 姓名() {
    return this.姓 + this.名;
  },
  age: 18
};
console.log("需求二：" + obj2.姓名);

这里我们使用了get函数，getter 就是这样用的。不加括号的函数。

需求三：姓名可以被改写

let obj3 = {
  姓: "高",
  名: "圆圆",
  get 姓名() {
    return this.姓 + this.名;
  },
  set 姓名(xxx){
    this.姓 = xxx[0]
    this.名 = xxx.slice(1)
  },
  age: 18
};

obj3.姓名 = '高媛媛'

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

这里使用了set函数，setter 就是这样用的。用 = xxx 触发 set 函数

通过对上面代码的分析，感觉多少明白了一点，如果还是不太明白，那接着进行下面的实验，（在进行接下来的分析需要先了解Object.defineProperty）看下面这段代码:

需求一：用 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(`${data4.n}`)
myData.n = -1
console.log(`${data4.n}，设置为 -1 失败了吗！？`)

为了避免用户擅自修改 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){
      data.n = value
    }
  })
  
  return obj // 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})很相像。
从新整理一下思路，用图示辅助理解一下:

小结

1、Object.defineProperty

可以给对象添加属性value
可以给对象添加getter/setter
getter/setter用于对属性的读写进行监控

2、什么是代理（设计模式）

对myData对象的属性读写，全权由另一个对象vm负责
vm就是myData的代理（类比房东租房）

3、vm=new Vue({data:myData})

会让vm成为myData的代理（proxy）
会对myData的所有属性进行监控

（为什么要监控，为了防止myData的属性变了，vm不知道）

二、数据响应式

1、什么是响应式
是一种技术做法，该设计可使网站在不同的设备（从桌面电脑显示器到移动电话或其他移动产品设备）上浏览时对应不同分辨率皆有适合的呈现，减少用户进行缩放、平移和滚动等操作行为。

2、Vue的data是响应式

const vm=new Vue({data:{n:0}})
如果修改vm.n，那么UI中的n就会响应
Vue 2通过Object.defineProperty来实现数据响应式

3、响应式网页是什么
如果改变窗口大小，网页内容就会做出响应，这就是响应式网页。

三、Vue.set和this.$set

1、Object.defineProperty的问题
Object.defineProperty(obj,'n',{...})必须要有一个'n',才能监听&代理obj.n。
如果没有给n怎么办，这时候如果运行代码，Vue会给出一个警告。

解决办法

把key声明好，后面不再加属性就可以了
使用Vue.set或者this.$set

2、Vue.set和this.$set的作用

新增key
自动创建代理和监听（如果没有创建过）
触发UI更新（但是不会立刻更新）

举例

this.$set(this.object,'m',100)

3、data中有数组怎么办？

没有办法提前声明所有的key

数组的长度可以一直增加，下标就是key，因此没有用办法提前把数组的key都声明出来，Vue也不能检测对你新增了下标，不可能每次改数组都要用Vue.set或者this.$set

尤雨溪的做法

篡改数组的API，可以参考文档变异方法章节，这7个API都会被Vue篡改，调用后会更新UI。

总结

1、对象中新增的key

Vue没有办法事先监听和代理
要使用set来新增key，创建监听和代理，更新UI
最好提前把属性都写出来，不要新增key
数组做不到不新增key

2、数组中新增的key

也可以set来新增key,更新UI
尤雨溪篡改了7个API方便你对数组进行增删
这7个PI会自动处理监听和代理，并更新UI

（数组新增key最好通过7个API）

深入理解Vue的数据响应式

一、Vue对data做了什么？

小结

二、数据响应式

三、Vue.set和this.$set

解决办法

举例

总结

猜你喜欢

热点阅读