❶ Vue中computed计算属性的使用和三个特点
computed是Vue实例中的一个属性逗核对象。
在computed中，可以定义一些属性，这些属性，叫做计算属性。计算属性的本质就是一个方法，只不过，我们在使用这些计算属性的时候，是把它们的名称，直接当做属性来使用，并不会把计算属性当做山桥掘方法来使用。
三个注意事项：
一、计算属性在引用的时候，一定不要加()去调用，直接把它当作普通的属性去使用消余就好了；
二、只要计算属性这个function内部所用到的data中的数据发生了变化，就会立即重新计算这个计算属性的值；
三、计算属性的求值结果，会被缓存起来，方便下次继续使用；如果计算属性方法中，所依赖的任何数据，都没有发生过变化，则不会重新对计算属性求值。
❷ vue中computer和watch的区别
computed用于处理复杂的逻辑运算，主要和methods储存方法来进行区分；methods储存方法，computed储存需帆中侍要处理的数据值；methods每次都会调用，computed有缓存机制，只有改变时才执行，性能更佳。
watch顾名思义，用于监听数据变化，其中可以监听的数据来源有三部分：props、data、computed内的数据；watch提供两个参数（newValue，oldValue），第一个参数是新值，第二个参数保存旧值；
1.支持缓存，只有依赖数据发生改变，才会重新进行计算
2.不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的
4.如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
1.不支持缓存，数据变，直接会培携触发相应的操作；
2.watch支持异步；
3.监听的函数接收两个参数，第一个参数是最新的值；第二态吵个参数是输入之前的值；
4.当一个属性发生变化时，需要执行对应的操作；一对多；
❸ Vue computed和watch
computed是一个计算属性,类似于过滤器,对绑定到view的数据进行处理，根据计算所依赖的属性动态返回新的计算结果。
computed和data的定义不可重名，否则是会报错的。
computed是基于它们的响应式依赖进行缓存的 ，只在相关响应式依赖发生改变时它们才会重新求值，如果依赖没有改变，多次访问 fullName 这个计算属性，都会立刻返回之前的结果，不必再重新计算。
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter。
watch选轮肢拆项是一个对象，键是data里面的数据，值是对应的回调函数，回调函数有两个参数分别为修改后的值newValue和修改前的值oldValue。Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性。
watch在实例加载时是默认不监听的，使用 immediate:true ，可以在首次加载时也做监听。
watch只监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变。也就是说，watch想要监听引用类型数据的变化，需要进行深度监听，使用 deep:true 可进行深度监听。
computed与watch的应用场景：computed一般饥御应用在多个数据影响一个数据的操作，如购物车。watch一般使用在一个数据来影响多个数据的操作，如搜索框
1.computed函数必腊枣须用return返回计算的值，watch没有return的必须要求
2.computed有缓存，如果依赖的值没有改变，调用computed函数时则不会执行函数重新计算，直接返回缓存的值。watch没有缓存，每次监听的值发生改变都会执行。
❹ Vue computed 和 watcher
计算属性的初始化是发生在 Vue 实例初始化阶段的 initState 函数中 initComputed(vm, opts.computed);
1. 创建 vm._computedWatchers 为⼀个空对象
2. 遍历 computed，拿到计算属 性的每⼀个 userDef ， 获取这个 userDef 对应的 getter 函数；
3. 为每⼀个 getter 创建⼀个 watcher ，这个 watcher 和渲染 watcher 不同，它是⼀个 computed watcher；
4. 最后对判断如果 key 不是 vm 的属性，则调用 defineComputed(vm, key, userDef) ，否则判断计算属性对于的 key 是否 已经被 data 或者 prop 所占用，如果是的话则在开发环境报相应的卜蠢警告。
其中 const computedWatcherOptions = { lazy: true }
const sharedPropertyDefinition = {
enumerable: true,
逗弊大 configurable: true,
get: noop,
set: noop
}
defineComputed 就是利用 Object.defineProperty 给计算属性对应的 key 值添加 getter 和 setter 。
createComputedGetterr 返回⼀个函数 computedGetter ，它就是计算属性对应的 getter。
缓存 ： 在new Watcher时传入的第四个参数 computedWatcherOptions 的 lazy = true，对应就是watcher的构造函数中的 dirty 为true。在 computedGetter 中，如果 dirty 为 false（即依赖的值没有发生变化），就不会重新求值，相当于 computed 被缓存了 。
计算属性的 watcher 和 普通 watcher 的不同
在计算属性的 watcher 中， 传入的参数 computedWatcherOptions = { lazy: true }， 所以它的 value = undefined，也不会调用 this.get() 方法
1. 当我们在 首次渲染山竖 render 的时候，访问到我们的计算属性的时候，就会触发 计算属性的 getter，就是 createComputedGetterr，然后会拿到 计算属性的 watcher = this._computedWatchers && this._computedWatchers[key];
如果 dirty 为 true ，就是要重新计算 watcher 的值，如果为false，那么就不用，就是使用缓存。
if (watcher.dirty) {
watcher.evaluate();
}
2. evaluate 就会调用 get 方法，紧接着调用 this.getter.call(vm, vm)， 也就是我们的 computed 的表达式，比如
name(){ return this.count + 1 };
3. 紧接着就会获取 this.count 的 值，也就是调用 count 的 getter 方法，并把 computed watcher 添加到 subs 中， 最后 return value 拿到计算属性的值， 然后 popTatget， 退出当前的 computed watcher。
4. if (Dep.target) { watcher.depend() }
evaluate 执行完毕，如果Dep.target 为 true， 那么 此时的 Dep.target 为 渲染 Watcher，执行 depend。
5 . 现在 count 收集了computed watcher 和 渲染 watcher， 当我们的依赖的数据 count 发生变化的时候，会触发 setter，就会 notify() 所有的 watcher，也包括我们的 computed watcher ，执行 update()。
当依赖的值发生变化 update 时候，将 dirty = true ，那么就会 watcher.evaluate() 重新计算。
watcher
initWatch 对 watch 对象做遍历，拿到每⼀个 handler ，Vue 是支持 watch 的同⼀个 key 对应多个 handler ，所以如果 handler 是⼀个数组，则遍历这个数组，调用 createWatcher ⽅ 法，否则直接调用 createWatcher。
createWatcher 拿到它最终的回调函数，最后调用 vm.$watch(keyOrFn, handler, options) 函数
执行 var watcher = new Watcher(vm, expOrFn, cb, options)， 实例化了⼀个 watcher，这是⼀个 user watcher ，因为 options.user = true。
通过实例化 watcher 的方式，⼀旦我们 watch 的数据发送变化，它最终会执行 watcher 的 run 方法，执行回调函数 cb ，并且如果我们设置了 immediate 为 true，则直接会执行回调函数 cb 。最后返回了⼀个 unwatchFn 方法，它会调用 teardown 方法去移除这个 watcher 。
❺ Vue中computed和watch的区别
这是一个计算属性，用于创建一个新的变量，其值是自定义的通过某些计算逻辑得到的结果，并在模板中引用，不需要加括号
示例：
如上示例中，模板中的{{ reversedMessage }}是计算属性computed中定义的reversedMessage方法的返回值
计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值
这是一个监听器，用于腔基监听指定data的变化，执行自定义的操作
示例：
watch还有两个比较常用的参数：
（1）immediate：表示是否要在第卖弊一次渲染的时候执行这个函数
（2）deep：用于判断data中的对象元素的某个key的值是否发生变化，因为当元素中某个key的值变化时，Vue可能会认为这个对象没有变化，因为Vue判断对象是否发生变化的依据是对象的内存地址
1. computed 支持缓存，只有依赖数据发生改变，才会重新进行计算；watch 不支持缓存，数据变，直接会触发相应的操作
2. computed 不支持异步，当computed内有异步操作时无效，无法监听数据的变化；watch 支持异步
1. 如果一个数据依赖于其他数据的简易计算处理的，那么应该使用computed
2. 如果需要在某个数据变化时做伍配谨一些事情，使用watch来观察这个数据变化
❻ Vue原理小知识-Computed原理
computed会为每一个属性都创建各自的computed watcher，同时还有dep（这个dep用来收集页面渲染的render wacher和 别的计算属性的computed watcher，因为计算属性可以相互依赖），还有一个名叫dirty的flag（用于优化缓存，下面会讲拆答返）。并把watcher加入到Dep.target中，然后执行他的回调函数。
执行函数过程中触摸（touch）到他的依赖举派，也就是data中的属性，此时就会触发data属性的getter方法，把computed watcher加入到data属性的dep的subs数组中，这样就完成了data的旅饥依赖收集。
同时还会有计算属性相互依赖的情况，别的计算属性在触摸的过程中还会触摸到当前的计算属性，这样就会把别的计算属性的computed watcher加入到当前计算属性的dep的subs数组中，完成computed的依赖收集
渲染时，computed属性会跟data属性做一样的render watcher收集，如果computed在页面中有渲染，这样这个computed的dep就相当于持有了刷新页面的能力，否则就没有。
否则就分下面两种情况：
❼ 25、watch 和computed区别 以及computed的缓存
一、侦听属性watch：
1、不支持缓存，当数据变化时，会直接触发对应的操作。
2、watch支持异步
3、监听函数接收两个参数，第一个新值，第二个旧值。
4、当一个属性发生变化时，需要执行对应的操作，一对多；
5、监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发对应的操作.
函数有两个参数: immediate：组件加载立即触发回调函数执行；
deep：深度监听，为了发现对象内部值的变化，复杂类型的数据使用，例如数组老陵中的对象内容的改变，注意监听数组的变化不需要这么做。
注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异，只有以响应式的方式触发才会被监听到。
6、当需要在数据变化时执行异步或者开销较大的操作时，使用watch是最佳的。
二、计算属性computed:
1、支持缓存，只有依赖数据发生变化时，才会重新进行计算
2、不支持异步，当computed内有异步操作时无效，无法监听数据变化
3、computed属性值默认会走缓存，计算属性是基于他们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。
4、如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一对一或者多对一游陵，一般侍磨戚用computed。