思考：请说下Vue中computed 和 watch 的区别( 面试题 )
构造选项
computed / watch / methods
computed
● computed起初构想
在Vue的 template模板内（{{ }}）是可以写一些简单的js表达式的很便利，如上直接计算
{{this.firstName + ' ' + this.lastName}}
因为在模版中放入太多声明式的逻辑会让模板本身过重，尤其当在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响，而 computed 的设计初衷也正是用于解决此类问题。
●computed属性的实现原理
Vue实例初始化时，给data的每个属性(data)都添加getter和setter方法计算属性computed初始化时，提供的函数将作为对应属性(computed)的getter方法
其中
computed: function(){return this.data+'change'}
当首次获取计算属性的值是，dep开始收集依赖，即收集到data和computed的依赖关系在data变化时，此时会调用data的getter方法，通过dep收集的依赖，可以判定出data与computed对应数据的依赖关系此时可以做到，在data发生变化时，computed属性数据也发生变化
● computed
computed 就是计算属性的意思
含义：模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
<div id="example">{{ message.split('').reverse().join('') }}</div>
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。
● 实例：计算属性的getter函数
当其依赖的属性的值发生变化的时，这个计算属性的值也会自动更新。多用于"data，computed"的属性。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例</title><script src="/vue/2.2.2/vue.min.js"></script></head><body><div id="app"><p>原始字符串: {{ message }}</p><p>计算后反转字符串: {{ reversedMessage }}</p></div><script>var vm = new Vue({el: '#app', //element：元素data: {message: 'Runoob!'},computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}}})</script></body></html>——————————————————————————————————————————————————运行结果：原始字符串: Runoob!计算后反转字符串: !boonuR
同步实时更新：getter属性
实例中声明了一个计算属性 reversedMessage,提供的函数将用作属性 vm.reversedMessage 的 getter，vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
computed 计算出一个值：其值在调用不需要加括号，当属性一样使用,它会根据你所依赖的数据动态显示新的计算结果。计算结果根据依赖会自动缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算 ( 依赖不变computed不会重新计算 )
● 实例：计算属性的setter函数
当赋值给计算属性的时候，将调用setter函数。多用于在模板组件中需要修改计算属性自身的值的时候。
// 显示-姓名/邮件/电话,但是会重复// DRY Don't rapeat yourself, 用 computed 来计算 displayNametemplate: `<div>{{user.nickname || user.email || user.phone}}</div>`——————————————————————————————————————————————————template: `<div>{{displayName}}<div><button @click="set">set</button></div></div>`, computed: { //通过 computed 更改 displayName 中的值(set-nickName)displayName: { //方法（当属性使用），computed会默认读取返回值get() {const user = this.user;return user.nickname || user.email || user.phone;},set(value) { // 这里由于该计算属性被赋值，将被调用this.user.nickname = value;}}},methods: {set() { // 赋值，调用setter函数this.displayName = "圆圆";},},
应用场景
适用于重新计算比较费时不用重复数据计算的环境。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。如果一个数据依赖于其他数据，那么把这个数据设计为computed
watch
watch就是监听的意思（侦听属性）
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用watch，然而，通常更好的做法是使用计算属性而不是命令式的watch回调。
当需要在数据变化时执行异步或开销较大的操作时，watch方式是最有用的。其允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
这样来看，watch完全可以替代computed？什么情况下，只能使用computed呢？
回顾computed最大特点就是缓存，所以上述问题可以转换为：哪些情况下，我们需要依赖缓存？
示例：父组件给子组件传值，值的类型为引用类型
watch在监听时有两种选项：
immediate表示第一次渲染时是否执行函数deep监听对象时是否查看里面属性的变化；如果其属性变化就会去执行一个函数
methods
我们也可以使用 methods 来替代 computed，效果上两个都是一样的。
但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程()</title><script src="/vue/2.2.2/vue.min.js"></script></head><body><div id="app"><p>原始字符串: {{ message }}</p><p>计算后反转字符串: {{ reversedMessage }}</p><p>使用方法后反转字符串: {{ reversedMessage2() }}</p></div><script>var vm = new Vue({el: '#app',data: {message: 'Runoob!'},// 计算属性computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}},// 方法methods: {reversedMessage2: function () {return this.message.split('').reverse().join('')}}})</script></body></html>——————————————————————————————————————————————————运行结果：原始字符串: Runoob!计算后反转字符串: !boonuR使用方法后反转字符串: !boonuR
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。而方法却会执行。
注意：
这也同样意味着下面的计算属性将不再更新，因为Date.now()不是响应式依赖：
computed: {now: function () {return Date.now()}}
应用场景：
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于A。如果没有缓存，我们将不可避免的多次执行A的 getter！如果你不希望有缓存，请用方法来替代。
相同之处：
computed和methods将被混入到 Vue 实例中。vm.reversedMessage/vm.reversedMessage()即可获取相关计算属性/方法。
结论：可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性
computed属性与methods的区别
在模板文件中，computed属性只需要写{{reverseMessage}}，而methods需要写成{{reverseMessage()}}，最明显的区别就是methods是方法，需要执行；computed属性只有在依赖的data放生变化时，才会重新执行，否则会使用缓存中的值，而methods是每次进入页面都要执行的，有些需要每次进入页面都执行的方法，需要使用methods，而computed属性比较节约。computed属性与watch的区别
当需要数据在异步变化或者开销较大时，执行更新，使用watch会更好一些；而computed不能进行异步操作；computed可以用缓存中拿数据，而watch是每次都要运行函数计算，不管变量的值是否发生变化，而computed在值没有发生变化时，可以直接读取上次的值计算属性和侦听器 — Vue.jsVue.js 计算属性 | 菜鸟教程Vue系列之computed使用详解(附demo,不定期更新)juejin.imvue computed正确使用方式面试题： Vue中的 computed 和 watch的区别juejin.im第 146 题：Vue 中的 computed 和 watch 的区别在哪里 · Issue #304 · Advanced-Frontend/Daily-Interview-Question人类身份验证 - SegmentFault白日梦：Vue 里的 computed 和 watch 的区别Littlearmour：Vue中的 computed 和 watch的区别Vue中computed和watch的区别/p/11caebb66fb8Vue中methods computed 和 watch 的区别Vue中computed 和 watch 的区别和运用的场景？Vue.js 监听属性 | 菜鸟教程Vue中watch的简单应用 - 靳哲 - 博客园如果觉得《vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别》对你有帮助，请点赞、收藏，并留下你的观点哦！
