vue.js中computed和methods的区别以及使用场景

最新推荐文章于 2024-07-06 11:51:48 发布

mischen520

最新推荐文章于 2024-07-06 11:51:48 发布

阅读量756

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/miachen520/article/details/115588432

版权

vue.js 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

先来看一下methods调用的使用场景：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<title>vue.js 学习</title>
		<link rel="stylesheet" href="style.css">
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
	    <!--app是根容器 -->
        <div id="app">
		    <h1> computed 计算属性 </h1>
			<button v-on:click="a++">Add to A</button>
			<button v-on:click="b++">Add to B</button>
			<p>A - {{a}}</p>
			<p>B - {{b}}</p>
			<p>Age + A = {{addToA()}}</p>
			<p>Age + B = {{addToB()}}</p>
		</div>
		<script src="app.js"></script>
    </body>
</html>

//实例化vue对象
new Vue({
	el:"#app",
	data:{
	   a:0,
	   b:0,
	   age:20   
	},
	methods:{
		addToA: function(){
			console.log("Add to A");
			return this.a + this.age;
		},
		addToB: function(){
			console.log("Add to B");
			return this.b + this.age;
		}
	}
	/*computed:{
		addToA: function(){
			console.log("Add to A");
			return this.a + this.age;
		},
		addToB: function(){
			console.log("Add to B");
			return this.b + this.age;
		}
	}*/
	
});

/*
*
**
*/

页面效果如图所示：

从上面的页面效果可以看到，当js中methods里面有2个方法的时候，点击Add to A的时候会触发methods里面的两个方法事件，这样就无异于去加载了methods的所有方法

那么怎么来改变这种场景呢，我们需要使用computed属性来解决这个事情，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<title>vue.js 学习</title>
		<link rel="stylesheet" href="style.css">
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
	    <!--app是根容器 -->
        <div id="app">
		    <h1> computed 计算属性 </h1>
			<button v-on:click="a++">Add to A</button>
			<button v-on:click="b++">Add to B</button>
			<p>A - {{a}}</p>
			<p>B - {{b}}</p>
			<p>Age + A = {{addToA}}</p>
			<p>Age + B = {{addToB}}</p>
		</div>
		<script src="app.js"></script>
    </body>
</html>

//实例化vue对象
new Vue({
	el:"#app",
	data:{
	   a:0,
	   b:0,
	   age:20   
	},
	methods:{
		/*addToA: function(){
			console.log("Add to A");
			return this.a + this.age;
		},
		addToB: function(){
			console.log("Add to B");
			return this.b + this.age;
		}*/
	},
	computed:{
		addToA: function(){
			console.log("Add to A");
			return this.a + this.age;
		},
		addToB: function(){
			console.log("Add to B");
			return this.b + this.age;
		}
	}
	
});

/*
*
**
*/

然后我们去重新加载一下页面，打开F12，页面效果如下：

我们发现当页面首次进入的时候，页面会自动加载computed的属性值，然后当我们点击第一个按钮Add to A的时候，页面加载如下：

此时页面就只去加载了跟它相关的一个计算属性的方法。

从上面的分析中，我们可以得出如下结论：

1.computed是在HTML DOM加载后马上执行的，如赋值；
而methods则必须要有一定的触发条件才能执行，如点击事件；
所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

2.methods: 存放的方法是一些内部方法、事件的回调、命令是调用的方法。
watch: 用于监听数据的实时的变化。在数据变化的回调中执行异步操作或者开销很大的时候使用。
computed: 也是实时监听数据变化，做出相应的变化，跟watch不同的是他可以被看成一个data里面的属性值来使用。所以当我们需要监听一个值并且需要生成一个新的属性时就可以使用computed。

然后，我们再来详细的说说computed和methods的区别：

调用方式不同。computed直接以对象属性方式调用，不需要加括号，而methods必须要函数执行才可以得到结果。
绑定方式不同。methods与compute纯get方式都是单向绑定，不可以更改输入框中的值。compute的get与set方式是真正的双向绑定。
是否存在缓存。methods没有缓存，调用相同的值计算还是会重新计算。competed有缓存，在值不变的情况下不会再次计算，而是直接使用缓存中的值。

mischen520

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
vue.js中computed和methods的区别以及使用场景

先来看一下methods调用的使用场景：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue.js 学习</title> <link rel="stylesheet" href="style.css"> <script src="https://unpkg.com/vue"></s
复制链接

扫一扫

专栏目录