一个小白的vue之路（五）——vue的computed属性、watch属性、methods

最新推荐文章于 2025-07-06 22:47:46 发布

复杂动物

最新推荐文章于 2025-07-06 22:47:46 发布

阅读量380

点赞数 1

CC 4.0 BY-SA版权

分类专栏：我的Vue之路文章标签： vue的computed属性 vue的watch属性 computed watch methods

本文链接：https://blog.youkuaiyun.com/qq_39176409/article/details/85045668

我的Vue之路专栏收录该内容

4 篇文章

订阅专栏

本文详细解析Vue中computed和watch的使用场景及区别。computed适用于复杂运算，基于依赖缓存，仅在依赖变化时重新计算；watch则用于监控Vue实例变化，执行异步或高成本操作。通过实例对比，阐述了它们的执行机制与性能差异。

前言：在我们学习过程中肯定会遇到使用vue的computed属性的地方，但还有一个watch属性与之非常相似，又是有感觉把方法放入methods同样能解决问题，到底该如何使用，它们之间又有何区别，下面我们将详细的讲一下。
一、概念
我们要理解作者的设计用意，即它们的设计用意，即它们是用来做什么的。
computed：计算属性，一切复杂的运算都应该使用computed属性
watch：：侦听器，watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象。
methods:一个容器，方法再此声明，为了方便管理。
二、computed vs methods
我们来看一段官网上的代码：

<div id="example">
  {{ message.split(' ').reverse().join(' ') }}
</div>

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。我们稍加改进，并以这个为例比较。

<div id="example">
	{{newMessage}}
	{{newMessage}}
	{{newMessage()}}
	{{newMessage()}}
</div>
<script>
	var example=new({
		el : "#example",
		data : { message : "123 456" },
		computed : {
			newMessage : function(){
				console.log("computed");
				return this.message.split(' ').reverse().join(' ');
			}
		},
		methods:{
			newMessage : function(){
				console.log("method");
				return this.message.split(' ').reverse().join(' ');
			}
		}
	})
</script>

结果：

控制台输出的结果 ：
computed
method
method

这里computed里的newMessage和methods里的newMessage都被调用了两次，但computed里的newMessage只执行了一次。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。我们可以看出computed只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 newMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。多次执行开销巨大，当然官网中也说了你若不希望有缓存，你可以使用方法来代替。
三、computed vs watch
最简单直接的了解它们的不同我们来看一个例子：

<div id="demo">
			
		</div>
		<script>
			var vm = new Vue({
				el: '#demo',
				data: {
					firstName: 'Foo',
					lastName: 'Bar',
					fullName: 'Foo Bar'
				},
				watch: {
					function(){
						console.log("watch")
					}
				},
				computed:{
					function(){
						console.log("computed")
					}
				}
			})

结果：只打印了“computed”。
因为computed的初始化都是在beforeCreated和created之间完成的，computed是一个计算属性它的第一次执行是不需要条件。
computed用来监控自己定义的变量，该变量不在data里面声明，但依赖于data里面的属性，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
好，就简单说这么多。要想加深理解，可以参考一下几篇文章：
阳光小点的博文《vue中watch的详细用法》
半年的半年的文章《深入理解 Vue Computed 计算属性》
郑凯的文章《Vue中的computed是在生命周期的哪个阶段执行的？》