我对computed的理解-以及computed的传参

computed 传参

<template>
  <div>
    <p>computed传参的写法：{{ who1Params('--我是传参的内容') }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      firstName: '张先生',
    }
  },
  computed: {
    who1Params() {
      return function (Ba) {
        console.log('输出的内容是:', Ba) //输出的内容是:
        return this.firstName + Ba
      }
    },
  }
}
</script>

我对computed源码的理解

初始化 computed的时候会调用 initComputed 函数。
然后注册一个 watcher 实例，实例化一个 Dep 消息订阅器，用作后续收集依赖。
调用计算属性时会触发Object.defineProperty的get(访问器)函数。

调用 depend 方法向自身的消息订阅器 dep的subs 中添加watcher。

当某个属性发生变化，触发 set 函数。
然后调用自身的消息订阅器 dep 的 notify 方法。
遍历当前 dep 中保存着所有订阅者(wathcer) 的 subs 数组。
并逐个调用 watcher 的  update 方法，完成响应更新。

我们观察 Watcher 和 Dep 的关系

watcher 中实例化了 dep 并向 dep.subs 中添加了订阅者.
dep 通过 notify 遍历了 dep.subs 通知每个 watcher 更新

Vue 响应系统其核心有三点：observe、watcher、dep

observe：遍历 data 中的属性，使用 Object.defineProperty 的 get/set 方法对其进行数据劫持；
dep：每个属性拥有自己的消息订阅器 dep，用于存放所有订阅了该属性的观察者对象；
watcher：观察者（对象），通过 dep 实现对响应属性的监听，监听到结果后，主动触发自己的回调进行响应。

computed 和 watch 的差异：

从使用场景上说，computed 适用一个数据被多个数据影响，
而 watch 适用一个数据影响多个数据；

computed 的注意点

computed计算属性是基于它们的响应式依赖进行缓存的。
只在相关响应式依赖发生改变时它们才会重新求值。
注意:如果某个依赖 (比如非响应式属性) 在该实例范畴之外，
则计算属性是不会被更新的。