vue计算属性，方法和侦听器效果比较

最新推荐文章于 2023-02-07 06:28:25 发布

原创最新推荐文章于 2023-02-07 06:28:25 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

25 篇文章

订阅专栏

本文通过实例对比了Vue中计算属性、方法和侦听器的使用方式及性能特点。计算属性利用内置缓存提高效率，方法在每次调用时都会执行，而侦听器则在特定数据变化时触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们通过一个简单的例子来了解下三者的区别：
加入我们在vue中定义了一个人的姓和名，如果我们想把姓和名组合输出怎么办呢？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		</div>
	</body>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#app",
			data:{
				firstName:"Dell",
				laseName: "Lee",
				age:28
			}
	</script>
</html>

1、vue给我们提供了一个特别好的解决方案叫：计算属性
计算属性是vue实例中的一个配置选项：computed
通常里面都是一个个计算相关的函数，返回最后计算出来的值。
即我们可以把这些计算的过程写到一个计算属性中去，然后让它动态的计算。
我们来看看，

            computed:
            {
            	fullName:function()
            	{
            		console.log("计算了一次")
            		return this.firstName+" "+this.laseName
            	}
            }

然后在div中加入如下代码：

{{fullName}}
{{age}}

计算属性,存在内置缓存，当依赖的变量没有发生改变时，就不会进行计算，而是显示上一次的值。
我们通过在控制台输出来看看在这里插入图片描述
当改变age时并没有在重新计算

2、方法

            methods:
            {
            	fullName:function()
            	{
            		console.log("计算一次")
            		return this.firstName+" "+this.laseName
            	}
            }

然后再div中加入代码

{{fullName()}}
{{age}}

但是在方法中当改变没有依赖的变量时，也会调用一次函数
在这里插入图片描述
3、最后就是添加侦听器
先在data中添加fullName:“Dell Lee”,因为我们要对firstName和laseName进行监听

watch:
     {
         firstName:function()
                {
            		console.log("计算一次")
            		this.fullName=this.firstName+" "+this.laseName
            	},
            	laseName:function()
            	{
            		console.log("计算一次")
            		this.fullName=this.firstName+" "+this.laseName
            	}
            }