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