Vue计算属性、方法和侦听器的区分（超易懂）

最新推荐文章于 2023-01-10 22:02:39 发布

郝拾柒

最新推荐文章于 2023-01-10 22:02:39 发布

阅读量720

点赞数 3

分类专栏： VUE

本文链接：https://blog.csdn.net/CrownNew/article/details/104270152

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

通过代码和浏览器的控制台让大家区分Vue的计算属性、方法个侦听器

我个人习惯把笔记写在代码中，话不多说，放码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性，方法，侦听器</title>
		<script src = "./vue.js"></script>
	</head>
	<body>
		<div id="app">
			方法：
			{{fullname1()}}
			{{age}}
			<br/>
			计算属性：
			{{fullname2}}
			{{age}}
			<br/>
			侦听器：
			{{fullname3}}
			{{age}}
		</div>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					firstname:"Crown",
					lastname:"New",
					fullname3:"Crown New",
					age:28
				},
				//1.用方法完成名字的组合
				//方法内部没有缓存机制，相关的值即便没有改变，刷新页面时仍旧需要重新计算
				methods:{
					fullname1:function(){
						console.log("方法计算了一次")
						return this.firstname + " " + this.lastname
					}
				},
				//2.用计算属性完成名字的组合
				//自带缓存，如果相关的值没有改变，改变页面其他元素的值，不需要重新计算
				computed:{
					fullname2:function(){
						console.log("计算属性计算了一次")
						return this.firstname + " " + this.lastname
					}
				},
				//3.侦听器完成计算
				//侦听器也自带缓存，如果相关的值没有改变，改变页面其他元素的值，不需要重新计算
				//但是侦听器的代码量相比于计算属性更大，故若二者均可，优先使用计算属性
				watch:{
					firstname:function(){
						console.log("侦听器计算了一次")
						this.fullname3 = this.firstname + " " + this.lastname
					},
					lastname:function(){
						console.log("侦听器计算了一次")
						this.fullname3 = this.firstname + " " + this.lastname
					}
				}
			})
		</script>
	</body>
</html>

代码是可以直接使用的，只需要从vue官网下载vue.js放在根目录即可,下边是控制台的图解

1.刚打开控制器时

在这里插入图片描述
可见，计算属性和计算方法分别进行了一次计算，而侦听器是直接渲染值，不需要进行计算

2.我们首先通过控制台对与计算不相关的值进行更改

在这里插入图片描述控制台输出：方法计算了一次，可知计算属性自带缓存，如果相关的值没有改变，改变页面其他元素的值，不需要重新计算，而侦听器并未侦听age，也不需要重新计算

3.下面通过控制台对与计算相关的值进行更改

在这里插入图片描述
此时计算属性、方法和侦听器均进行了计算

总的来说，计算方法并不自带缓存，每次刷新页面都需要重新计算，计算属性和侦听器，如果相关的值没有改变，改变页面其他元素的值，刷新页面时不需要重新计算，但是侦听器的代码量相比于计算属性更大，故若二者均能满足需求，优先使用计算属性

郝拾柒

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue计算属性、方法和侦听器的区分（超易懂）

通过代码和浏览器的控制台让大家区分Vue的计算属性、方法个侦听器我个人习惯把笔记写在代码中，话不多说，放码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算属性，方法，侦听器</title> <script src = "./vu...
复制链接

扫一扫

专栏目录