剑指Offer
TypeScript
TypeScript

computed

Vue2 中 computed 源码解读

methods

vue 对 methods 的处理比较简单，只需要遍历 methods 配置中的每个属性，将其对应的函数使用 bind 绑定当前组件实例后复制其引用到组件实例中即可

computed

当组件实例触发生命周期函数beforeCreate后，它会做一系列事情，其中就包括对 computed 的处理

它会遍历 computed 配置中的所有属性，为每一个属性创建一个 Watcher 对象，并传入一个函数，该函数的本质其实就是 computed 配置中的 getter，这样一来，getter 运行过程中就会收集依赖

但是和渲染函数不同，为计算属性创建的 Watcher 不会立即执行，因为要考虑到该计算属性是否会被渲染函数使用，如果没有使用，就不会得到执行。因此，在创建 Watcher 的时候，它使用了 lazy 配置，lazy 配置可以让 Watcher 不会立即执行。

收到lazy的影响，Watcher 内部会保存两个关键属性来实现缓存，一个是value，一个是dirty

value属性用于保存 Watcher 运行的结果，受lazy的影响，该值在最开始是undefined

dirty属性用于指示当前的value是否已经过时了，即是否为脏值，受lazy的影响，该值在最开始是true

Watcher创建好后，vue 会使用代理模式，将计算属性挂载到组件实例中

当读取计算属性时，vue 检查其对应的 Watcher 是否是脏值，如果是，则运行函数，计算依赖，并得到对应的值，保存在 Watcher 的 value 中，然后设置 dirty 为 false，然后返回。

如果 dirty 为 false，则直接返回 watcher 的 value，即为缓存的原理 巧妙的是，在依赖收集时，被依赖的数据不仅会收集到计算属性的 Watcher，还会收集到组件的 Watcher

当计算属性的依赖变化时，会先触发计算属性的 Watcher执行，此时，它只需设置**dirty**为 true 即可，不做任何处理。

由于依赖同时会收集到组件的 Watcher，因此组件会重新渲染，而重新渲染时又读取到了计算属性，由于计算属性目前已为 dirty，因此会重新运行 getter 进行运算

而对于计算属性的 setter，则极其简单，当设置计算属性时，直接运行 setter 即可

Vue3 中 computed 源码解读

TODO

常见问题

面试官：computed 和 methods 有什么区别?

我：

  1. 在使用时，computed 当做属性使用，而 methods 则当做方法调用
  2. computed 可以具有 getter 和 setter，因此可以赋值，而 methods 不行
  3. computed 无法接收多个参数，而 methods 可以
  4. computed 具有缓存，而 methods 没有

面试官：回去等通知吧！

更深入的回答：↑

watch 与 computed 的区别是什么？

  1. 都是观察数据变化的（相同）
  2. 计算属性将会混入到 vue 的实例中，所以需要监听自定义变量；watch 监听 data 、props 里面数据的变化；
  3. computed 有缓存，它依赖的值变了才会重新计算，watch 没有；
  4. watch 支持异步，computed 不支持；
  5. watch 是一对多（监听某一个值变化，执行对应操作）；computed 是多对一（监听属性依赖于其他属性）
  6. watch 监听函数接收两个参数，第一个是最新值，第二个是输入之前的值；
  7. computed 属性是函数时，都有 get 和 set 方法，默认走 get 方法，get 必须有返回值（return）

watch 的 参数：deep：深度监听；immediate ：组件加载立即触发回调函数执行

对于 Computed：

  • 它支持缓存，只有依赖的数据发生了变化，才会重新计算
  • 不支持异步，当 Computed 中有异步操作时，无法监听数据的变化
  • computed 的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于 data 声明过，或者父组件传递过来的 props 中的数据进行计算的。
  • 如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一般会使用 computed
  • 如果 computed 属性的属性值是函数，那么默认使用 get 方法，函数的返回值就是属性的属性值；在 computed 中，属性有一个 get 方法和一个 set 方法，当数据发生变化时，会调用 set 方法。

对于 Watch：

  • 它不支持缓存，数据变化时，它就会触发相应的操作
  • 支持异步监听
  • 监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值
  • 当一个属性发生变化时，就需要执行相应的操作
  • 监听数据必须是 data 中声明的或者父组件传递过来的 props 中的数据，当发生变化时，会触发其他操作，函数有两个的参数：
    • immediate：组件加载立即触发回调函数
    • deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep 无法监听到数组和对象内部的变化。

当想要执行异步或者昂贵的操作以响应不断的变化时，就需要使用 watch。 总结：

  • computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。
  • watch 侦听器 : 更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

运用场景：

  • 当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。
  • 当需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许执行异步操作 ( 访问一个 API )，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

在 Vue 中要获取当前时间你会放到 computed 还是 methods 里？

放在 computed 里面。因为 computed 只有在它的相关依赖发生改变时才会重新求值。相比而言，方法只要发生重新渲染，methods 调用总会执行所有函数。

目录