主要给大家介绍了关于vue中计算属性（computed）、methods和watched之间区别的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
在Vue.js框架中，开发人员经常需要处理数据的计算、响应和监听，此时就涉及到`computed`、`methods`和`watch`这三个概念。本文将详细介绍它们之间的区别，并通过示例来帮助理解。
计算属性（`computed`）是Vue中一种特殊的属性，它允许我们定义基于其他数据（`data`）属性的复杂表达式，并且这些表达式会自动跟踪依赖关系。当依赖的数据发生变化时，Vue会自动重新计算`computed`属性的值。例如：
```html
<p>原始数据：{{msg}}</p>
<p>改变后的数据：{{changemsg}}</p>
<script>
var vm = new Vue({
el: "#example",
data: {
msg: "hello",
},
computed: {
changemsg: function() {
return this.msg.split("").reverse().join("");
},
},
});
</script>
```
在这个例子中，`changemsg`是`computed`属性，它依赖于`msg`。当`msg`的值改变时，`changemsg`的值也会相应更新，而无需手动调用。
相比之下，`methods`是一个对象，包含了可以被调用的函数。它们与`computed`的主要区别在于，`methods`中的函数每次调用都会执行，而`computed`只在依赖改变时执行。这意味着如果你在模板中多次使用一个`computed`属性，它不会每次都重新计算，而是返回缓存的结果，从而提高了性能。
```javascript
methods: {
reverseMsg: function() {
return this.msg.split("").reverse().join("");
},
}
```
如果你在模板中调用`reverseMsg`方法，每次渲染或事件触发时，这个方法都会被执行。
接下来，我们来看`watch`。`watch`是用来监听数据变化并执行特定操作的机制。它可以更直观地表达出你想要监听哪个数据，并在该数据变化时执行什么操作。例如：
```javascript
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar',
},
watch: {
firstName: function(val) {
this.fullName = val + ' ' + this.lastName;
},
lastName: function(val) {
this.fullName = this.firstName + ' ' + val;
},
},
});
```
在这个例子中，`watch`对象监听`firstName`和`lastName`的变化，当它们改变时，`fullName`会被相应地更新。
总结一下，`computed`适用于那些基于其他数据属性需要自动计算的属性，且通常不需要额外的操作；`methods`是用于执行可复用的逻辑，它们每次调用都会执行；而`watch`则更像一个观察者，用来监听数据的变化并做出反应，它适合在数据变化时需要执行复杂逻辑的情况。选择使用哪种取决于你的具体需求和场景。了解它们的区别，可以帮助你更好地组织Vue应用的代码，提高效率和可维护性。
