Vue监听数据变化watch、computed

最新推荐文章于 2024-09-28 12:20:17 发布

广东话的蛇皇

最新推荐文章于 2024-09-28 12:20:17 发布

阅读量455

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104891981

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

Vue监听数据变化

watch

watch可以监视data中指定数据的变化
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, inital-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="vue.js"></script>
	<script src="vue-router.js"></script>
</head>
<body>
	<div id="app">
		我们应该称呼您<input type="text" v-model="firstName">先生/女士
		如果方便，请告诉我们您的名字<input type="text" v-model="lastName">
		<input type="text" v-model="fullName">您好！很高兴为您服务！
	</div>
	<script>
		var vm = new Vue({
			el:'#app',
			data: {
				firstName:'',
				lastName:'',
				fullName:''
			},
			methods: {},
			watch: {//监视data中指定数据的变化
				'firstName': function(newVal, oldVal) {
					this.fullName = newVal + this.lastName
				},
				'lastName': function(newVal) {
					this.fullName = this.firstName + newVal
				}
			}
		});
	</script>
</body>
</html>

computed()

在computed()中,可以定义一些计算属性，它的本质是一个方法，但使用时是直接把方法名称当作属性使用
它有三个特点：

计算属性在引用的时候不加（）直接当作普通属性使用
只要function(){}内部任何data中的数据发生变化，就会重新计算
计算属性的结果会被缓存起来方便下次使用，如果方法中的数据没有变化则不重新计算

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, inital-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="vue.js"></script>
	<script src="vue-router.js"></script>
</head>
<body>
	<div id="app">
		我们应该称呼您<input type="text" v-model="firstName">先生/女士
		如果方便，请告诉我们您的名字<input type="text" v-model="lastName">
		<input type="text" v-model="fullName">您好！很高兴为您服务！
	</div>
	<script>
		var vm = new Vue({
			el:'#app',
			data: {
				firstName:'',
				lastName:'',
			},
			methods: {},
			computed: {//监视data中指定数据的变化
				'fullName': function() {
				 	return	this.firstName + this.lastName
				}
			}
		});
	</script>
</body>
</html>

watch、computed、methods之间的对比

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用
methods方法表示一个具体的操作，主要书写业务逻辑
watch一个对象，键是需要观察的表达式，值是对应的回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看做是computed和methods的结合体