Vue中computed简析

最新推荐文章于 2024-05-18 20:32:59 发布

ainuo5213

最新推荐文章于 2024-05-18 20:32:59 发布

阅读量855

点赞数

分类专栏： es6 web前端框架学习 vue 文章标签： vue.js javascript 前端前端框架 es6

本文链接：https://blog.youkuaiyun.com/qq_40566547/article/details/122109515

版权

web前端框架学习同时被 3 个专栏收录

26 篇文章

订阅专栏

es6

19 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

博客基于vue2.x版本，主要对vue中计算属性computed，进行解析

前言：mthods和computed有什么区别？

总所周知，vue中计算属性是带有缓存的，而且很多人会将computed和method进行比较，诸如method没有缓存啊之类的。这里我通过自己的理解进行一个稍微全面的阐述。

浅显的回答

比较浅显的回答诸如下：

1. 在使用时，computed当做属性使用，而methods则当做方法调用

2. computed可以具有getter和setter，因此可以赋值，而methods不行

3. computed无法接收多个参数，而methods可以

4. computed具有缓存，而methods没有

上述回答都是比较浅层次的，当然也没有错，不过那只是表面现象，若要深究其理还需要阅读源码才能懂得起，这里我就不带入源码了（其实我也还没阅读源码）

所以这里稍微做一个比较深入但又不那么深入的理解。

深入的回答

vue对methods中的属性怎么处理的呢？

vue对methods就比较简单粗暴了，只需要遍历vue配置中的每一个属性，将其赋值到vue实例上，并使用bind进行函数中上下文对象的绑定

vue对computed中的属性怎么处理的呢？

vue对computed处理就比较复杂，这里引入几个核心属性：

Watcher：监听器，在响应式数据(data)的setter和getter中均有涉及，在setter中用于执行watcher，做到视图依赖该数据的视图更新；在getter中用于产生watcher，记录当前视图和数据的依赖关系

dirty：用来确认当前计算属性是否是脏数据（即已过期），当计算属性所依赖的数据发生改变时（运行setter），对于计算属性的watcher仅做一件事，即将当前计算属性的dirty改为true，标记为已过期

lazy：当前watcher是否立即执行，在当前实例组件中watcher的该属性是true，在计算属性的watcher中该属性是false

value：当前计算属性的值

我们可以先来看一个输出，代码如下：

<template>
  <div>
      <span v-if="showName">{{fullName}}</span>
      <button @click="showName=false, count += 1">click</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            firstName: "zhang",
            lastName: "san",
            showName: true,
            count: 0
        }
    },
    computed: {
        fullName() {
            console.log("computed function invoked");
            return this.firstName + this.lastName;
        }
    },
    mounted() {
        console.log(this);
    }
}
</script>

输出如下：

下面截图能够很清楚的看到当使用计算属性时，组件实例中属性_watchers有两个warcher对象，一个是计算属性的，一个是组件实例的，前者lazy属性为true，后者为false，前者dirty为false，因为这个时候计算属性所依赖的数据还未发生改变。