Vue数据响应式

芝麻凛 2021年09月11日 406次浏览

Vue数据响应式

深入理解options.data

什么是数据响应式
数据响应式是指，在改变数据的时候，视图也会跟着更新。

当修改 Vue 实例中的数据式，视图就会重新渲染，出现新的内容。这就是 Vue 的数据响应式。

Vue 是利用 Object.defineProperty 的方法里面的 getter 与 setter 方法的观察者模式来实现数据响应式的

主要原理在文档的深入响应式原理章节内可以找到

Vue对data做了什么

做个实验

如果data变了

代码：myData变了

//一般没人这么写，这样写是为了引用完整版 Vue
import Vue from "vue/dist/vue.js"; 
import App from "./App.vue";

Vue.config.productionTip = false;

const myData = {
  n: 0
}
console.log(myData)  //重点

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

setTimeout(()=>{
  myData.n += 10
  console.log(myData) //重点
},3000)
  • 一开始是,传给new Vue之后里面变成{n:(...)}
  • 这时候就需要学习ES6的getter和setter
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 就是这样用的。用 = xxx 触发 set 函数

并不存在一个{n:()}的属性，而是有getter n和setter n，它们来模拟对一个虚拟的属性 n 进行读写操作。

为什么要把n变成get n 和 set n呢？

Object.defineProperty方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

let data0 = {
  n: 0
}

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

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

// 需求五：就算用户擅自修改 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){
      if(value<0)return//这句话多余了
      data.n = value
    }
  })
  
  return obj // obj 就是代理
}

// data3 就是 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})

// 现在我们可以说说 new Vue 做了什么了

Object.defineProperty

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

代理是什么（设计模式）

  • 对myData对象的属性读写，全权由另一个对象vm负责
  • 那么vm就是myData的代理（类似中介代理房东）
  • 比如myData.n 不用，使用vm.n 来操作myData.n

vm = new Vue()

  1. 会让vm称为myData的代理（proxy）
  2. 会对myData的所有属性进行监控
  3. 为什么要监控？为了防止myData的属性变了，vm不知道
  4. vm知道了就可以调用render(data)，UI = render(data)

image20210925153337968.png

如果data有多个属性n、m、k，那么就会有get n/get m /get k等

数据响应式

什么是数据响应式

  • 若一个物体能对外界的刺激做出反应，那么它就是响应式的。

Vue的data是响应式

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

响应式网页

Object.defineProperty的问题

  • Object.defineProperty(obj,’n’,)

  • 必须要有一个‘n’，才能监听&代理obj.n

  • 如果没有给n怎么办，Vue会给出一个警告，Vue只会检查第一层属性

  • //一般没人这么写，我这样写是为了引用完整版 Vue
import Vue from "vue/dist/vue.js";

Vue.config.productionTip = false;

new Vue({
  data: {},
  template: `
    <div>{{n}}</div>
  `
}).$mount("#app");

    //一般没人这么写，我这样写是为了引用完整版 Vue
import Vue from "vue/dist/vue.js";

Vue.config.productionTip = false;

new Vue({
  data: {
    obj: {
      a: 0, // obj.a 会被 Vue 监听 & 代理
      //b: undefined  解决方法一
    }
  },
  template: `
    <div>
      {{obj.b}}
      <button @click="setB">set b</button>
    </div>
  `,
  methods: {
    setB() {
      //this.obj.b = 1; //请问，页面中会显示 1 吗？
      Vue.set(thid.obj,'b',1) // 解决方法二
      this.$set(thid.obj,'b',1)
    }
  }
}).$mount("#app");

  • 此时如果点击set b，视图中会显示1吗？不会，因为Vue没办法监听一开始不存在的obj.b

解决办法

  1. 把key都声明好，后面不再加属性
  2. 使用Vue.set 或者 this.$set

Vue.set 和 this.$set

作用

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

举例

  • this.$set(this.object,’m’,100)

下面模仿Vue包裹的方法：

class VueArray extends Array{
      push(...args){
            const oldLength=this.length  
           super.push(...args)
           for(let i=oldLength;i<this.length;i++){
                Vue.set(this,i,this[i])   //将每一个新增的key都告诉Vue
          }
      }
}

总结

对象中新增的key

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

数组中新增的key

  • 也可以用set来新增key，且创建监听和代理，更新UI
    • this.$set 作用于数组时，并不会自动添加监听和代理，原因未知，只能问尤雨溪了。使用 Vue 提供的数组变异 API 时，会自动添加监听和代理
    • et 了之后再用 this.array[n] += 1 是否会触发 UI 更新（答案是不会）
  • 不过Vue篡改了7个API方便对数组进行增删
  • 这七个API会自动处理监听和代理，并更新UI （push()、pop()、shift()、unshift()、splice()、sort()、reverse()）
  • 它们不是Array原来的API，是Vue在中间加上去的
  • 结论：数组新增key最好通过这7个API
上一篇： Vue构造选项（二）