美文网首页
深入理解Vue的数据响应式

深入理解Vue的数据响应式

作者: 云卷云舒听雨声 | 来源:发表于2020-04-26 14:43 被阅读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 6getter和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的数据响应式

          本文链接:https://www.haomeiwen.com/subject/ulvxwhtx.html