Vue2 - computed 和 method 的原理区别

目录

1,简单对比

  1. computed 当做属性使用,method 当做方法使用。
  2. computed 可以提供 getter 和 setter 来赋值。
  3. computed 无法接收多个参数。
  4. computed 有缓存。

2,原理的不同

1,method 的处理

处理比较简单,只需要遍历 methods 配置的每个属性,将其对应的函数通过 bind 绑定到当前实例。之后复制其引用到组件实例即可(为了通过 this 可访问)。

js 复制代码
// 伪代码
function Vue(options) {
  // ...
  // 其他代码
  // ...
  Object.entries(options.methods).forEach(([methodName, fn]) => {
    this[methodName] = fn.bind(this);
  });
}

new Vue(vnode.componentOptions);

2,computed 的处理

在触发组件的生命周期函数 beforeCreate后,会做一系列的事情,其中包括对 computed 的处理:

  1. 遍历 computed 配置中的所有属性,对每个属性都创建一个 Watcher 对象,并传入一个函数。该函数本质上就是 computedgetter 。之后 getter 触发时就会收集依赖。

数据响应式中 Watcher 原理参考

简单来说,为了监听响应式数据的变化来触发更新,Vue 会将使用了响应式数据的函数 (模板对应 render 函数)通过 Watcher 记录下来(收集依赖)。之后响应式数据发生变化,就会通知对应的 Watcher 来执行对应的函数触发更新。

  1. Watcher 创建好之后,vue 会使用代理模式,将计算属性挂载到组件实例上(为了通过 this 访问)。

  2. 不同于渲染函数 renderWatcher,为计算属性创建的 Watcher 不会立即执行。因为要考虑该计算属性是否被使用(渲染函数或其他方法中),没使用就不会执行。所以在创建 Watcher 时配置了一个 lazy 属性,lazy === trueWatcher 不会立即执行。

实现缓存

  1. 受到 lazy 的影响,Watcher 内部还会配置2个属性:valuedirty

    • value ,保存 Watcher 运行时的结果,一开始(Watcher 还没有执行时)为 undefined
    • dirty ,标记当前 value 是否过期,一开始为 true
  2. 当读取计算属性时,会先检查 dirty

    • true 时则运行之前传入 Watcher 的函数(也就是计算属性的 getter),将计算依赖得到的值保存在 Watchervalue 中,同时设置 dirty = false
    • false,则直接返回 Watcher.value,也就是缓存的值。

触发更新

  1. 为了实现更新,在收集依赖时,被依赖的数据不仅会收集计算属性的 Watcher还会收集组件的 Watcher

  2. 当计算属性变化时,会先触发计算属性的 Watcher,但只会将 dirty = true ,其他不做处理。之后触发组件的 Watcher 重新渲染。render 函数(或模板)又读取 了计算属性,因为dirty === true,所以会重新运行 getter 计算。

  3. 设置计算属性时比较简单,直接运行 setter 即可。

3,触发更新时的问题

注意到上面触发更新 时,如果计算属性的依赖发生变化,但计算属性没有在模板(或render函数)中使用时(其他方法或watch 场景同理),虽然会触发计算属性的 Watcher,但不会触发同时收集到的 组件的 Watcher

举例:

html 复制代码
<template>
  <div>
    <h1 v-if="showName">{{ fullName }}</h1>
    <button @click="handleClick">隐藏 fullName</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '渣渣',
      lastName: '辉',
      showName: true
    }
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName
      },
      set(newValue) {
        ;[this.firstName, this.lastName] = newValue.split(' ')
      }
    }
  },
  methods: {
    handleClick() {
      this.firstName = '123' // 计算属性依赖发生变化
      this.showName = !this.showName
    }
  },
  updated() {
    console.log(this)
  }
}
</script>

showName === false 所以不渲染 h1,所以render 函数不会读取计算属性 fullName

所以只会执行:

计算属性的依赖:

firstName: [计算属性的 Watcher ,组件的 Watcher(对应render函数 )]

lastName: [计算属性的 Watcher ,组件的 Watcher(对应render函数)]

showName: [组件的 Watcher]


以上。

相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727576 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架