vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别

思考：请说下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="https://cdn.staticfile.org/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 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/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.jscn.vuejs.org

Vue.js 计算属性 | 菜鸟教程www.runoob.com

Vue系列之computed使用详解(附demo,不定期更新)juejin.imvue computed正确使用方式blog.csdn.net

面试题： Vue中的 computed 和 watch的区别juejin.im第 146 题：Vue 中的 computed 和 watch 的区别在哪里 · Issue #304 · Advanced-Frontend/Daily-Interview-Questiongithub.com

人类身份验证 - SegmentFaultsegmentfault.com白日梦：Vue 里的 computed 和 watch 的区别zhuanlan.zhihu.com

Littlearmour：Vue中的 computed 和 watch的区别zhuanlan.zhihu.com

Vue中computed和watch的区别www.jianshu.com

https://www.jianshu.com/p/11caebb66fb8www.jianshu.comVue中methods computed 和 watch 的区别m.yisu.comVue中computed 和 watch 的区别和运用的场景？blog.csdn.net

Vue.js 监听属性 | 菜鸟教程www.runoob.comVue中watch的简单应用 - 靳哲 - 博客园www.cnblogs.com