Vue学习笔记3.4 - 数据监听 computed, methods, watch

最新推荐文章于 2024-08-15 01:13:27 发布

@凌晨三点半

最新推荐文章于 2024-08-15 01:13:27 发布

阅读量615

点赞数

分类专栏： Vue.js 文章标签： Vue 计算属性 computed watch 数据监听

本文链接：https://blog.csdn.net/soulwyb/article/details/86228326

版权

Vue.js 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

computed：用来做计算返回结果

示例：

<!DOCTYPE html>
<head>
	<title>计算属性，方法，监听器</title>
	<script type="text/javascript" src="vue.js"></script>
</head>
<body>
	<div id="app">
		{{FullName}}
		{{age}}
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el: "#app",
		data: {
			FirstName: 'Dell',
			LastName: 'Lee',
			age: 28
		},
		computed: {
			FullName: function() {
				console.log("计算了一次");
				return this.FirstName + ' ' + this.LastName;
			}
		}
	})
</script>
</html>

这样不需要设置FullName就可以得出结果返回到页面上

计算属性有缓存机制,在相关计算元素没有改变的情况下是不会触发计算属性重新计算的

属性。通过方法来调用。示例：

注意：插值表达式中的表达式加了“()”

<!DOCTYPE html>
<head>
	<title>计算属性，方法，监听器</title>
	<script type="text/javascript" src="vue.js"></script>
</head>
<body>
	<div id="app">
		{{FullName()}}
		{{age}}
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el: "#app",
		data: {
			FirstName: 'Dell',
			LastName: 'Lee',
			age: 28
		},
		// 方法
		methods: {
			FullName: function() {
				console.log("计算了一次");
				return this.FirstName + ' ' + this.LastName;
			}
		}

	})
</script>
</html>

使用方法监听数据的话。不会有缓存机制不管跟自己有关没关的数据更改了它都重新计算一次

wacth监听：

用watch监听。效果跟计算属性一样。就是代码比较冗余

示例：

<!DOCTYPE html>
<head>
	<title>计算属性，方法，监听器</title>
	<script type="text/javascript" src="vue.js"></script>
</head>
<body>
	<div id="app">
		{{FullName}}
		{{age}}
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el: "#app",
		data: {
			FirstName: 'Dell',
			LastName: 'Lee',
			FullName: 'Dell Lee',
			age: 28
		},
		// 监听
		watch: {
			FirstName: function() {
				console.log("计算了一次");
				this.FullName = this.FirstName + ' ' + this.LastName
			},
			LastName: function() {
				console.log("计算了一次");
				this.FullName = this.FirstName + ' ' + this.LastName
			}
		}

	})
</script>
</html>

使用监听的时候一开始不会调用（因为是现成的数据，除非一开始渲染页面的时候就修改了被监听的数据比如生命周期函数中的代码）

在所监听的数据发生改变的时候才会触发