精华内容
下载资源
问答
  • Computed 计算属性Vue 中常用的一个功能,本篇文章主要介绍了Vue Computed 计算属性原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 很多人提起 Vue 中的 computed,第一反应就是计算属性缓存,那么它到底是怎么缓存的呢?缓存的到底是什么,什么时候缓存会失效,相信还是有很多人对此很模糊。 本文以 Vue 2.6.11 版本为基础,就深入原理,带你来...

    前言

    很多人提起 Vue 中的 computed,第一反应就是计算属性会缓存,那么它到底是怎么缓存的呢?缓存的到底是什么,什么时候缓存会失效,相信还是有很多人对此很模糊。

    本文以 Vue 2.6.11 版本为基础,就深入原理,带你来看看所谓的缓存到底是什么样的。

    注意

    注意,这篇文章里我也写了 computed 的原理,但是这篇文章里的 computed 是基于 Vue 2.5 版本的,和当前 2.6 版本的变化还是非常大的,可以仅做参考。

    示例

    按照我的文章惯例,还是以一个最简的示例来演示。

    <div id="app">
      <span @click="change">{{sum}}</span>
    </div>
    <script src="./vue2.6.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            count: 1,
          }
        },
        methods: {
          change() {
            this.count = 2
          },
        },
        computed: {
          sum() {
            return this.count + 1
          },
        },
      })
    </script>
    

    这个例子很简单,刚开始页面上显示数字 2,点击数字后变成 3

    解析

    回顾 watcher 的流程

    进入正题,Vue 初次运行时会对 computed 属性做一些初始化处理,首先我们回顾一下 watcher 的概念,它的核心概念是 get 求值,和 update 更新。

    1. 在求值的时候,它会先把自身也就是 watcher 本身赋值给 Dep.target 这个全局变量。

    2. 然后求值的过程中,会读取到响应式属性,那么响应式属性的 dep 就会收集到这个 watcher 作为依赖。

    3. 下次响应式属性更新了,就会从 dep 中找出它收集到的 watcher,触发 watcher.update() 去更新。

    所以最关键的就在于,这个 get 到底用来做什么,这个 update 会触发什么样的更新。

    在基本的响应式更新视图的流程中,以上概念的 get 求值就是指 Vue 的组件重新渲染的函数,而 update 的时候,其实就是重新调用组件的渲染函数去更新视图。

    而 Vue 中很巧妙的一点,就是这套流程也同样适用于 computed 的更新。

    初始化 computed

    这里先提前剧透一下,Vue 会对 options 中的每个 computed 属性也用 watcher 去包装起来,它的 get 函数显然就是要执行用户定义的求值函数,而 update 则是一个比较复杂的流程,接下来我会详细讲解。

    首先在组件初始化的时候,会进入到初始化 computed 的函数

    if (opts.computed) { initComputed(vm, opts.computed); }
    

    进入 initComputed 看看

    var watchers = vm._computedWatchers = Object.create(null);
    
    // 依次为每个 computed 属性定义
    for (const key in computed) {
      const userDef = computed[key]
      watchers[key] = new Watcher(
          vm, // 实例
          getter, // 用户传入的求值函数 sum
          noop, // 回调函数 可以先忽视
          { lazy: true } // 声明 lazy 属性 标记 computed watcher
      )
    
      // 用户在调用 this.sum 的时候,会发生的事情
      defineComputed(vm, key, userDef)
    }
    

    首先定义了一个空的对象,用来存放所有计算属性相关的 watcher,后文我们会把它叫做 计算watcher

    然后循环为每个 computed 属性生成了一个 计算watcher

    它的形态保留关键属性简化后是这样的:

    {
        deps: [],
        dirty: true,
        getter: ƒ sum(),
        lazy: true,
        value: undefined
    }
    

    可以看到它的 value 刚开始是 undefined,lazy 是 true,说明它的值是惰性计算的,只有到真正在模板里去读取它的值后才会计算。

    这个 dirty 属性其实是缓存的关键,先记住它。

    接下来看看比较关键的 defineComputed,它决定了用户在读取 this.sum 这个计算属性的值后会发生什么,继续简化,排除掉一些不影响流程的逻辑。

    Object.defineProperty(target, key, { 
        get() {
            // 从刚刚说过的组件实例上拿到 computed watcher
            const watcher = this._computedWatchers && this._computedWatchers[key]
            if (watcher) {
              // ✨ 注意!这里只有dirty了才会重新求值
              if (watcher.dirty) {
                // 这里会求值 调用 get
                watcher.evaluate()
              }
              // ✨ 这里也是个关键 等会细讲
              if (Dep.target) {
                watcher.depend()
              }
              // 最后返回计算出来的值
              return watcher.value
            }
        }
    })
    

    这个函数需要仔细看看,它做了好几件事,我们以初始化的流程来讲解它:

    首先 dirty 这个概念代表脏数据,说明这个数据需要重新调用用户传入的 sum 函数来求值了。我们暂且不管更新时候的逻辑,第一次在模板中读取到  {{sum}} 的时候它一定是 true,所以初始化就会经历一次求值。

    evaluate () {
      // 调用 get 函数求值
      this.value = this.get()
      // 把 dirty 标记为 false
      this.dirty = false
    }
    

    这个函数其实很清晰,它先求值,然后把 dirty 置为 false。

    再回头看看我们刚刚那段 Object.defineProperty 的逻辑,

    下次没有特殊情况再读取到 sum 的时候,发现 dirty是false了,是不是直接就返回 watcher.value 这个值就可以了,这其实就是计算属性缓存的概念。

    更新

    初始化的流程讲完了,相信大家也对 dirty 和 缓存 有了个大概的概念(如果没有,再仔细回头看一看)。

    接下来就讲更新的流程,细化到本文的例子中,也就是 count 的更新到底是怎么触发 sum在页面上的变更。

    首先回到刚刚提到的 evalute 函数里,也就是读取 sum 时发现是脏数据的时候做的求值操作。

    evaluate () {
      // 调用 get 函数求值
      this.value = this.get()
      // 把 dirty 标记为 false
      this.dirty = false
    }
    

    Dep.target 变更为 渲染watcher

    这里进入 this.get(),首先要明确一点,在模板中读取 {{ sum }} 变量的时候,全局的 Dep.target 应该是 渲染watcher,这里不理解的话可以到我最开始提到的文章里去理解下。

    全局的 Dep.target 状态是用一个栈 targetStack 来保存,便于前进和回退 Dep.target,至于什么时候会回退,接下来的函数里就可以看到。

    此时的 Dep.target 是 渲染watcher,targetStack 是 [ 渲染watcher ] 。
    
    get () {
      pushTarget(this)
      let value
      const vm = this.vm
      try {
        value = this.getter.call(vm, vm)
      } finally {
        popTarget()
      }
      return value
    }
    

    首先刚进去就 pushTarget,也就是把 计算watcher 自身置为 Dep.target,等待收集依赖。

    执行完 pushTarget(this) 后,

    Dep.target 变更为 计算watcher

    此时的 Dep.target 是 计算watcher,targetStack 是 [ 渲染watcher,计算watcher ] 。
    

    getter 函数,上一章的 watcher 形态里已经说明了,其实就是用户传入的 sum 函数。

    sum() {
        return this.count + 1
    }
    

    这里在执行的时候,读取到了 this.count,注意它是一个响应式的属性,所以冥冥之中它们开始建立了千丝万缕的联系……

    这里会触发 count 的 get 劫持,简化一下

    // 在闭包中,会保留对于 count 这个 key 所定义的 dep
    const dep = new Dep()
    
    // 闭包中也会保留上一次 set 函数所设置的 val
    let val
    
    Object.defineProperty(obj, key, {
      get: function reactiveGetter () {
        const value = val
        // Dep.target 此时就是计算watcher
        if (Dep.target) {
          // 收集依赖
          dep.depend()
        }
        return value
      },
    })
    

    那么可以看出,count 会收集 计算watcher 作为依赖,具体怎么收集呢

    // dep.depend()
    depend () {
      if (Dep.target) {
        Dep.target.addDep(this)
      }
    }
    

    其实这里是调用 Dep.target.addDep(this) 去收集,又绕回到 计算watcher 的 addDep函数上去了,这其实主要是 Vue 内部做了一些去重的优化。

    // watcher 的 addDep函数
    addDep (dep: Dep) {
      // 这里做了一系列的去重操作 简化掉 
      
      // 这里会把 count 的 dep 也存在自身的 deps 上
      this.deps.push(dep)
      // 又带着 watcher 自身作为参数
      // 回到 dep 的 addSub 函数了
      dep.addSub(this)
    }
    

    又回到 dep 上去了。

    class Dep {
      subs = []
    
      addSub (sub: Watcher) {
        this.subs.push(sub)
      }
    }
    

    这样就保存了 计算watcher 作为 count 的 dep 里的依赖了。

    经历了这样的一个收集的流程后,此时的一些状态:

    sum 的计算watcher

    {
        deps: [ count的dep ],
        dirty: false, // 求值完了 所以是false
        value: 2, // 1 + 1 = 2
        getter: ƒ sum(),
        lazy: true
    }
    

    count的dep:

    {
        subs: [ sum的计算watcher ]
    }
    

    可以看出,计算属性的 watcher 和它所依赖的响应式值的 dep,它们之间互相保留了彼此,相依为命。

    此时求值结束,回到 计算watcher 的 getter 函数:

    get () {
      pushTarget(this)
      let value
      const vm = this.vm
      try {
        value = this.getter.call(vm, vm)
      } finally {
        // 此时执行到这里了
        popTarget()
      }
      return value
    }
    

    执行到了 popTarget计算watcher 出栈。

    Dep.target 变更为 渲染watcher

    此时的 Dep.target 是 渲染watcher,targetStack 是 [ 渲染watcher ] 。
    

    然后函数执行完毕,返回了 2 这个 value,此时对于 sum 属性的 get 访问还没结束。

    Object.defineProperty(vm, 'sum', { 
        get() {
              // 此时函数执行到了这里
              if (Dep.target) {
                watcher.depend()
              }
              return watcher.value
            }
        }
    })
    

    此时的 Dep.target 当然是有值的,就是 渲染watcher,所以进入了 watcher.depend()的逻辑,这一步相当关键

    // watcher.depend
    depend () {
      let i = this.deps.length
      while (i--) {
        this.deps[i].depend()
      }
    }
    

    还记得刚刚的 计算watcher 的形态吗?它的 deps 里保存了 count 的 dep。

    也就是说,又会调用 count 上的 dep.depend()

    class Dep {
      subs = []
      
      depend () {
        if (Dep.target) {
          Dep.target.addDep(this)
        }
      }
    }
    

    这次的 Dep.target 已经是 渲染watcher 了,所以这个 count 的 dep 又会把 渲染watcher 存放进自身的 subs 中。

    count的dep:

    {
        subs: [ sum的计算watcher,渲染watcher ]
    }
    

    那么来到了此题的重点,这时候 count 更新了,是如何去触发视图更新的呢?

    再回到 count 的响应式劫持逻辑里去:

    // 在闭包中,会保留对于 count 这个 key 所定义的 dep
    const dep = new Dep()
    
    // 闭包中也会保留上一次 set 函数所设置的 val
    let val
    
    Object.defineProperty(obj, key, {
      set: function reactiveSetter (newVal) {
          val = newVal
          // 触发 count 的 dep 的 notify
          dep.notify()
        }
      })
    })
    

    好,这里触发了我们刚刚精心准备的 count 的 dep 的 notify 函数,感觉离成功越来越近了。

    class Dep {
      subs = []
      
      notify () {
        for (let i = 0, l = subs.length; i < l; i++) {
          subs[i].update()
        }
      }
    }
    
    

    这里的逻辑就很简单了,把 subs 里保存的 watcher 依次去调用它们的 update 方法,也就是

    1. 调用 计算watcher 的 update

    2. 调用 渲染watcher 的 update

    拆解来看。

    计算watcher 的 update

    update () {
      if (this.lazy) {
        this.dirty = true
      }
    }
    

    wtf,就这么一句话…… 没错,就仅仅是把 计算watcher 的 dirty 属性置为 true,静静的等待下次读取即可。

    渲染watcher 的 update

    这里其实就是调用 vm._update(vm._render()) 这个函数,重新根据 render 函数生成的 vnode 去渲染视图了。

    而在 render 的过程中,一定会访问到 sum 这个值,那么又回回到 sum 定义的 get上:

    Object.defineProperty(target, key, { 
        get() {
            const watcher = this._computedWatchers && this._computedWatchers[key]
            if (watcher) {
              // ✨上一步中 dirty 已经置为 true, 所以会重新求值
              if (watcher.dirty) {
                watcher.evaluate()
              }
              if (Dep.target) {
                watcher.depend()
              }
              // 最后返回计算出来的值
              return watcher.value
            }
        }
    })
    

    由于上一步中的响应式属性更新,触发了 计算 watcher 的 dirty 更新为 true。所以又会重新调用用户传入的 sum 函数计算出最新的值,页面上自然也就显示出了最新的值。

    至此为止,整个计算属性更新的流程就结束了。

    缓存生效的情况

    根据上面的总结,只有计算属性依赖的响应式值发生更新的时候,才会把 dirty 重置为 true,这样下次读取的时候才会发生真正的计算。

    这样的话,假设 sum 函数是一个用户定义的一个比较耗费时间的操作,优化就比较明显了。

    <div id="app">
      <span @click="change">{{sum}}</span>
      <span @click="changeOther">{{other}}</span>
    </div>
    <script src="./vue2.6.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            count: 1,
            other: 'Hello'
          }
        },
        methods: {
          change() {
            this.count = 2
          },
          changeOther() {
            this.other = 'ssh'
          }
        },
        computed: {
          // 非常耗时的计算属性
          sum() {
            let i = 100000
            while(i > 0) {
                i--
            }
            return this.count + 1
          },
        },
      })
    </script>
    

    在这个例子中,other 的值和计算属性没有任何关系,如果 other 的值触发更新的话,就会重新渲染视图,那么会读取到 sum,如果计算属性不做缓存的话,每次都要发生一次很耗费性能的没有必要的计算。

    所以,只有在 count 发生变化的时候,sum 才会重新计算,这是一个很巧妙的优化。

    总结

    2.6 版本计算属性更新的路径是这样的:

    1. 响应式的值 count 更新

    2. 同时通知 computed watcher 和 渲染 watcher 更新

    3. omputed watcher 把 dirty 设置为 true

    4. 视图渲染读取到 computed 的值,由于 dirty 所以 computed watcher 重新求值。

    通过本篇文章,相信你可以完全理解计算属性的缓存到底是什么概念,在什么样的情况下才会生效了吧?

    展开全文
  • Vue 计算属性

    2021-03-21 22:49:18
    vue中一些数据经常依赖于别的数据做出改变,且改变的逻辑也较复杂,这个时候就需要用到计算属性computed。通俗来说就是当前数据不是确定的,要经常做出改变,而这个改变是其他数据改变导致的。 简单使用 <div ...

    前言

    人生如逆水行舟,不进则退

    简介

    在vue中一些数据经常依赖于别的数据做出改变,且改变的逻辑也较复杂,这个时候就需要用到计算属性computed。通俗来说就是当前数据不是确定的,要经常做出改变,而这个改变是其他数据改变导致的。

    简单使用

    <div id="app">
      <h2>{{firstName}} {{lastName}}</h2>
      <h2>{{firstName+" "+lastName}}</h2>
      <h2>{{getFullName()}}</h2>
      <h2>{{fullName}}</h2> 
    </div>
    <script>
      const app = new Vue({
        el:"#app",
        data:{
          firstName:'Key',
          lastName:'Ting'
        },
        computed:{
          //不加动词,这是计算属性,那么最好以属性命名,这里的写法是计算属性的简写
          fullName(){
            return this.firstName+" "+this.lastName
          }
            
        },
        methods:{
          getFullName(){
            return this.firstName+" "+this.lastName
          }
        }
      })
    </script>
    </body>
    </html>
    
    
    <div id="app">
      <h2>总价格:{{totalPrice}}</h2>
    </div>
    <script>
      const app = new Vue({
        el:"#app",
        data:{
          books:[
            {id: 1001, name: 'Unix编程艺术',price: 119},
            {id: 1002, name: '代码大全',price: 105},
            {id: 1003, name: '深入理解计算机原理',price: 99},
            {id: 1004, name: '现代操作系统',price: 109}
          ]
        },
        computed:{
          totalPrice(){
            //filter/map/reduce 高级用法
            let result = 0
            for(let i=0;i < this.books.length;i++){
              result += this.books[i].price
            }
            return result
          }
        }
      })
    </script>
    
    

    setter和getter

    • 每个计算属性都包括一个getter和一个setter
    • 语法糖情况下,表示getter,取数据
    • setter一般不用,所以我们常称计算属性为只读属性
    <div id="app">
      <h2>{{fullName}}</h2>
    </div>
    <script>
      const app = new Vue({
        el:"#app",
        data:{
          firstName:'Key',
          lastName:'Ting'
        },
        computed:{
          //不加动词,这是计算属性,那么最好以属性命名
          //语法糖,简写
          // fullName(){
              // `this` 指向 app 实例
          //   return this.firstName+" "+this.lastName
          // }
            //规范格式
          fullName:{
            //计算属性中set方法一般不使用,只是一个只读属性
            set(newValue){
              console.log('-------------',newValue);
              const names = newValue.split(' ');
              this.firstName = names[0];
              this.lastName = names[1];
            },
            get(){
              return this.firstName+" "+this.lastName
            }
          }
        }
      })
    </script>
    
    

    计算属性和methods对比

    methods和computed看起来都可以实现我们的功能,那么为什么还要多一个计算属性这个东西呢?

    官方:两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

    原因:计算属性会进行缓存,如果多次使用,计算属性只会调用一次,极大提高了性能除非原属性发生改变,才会重新调用计算属性,更改属性值

    <div id="app">
    <!--  1.直接拼接:语法过于繁琐-->
      <h2>{{firstName}} {{lastName}}</h2>
    <!--  2.通过定义methods 每一个都会调用getfullname函数,如果很复杂,性能消耗是很大的 -->
      <h2>{{getFullName()}}</h2> 
      <h2>{{getFullName()}}</h2>
      <h2>{{getFullName()}}</h2>
    <!--  3.通过computed 只会调用第一次,除非原属性发生改变,才会重新调用计算属性,更改属性值 -->
      <h2>{{fullName}}</h2>
      <h2>{{fullName}}</h2>
      <h2>{{fullName}}</h2>
    </div>
    <script>
      const app = new Vue({
        el:"#app",
        data:{
          firstName:'kebe',
          lastName:'bryant'
        },
        methods:{
          getFullName() {
            console.log('getFullName');
            return this.firstName+' '+this.lastName;
          }
        },
        computed:{
          fullName(){
            console.log('fullName');
            return this.firstName+' '+this.lastName;
          }
        }
      })
    </script>
    
    
    展开全文
  • 前言很多人提起 Vue 中的 computed,第一反应就是计算属性缓存,那么它到底是怎么缓存的呢?缓存的到底是什么,什么时候缓存会失效,相信还是有很多人对此很模糊。本文以 Vue 2...

    前言

    很多人提起 Vue 中的 computed,第一反应就是计算属性会缓存,那么它到底是怎么缓存的呢?缓存的到底是什么,什么时候缓存会失效,相信还是有很多人对此很模糊。

    本文以 Vue 2.6.11 版本为基础,就深入原理,带你来看看所谓的缓存到底是什么样的。

    注意

    本文假定你对 Vue 响应式原理已经有了基础的了解,如果对于 WatcherDep和什么是 渲染watcher 等概念还不是很熟悉的话,可以先找一些基础的响应式原理的文章或者教程看一下。视频教程的话推荐黄轶老师的,如果想要看简化实现,也可以先看我写的文章:

    手把手带你实现一个最精简的响应式系统来学习Vue的data、computed、watch源码[1]

    注意,这篇文章里我也写了 computed 的原理,但是这篇文章里的 computed 是基于 Vue 2.5 版本的,和当前 2.6 版本的变化还是非常大的,可以仅做参考。

    示例

    按照我的文章惯例,还是以一个最简的示例来演示。

    <div id="app">
      <span @click="change">{{sum}}</span>
    </div>
    <script src="./vue2.6.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            count: 1,
          }
        },
        methods: {
          change() {
            this.count = 2
          },
        },
        computed: {
          sum() {
            return this.count + 1
          },
        },
      })
    </script>
    

    这个例子很简单,刚开始页面上显示数字 2,点击数字后变成 3

    解析

    回顾 watcher 的流程

    进入正题,Vue 初次运行时会对 computed 属性做一些初始化处理,首先我们回顾一下 watcher 的概念,它的核心概念是 get 求值,和 update 更新。

    1. 在求值的时候,它会先把自身也就是 watcher 本身赋值给 Dep.target 这个全局变量。

    2. 然后求值的过程中,会读取到响应式属性,那么响应式属性的 dep 就会收集到这个 watcher 作为依赖。

    3. 下次响应式属性更新了,就会从 dep 中找出它收集到的 watcher,触发 watcher.update() 去更新。

    所以最关键的就在于,这个 get 到底用来做什么,这个 update 会触发什么样的更新。

    在基本的响应式更新视图的流程中,以上概念的 get 求值就是指 Vue 的组件重新渲染的函数,而 update 的时候,其实就是重新调用组件的渲染函数去更新视图。

    而 Vue 中很巧妙的一点,就是这套流程也同样适用于 computed 的更新。

    初始化 computed

    这里先提前剧透一下,Vue 会对 options 中的每个 computed 属性也用 watcher 去包装起来,它的 get 函数显然就是要执行用户定义的求值函数,而 update 则是一个比较复杂的流程,接下来我会详细讲解。

    首先在组件初始化的时候,会进入到初始化 computed 的函数

    if (opts.computed) { initComputed(vm, opts.computed); }
    

    进入 initComputed 看看

    var watchers = vm._computedWatchers = Object.create(null);
    
    // 依次为每个 computed 属性定义
    for (const key in computed) {
      const userDef = computed[key]
      watchers[key] = new Watcher(
          vm, // 实例
          getter, // 用户传入的求值函数 sum
          noop, // 回调函数 可以先忽视
          { lazy: true } // 声明 lazy 属性 标记 computed watcher
      )
    
      // 用户在调用 this.sum 的时候,会发生的事情
      defineComputed(vm, key, userDef)
    }
    

    首先定义了一个空的对象,用来存放所有计算属性相关的 watcher,后文我们会把它叫做 计算watcher

    然后循环为每个 computed 属性生成了一个 计算watcher

    它的形态保留关键属性简化后是这样的:

    {
        deps: [],
        dirty: true,
        getter: ƒ sum(),
        lazy: true,
        value: undefined
    }
    

    可以看到它的 value 刚开始是 undefined,lazy 是 true,说明它的值是惰性计算的,只有到真正在模板里去读取它的值后才会计算。

    这个 dirty 属性其实是缓存的关键,先记住它。

    接下来看看比较关键的 defineComputed,它决定了用户在读取 this.sum 这个计算属性的值后会发生什么,继续简化,排除掉一些不影响流程的逻辑。

    Object.defineProperty(target, key, { 
        get() {
            // 从刚刚说过的组件实例上拿到 computed watcher
            const watcher = this._computedWatchers && this._computedWatchers[key]
            if (watcher) {
              // ✨ 注意!这里只有dirty了才会重新求值
              if (watcher.dirty) {
                // 这里会求值 调用 get
                watcher.evaluate()
              }
              // ✨ 这里也是个关键 等会细讲
              if (Dep.target) {
                watcher.depend()
              }
              // 最后返回计算出来的值
              return watcher.value
            }
        }
    })
    

    这个函数需要仔细看看,它做了好几件事,我们以初始化的流程来讲解它:

    首先 dirty 这个概念代表脏数据,说明这个数据需要重新调用用户传入的 sum 函数来求值了。我们暂且不管更新时候的逻辑,第一次在模板中读取到  {{sum}} 的时候它一定是 true,所以初始化就会经历一次求值。

    evaluate () {
      // 调用 get 函数求值
      this.value = this.get()
      // 把 dirty 标记为 false
      this.dirty = false
    }
    

    这个函数其实很清晰,它先求值,然后把 dirty 置为 false。

    再回头看看我们刚刚那段 Object.defineProperty 的逻辑,

    下次没有特殊情况再读取到 sum 的时候,发现 dirty是false了,是不是直接就返回 watcher.value 这个值就可以了,这其实就是计算属性缓存的概念。

    更新

    初始化的流程讲完了,相信大家也对 dirty缓存 有了个大概的概念(如果没有,再仔细回头看一看)。

    接下来就讲更新的流程,细化到本文的例子中,也就是 count 的更新到底是怎么触发 sum 在页面上的变更。

    首先回到刚刚提到的 evalute 函数里,也就是读取 sum 时发现是脏数据的时候做的求值操作。

    evaluate () {
      // 调用 get 函数求值
      this.value = this.get()
      // 把 dirty 标记为 false
      this.dirty = false
    }
    

    Dep.target 变更为 渲染watcher

    这里进入 this.get(),首先要明确一点,在模板中读取 {{ sum }} 变量的时候,全局的 Dep.target 应该是 渲染watcher,这里不理解的话可以到我最开始提到的文章里去理解下。

    全局的 Dep.target 状态是用一个栈 targetStack 来保存,便于前进和回退 Dep.target,至于什么时候会回退,接下来的函数里就可以看到。

    此时的 Dep.target 是 渲染watcher,targetStack 是 [ 渲染watcher ] 。
    
    get () {
      pushTarget(this)
      let value
      const vm = this.vm
      try {
        value = this.getter.call(vm, vm)
      } finally {
        popTarget()
      }
      return value
    }
    

    首先刚进去就 pushTarget,也就是把 计算watcher 自身置为 Dep.target,等待收集依赖。

    执行完 pushTarget(this) 后,

    Dep.target 变更为 计算watcher

    此时的 Dep.target 是 计算watcher,targetStack 是 [ 渲染watcher,计算watcher ] 。
    

    getter 函数,上一章的 watcher 形态里已经说明了,其实就是用户传入的 sum 函数。

    sum() {
        return this.count + 1
    }
    

    这里在执行的时候,读取到了 this.count,注意它是一个响应式的属性,所以冥冥之中它们开始建立了千丝万缕的联系……

    这里会触发 countget 劫持,简化一下

    // 在闭包中,会保留对于 count 这个 key 所定义的 dep
    const dep = new Dep()
    
    // 闭包中也会保留上一次 set 函数所设置的 val
    let val
    
    Object.defineProperty(obj, key, {
      get: function reactiveGetter () {
        const value = val
        // Dep.target 此时就是计算watcher
        if (Dep.target) {
          // 收集依赖
          dep.depend()
        }
        return value
      },
    })
    

    那么可以看出,count 会收集 计算watcher 作为依赖,具体怎么收集呢

    // dep.depend()
    depend () {
      if (Dep.target) {
        Dep.target.addDep(this)
      }
    }
    

    其实这里是调用 Dep.target.addDep(this) 去收集,又绕回到 计算watcheraddDep 函数上去了,这其实主要是 Vue 内部做了一些去重的优化。

    // watcher 的 addDep函数
    addDep (dep: Dep) {
      // 这里做了一系列的去重操作 简化掉 
      
      // 这里会把 count 的 dep 也存在自身的 deps 上
      this.deps.push(dep)
      // 又带着 watcher 自身作为参数
      // 回到 dep 的 addSub 函数了
      dep.addSub(this)
    }
    

    又回到 dep 上去了。

    class Dep {
      subs = []
    
      addSub (sub: Watcher) {
        this.subs.push(sub)
      }
    }
    

    这样就保存了 计算watcher 作为 count 的 dep 里的依赖了。

    经历了这样的一个收集的流程后,此时的一些状态:

    sum 的计算watcher

    {
        deps: [ count的dep ],
        dirty: false, // 求值完了 所以是false
        value: 2, // 1 + 1 = 2
        getter: ƒ sum(),
        lazy: true
    }
    

    count的dep:

    {
        subs: [ sum的计算watcher ]
    }
    

    可以看出,计算属性的 watcher 和它所依赖的响应式值的 dep,它们之间互相保留了彼此,相依为命。

    此时求值结束,回到 计算watchergetter 函数:

    get () {
      pushTarget(this)
      let value
      const vm = this.vm
      try {
        value = this.getter.call(vm, vm)
      } finally {
        // 此时执行到这里了
        popTarget()
      }
      return value
    }
    

    执行到了 popTarget计算watcher 出栈。

    Dep.target 变更为 渲染watcher

    此时的 Dep.target 是 渲染watcher,targetStack 是 [ 渲染watcher ] 。
    

    然后函数执行完毕,返回了 2 这个 value,此时对于 sum 属性的 get 访问还没结束。

    Object.defineProperty(vm, 'sum', { 
        get() {
              // 此时函数执行到了这里
              if (Dep.target) {
                watcher.depend()
              }
              return watcher.value
            }
        }
    })
    

    此时的 Dep.target 当然是有值的,就是 渲染watcher,所以进入了 watcher.depend() 的逻辑,这一步相当关键

    // watcher.depend
    depend () {
      let i = this.deps.length
      while (i--) {
        this.deps[i].depend()
      }
    }
    

    还记得刚刚的 计算watcher 的形态吗?它的 deps 里保存了 count 的 dep。

    也就是说,又会调用 count 上的 dep.depend()

    class Dep {
      subs = []
      
      depend () {
        if (Dep.target) {
          Dep.target.addDep(this)
        }
      }
    }
    

    这次的 Dep.target 已经是 渲染watcher 了,所以这个 count 的 dep 又会把 渲染watcher 存放进自身的 subs 中。

    count的dep:

    {
        subs: [ sum的计算watcher,渲染watcher ]
    }
    

    那么来到了此题的重点,这时候 count 更新了,是如何去触发视图更新的呢?

    再回到 count 的响应式劫持逻辑里去:

    // 在闭包中,会保留对于 count 这个 key 所定义的 dep
    const dep = new Dep()
    
    // 闭包中也会保留上一次 set 函数所设置的 val
    let val
    
    Object.defineProperty(obj, key, {
      set: function reactiveSetter (newVal) {
          val = newVal
          // 触发 count 的 dep 的 notify
          dep.notify()
        }
      })
    })
    

    好,这里触发了我们刚刚精心准备的 count 的 dep 的 notify 函数,感觉离成功越来越近了。

    class Dep {
      subs = []
      
      notify () {
        for (let i = 0, l = subs.length; i < l; i++) {
          subs[i].update()
        }
      }
    }
    
    

    这里的逻辑就很简单了,把 subs 里保存的 watcher 依次去调用它们的 update 方法,也就是

    1. 调用 计算watcher 的 update

    2. 调用 渲染watcher 的 update

    拆解来看。

    计算watcher 的 update

    update () {
      if (this.lazy) {
        this.dirty = true
      }
    }
    

    wtf,就这么一句话…… 没错,就仅仅是把 计算watcherdirty 属性置为 true,静静的等待下次读取即可。

    渲染watcher 的 update

    这里其实就是调用 vm._update(vm._render()) 这个函数,重新根据 render 函数生成的 vnode 去渲染视图了。

    而在 render 的过程中,一定会访问到 sum 这个值,那么又回回到 sum 定义的 get 上:

    Object.defineProperty(target, key, { 
        get() {
            const watcher = this._computedWatchers && this._computedWatchers[key]
            if (watcher) {
              // ✨上一步中 dirty 已经置为 true, 所以会重新求值
              if (watcher.dirty) {
                watcher.evaluate()
              }
              if (Dep.target) {
                watcher.depend()
              }
              // 最后返回计算出来的值
              return watcher.value
            }
        }
    })
    

    由于上一步中的响应式属性更新,触发了 计算 watcherdirty 更新为 true。所以又会重新调用用户传入的 sum 函数计算出最新的值,页面上自然也就显示出了最新的值。

    至此为止,整个计算属性更新的流程就结束了。

    缓存生效的情况

    根据上面的总结,只有计算属性依赖的响应式值发生更新的时候,才会把 dirty 重置为 true,这样下次读取的时候才会发生真正的计算。

    这样的话,假设 sum 函数是一个用户定义的一个比较耗费时间的操作,优化就比较明显了。

    <div id="app">
      <span @click="change">{{sum}}</span>
      <span @click="changeOther">{{other}}</span>
    </div>
    <script src="./vue2.6.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            count: 1,
            other: 'Hello'
          }
        },
        methods: {
          change() {
            this.count = 2
          },
          changeOther() {
            this.other = 'ssh'
          }
        },
        computed: {
          // 非常耗时的计算属性
          sum() {
            let i = 100000
            while(i > 0) {
                i--
            }
            return this.count + 1
          },
        },
      })
    </script>
    

    在这个例子中,other 的值和计算属性没有任何关系,如果 other 的值触发更新的话,就会重新渲染视图,那么会读取到 sum,如果计算属性不做缓存的话,每次都要发生一次很耗费性能的没有必要的计算。

    所以,只有在 count 发生变化的时候,sum 才会重新计算,这是一个很巧妙的优化。

    总结

    2.6 版本计算属性更新的路径是这样的:

    1. 响应式的值 count 更新

    2. 同时通知 computed watcher渲染 watcher 更新

    3. omputed watcher 把 dirty 设置为 true

    4. 视图渲染读取到 computed 的值,由于 dirty 所以 computed watcher 重新求值。

    通过本篇文章,相信你可以完全理解计算属性的缓存到底是什么概念,在什么样的情况下才会生效了吧?

    参考资料

    [1]

    手把手带你实现一个最精简的响应式系统来学习Vue的data、computed、watch源码: https://juejin.im/post/5db6433b51882564912fc30f

    ◆ ◆ ◆  ◆ ◆
    长按关注小生
    

    你的在看我当成喜欢

    展开全文
  • Vue计算属性

    2021-07-20 19:59:05
    (2)计算属性是放在vue实例的computed中定义,与methods类似,都是定义函数。 (3)计算属性定义在computed中,调用时使用mustache语法调用且后面不跟() <div id="app"> <h2>{{firstName+ ' ' + lastName...

    1、计算属性的基本使用

    (1)当模板{{ }} 里面的插值比较麻烦时,可以将数据放到计算属性,然后用该计算属性。
    (2)计算属性是放在vue实例的computed中定义,与methods类似,都是定义函数。
    (3)计算属性定义在computed中,调用时使用mustache语法调用且后面不跟()

    <div id="app">
      <h2>{{firstName+ ' ' + lastName}}</h2>
      <h2>{{firstName}} {{lastName}}</h2>
      //拼接全名
      //这种拼接后看起来比较复杂,则我们可以用methods,调用方法实现
      <h2>{{getFullName()}}</h2>
      //用methods里面放的是一个方法,我们用如果直接放一个属性会更好
      //使用计算属性
      <h2>{{FullName}}</h2>
    </div>
    
    <script>
      const app = new Vue({
        el:"#app",
        data:{
          firstName:"Lebron",
          lastName:"James"
        },
        methods:{     //定义函数,以函数方式使用;
          getFullName:function () {
            return this.firstName+ ' ' +this.lastName
          }
        },
        computed:{    //计算属性,里面定义函数,将函数以属性方式使用;
          FullName:function () {
            return this.firstName+ ' ' +this.lastName
          }
        }
      })
    </script>
    

    2、计算属性的复杂操作

    <div id="app">
    	// 要实现计算书的总价格
    	// 常规方法很累赘
    	<h2>总价格:{{books[0].price + books[1].price + books[2].price + books[3].price }}</h2>
    	// 用计算属性来实现
    	<h2>总价格:{{totalPrice}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                books: [
                    { id: 110, name: 'Unix编程艺术', price: 119 },
                    { id: 111, name: '代码大全', price: 101 },
                    { id: 112, name: '深入理解计算机原理', price: 56 },
                    { id: 113, name: '现代操作系统', price: 87 },
                ]
            },
            computed: {
                totalPrice: function () {
                    let res = 0;
                    for (let i = 0; i < this.books.length; i++) {
                        res += this.books[i].price;
                    }
                    return res;
                }
            }
        })
    </script>
    

    3、计算属性的setter和getter方法

    计算属性的标准写法为:
    computed: {
          fullName:{
          set: function () {
          },
          get: function () {
             return this.firstName + ' ' + this.lastName
          }
        }
    }
    但是一般在使用时,只需要实现get方法;set方法不用设置实现,所以一般直接不要;
    直接写为:
    computed:{
       fullName:function(){        
       	 return this.firstName + ' ' + this.lastName
       }
    }
    在ES6里面对象内函数的增强写法
    computed:{
       fullName(){        
       	 return this.firstName + ' ' + this.lastName
       }
    }
    

    4、计算属性和methods的对比(缓存)

    计算属性具有缓存机制。
    methods中的方法每使用一次就会被调用一次,不管里面的数据是否发生变化。而使用计算属性时,只要里面影响结果的变量没有发生变化,无论计算属性被使用多少次,函数都只会被调用一次。

    <div id="app">
    	<!-- 1.通过定义methods,使用了4次方法,且data中变量没有变化,函数就会被调用4次 -->
    	<!-- <h2>{{getFullName()}}</h2>
    	<h2>{{getFullName()}}</h2>
    	<h2>{{getFullName()}}</h2>
    	<h2>{{getFullName()}}</h2> -->
    	<!-- 2.通过computed,使用了4次方法,且data中变量没有变化,但函数只会被调用1次-->
    	<h2>{{fullName}}</h2>
    	<h2>{{fullName}}</h2>
    	<h2>{{fullName}}</h2>
    	<h2>{{fullName}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                firstName: 'koby',
                lastName: 'Bryant'
         },
         methods: {
              getFullName: function () {
                  console.log('getFullName');
                  return this.firstName + ' ' + this.lastName;
              }
          },
          computed: {
              fullName: function () {
                  console.log('fullName');
                  return this.firstName + ' ' + this.lastName;
              }
          }
        })
    </script>
    
    展开全文
  • 计算属性缓存 vs 方法 方法: <div id="app12"> <p>方法结果:{{revmessage()}}</p> </div> <script> var vm = new Vue({ el:'#app12', data:{ message:'hello'...
  • 很多人提起 Vue 中的 computed,第一反应就是计算属性缓存,那么它到底是怎么缓存的呢?缓存的到底是什么,什么时候缓存会失效,相信还是有很多人对此很模糊。 本文以 Vue 2.6.11 版本为基础,就深入原理,带你...
  • 1. 计算属性 2. 监视属性
  • vue计算属性和methods的区别

    千次阅读 2019-05-19 11:26:31
    computed(计算属性)和methods的区别 使用方式: <!-- 计算属性里方法的调用 --> <div id="app"> 总价: {{ prices }} <br/> test:{{ tests }} </div> <!-- methods里方法的调用 --&...
  • 四、Vue计算属性

    2021-01-03 20:34:32
    01-计算属性的基本使用 1.1 计算属性 1、在模板中可以直接通过插值语语法显示一些data中的数据 2、但是在某些情况下,我们可能需要对数据进行一些转化后在显示,或者需要将多个数据结合起来进行显示 比如我们有...
  • 手写一个vue双向数据绑定以及计算属性 双向数据绑定是以Object.defineProperty(obj,‘a’,1)属性为核心,整体看的时候比较懵。我在下面进行了颜色以及序号分组,如果原生js不是很好的话,要多看几遍,下面代码进行了...
  • Vue——计算属性

    2021-02-24 21:15:34
    计算属性原理 setter 和 getter 1. 计算属性——computed computed 与 methods 评级 在 computed 中,可以定义一些 属性,这些属性叫做计算属性计算属性的本质就是一个方法,只不过,在使用 这些计算属性的时候...
  • 简介 模板内的表达式非常便利,但是设计它们的初衷是用于...虽然可以通过函数、事件等解决上面问题,但vue提供了更便捷的计算属性computed。 <body> <div id="app"> <input type="text" v-mode
  • 使用计算属性的方法和使用状态是一样的 优点(特点): 逻辑计算, 防止模板过重, 有缓存(就是在同一个页面使用多次时, 只需计算一次) <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
  • Vue源码 深入响应式原理 (四)计算属性 VS 侦听属性Vue源码 深入响应式原理 (四)计算属性 VS 侦听属性computedwatchWatcher optionsdeep watcheruser watchercomputed watchersync watcher总结Vue源码学习目录 ...
  • 最近在学习Vue计算属性的源码,发现和普通的响应式变量内部的实现还有一些不同,特地写了这篇博客,记录下自己学习的成果 文中的源码截图只保留核心逻辑 完整源码地址 可能需要了解一些Vue响应式的原理 Vue 版本:...
  • vue计算属性

    2021-04-20 23:20:53
    计算属性原理
  • Vuevue计算属性

    2020-10-10 12:32:06
    计算属性和methods的对比(缓存) 1.计算属性基本使用 1.引入:模板内(插值数据)的表达式非常便利,设计它们的初衷是用于简单运算的。 但如果在模板中放入太多的逻辑会让模板过重且难以维护。 所以,对于任何复杂...
  • 在这一篇中,我们来一起康康 Vue 中非常强大的响应式功能:计算属性。我主要会从功能需求的角度来分析计算属性的实现和关键代码,希望能带给大家一些在别的文章里看不到的东西吧。以下内容请先看过 第一篇 再来比较...
  • vue计算属性: 1.什么是计算属性计算属性的目的是用于对数据进行简单运算的,若在模板中放过多的计算逻辑会导致模板难以维护。 计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时...
  • 计算属性缓存简单讲解   methods 里的方法也可以与计算属性起到同样的 作用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...
  • 浅谈Vue计算属性computed的实现原理

    千次阅读 2018-12-18 21:11:55
    虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用Vue比React开发效率...
  • 监测 vue中的数据变化,如果这个数据变化了,有一个回答会触发 { data: { msg: "", obj: { a: 10, b: 20 } }, watch: { // 监听基本数据类型 msg (newVal, oldVal) { // xxxx // 基本数据类型监听直接在...
  • 在模板中放入太多的逻辑会让模板过重且难以维护,所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理,同时computed有缓存功能,防止复杂计算逻辑多次调用引起的性能问题。 computed原理 computed的属性...
  • 文章目录前言实现原理分析initStateinitComputeddefineComputedWatcher对计算属性的处理总结 前言 看这篇文章之前最好先对Vue的MVVM实现原理有一定的认识,因为这是Vue的核心概念,其他的工具大部分都是在此之上...
  • 1、计算属性默认不执行 Object.defineProperty =>getter 只有在取值的时候才执行 多次取值如果依赖的值不变化就只执行一次,是缓存的原因 依赖的值变化了,需要重新执行 dirty 表示这个值是不是脏的,默认是...
  • 原因:计算属性会进行缓存,如果多次使用时,计算属性只会调用一次。 computed的setter和getter 每个计算属性都包含一个getter和一个setter 在上面的例子中,我们只是使用getter(上面是getter的缩写,下面是get的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,178
精华内容 2,871
关键字:

vue计算属性缓存原理

vue 订阅