Vue 计算属性和侦听器(watch和computed)

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

MiemieWan

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

阅读量873

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/MiemieWan/article/details/83749112

版权

vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1.watch：用来侦听data中已存在的数据的变化（只能监视单个变量），对于数组和对象的改变要用深度监听。

（因为监听的是对象的地址。修改数组或对象时地址并没有改变改变的是指定地址中的值）

<!DOCTYPE html>
<html>
<head>
	<title>计算属性和侦听器(watch和computed)</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

</head>
<body>
	<div id="app">dgdgdgsdgg</div>
	<script>
		var App = {
			template:`
				<div>
					<input type="text" v-model="msg">
					<input type="text" v-model="list[0].name">
					<input type="text" v-model="list[0].age">

				</div>
			`,
			data() {
				return {
					msg:665,
					list:[{name:'John','age':12}]
				}
			},
			watch: {
				msg(newVal,oldVal) {
					console.log(this.msg);
					console.log(newVal); //返回msg未改变前的值
					console.log(oldVal); //返回msg改变后的值
				},
				list() { //在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。所以这里完全不会被调用到，需要对对象或数组进行深度观察
					console.log(this.list[0].name);
					console.log(this.list[0].age);
				},
				//对数组进行深度观察
				list: {
					deep:true,
					handler:function() {
						console.log('深度监视成功!!!!');
						console.log(this.list);
						console.log(this.list[0].name);
						console.log(this.list[0].age);
					}
					
				}
			}
		}
		new Vue({
			el:document.getElementById('app'),
			components: {
				App
			},
			template: '<App />'
		})
	</script>
</body>
</html>

2.computed：用来侦听data中已存在的数据的变化（侦听多个变量），返回新的变量。

计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值 .

<!DOCTYPE html>
<html>
<head>
	<title>计算属性和侦听器(watch和computed)</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

</head>
<body>
	<div id="app">dgdgdgsdgg</div>
	<script>
		var App = {
			template:`
				<div>
					<input type="text" v-model="msg">
					<input type="text" v-model="list[0].name">
					<input type="text" v-model="list[0].age">
					<p>{{result}}</p>
				</div>
			`,
			data() {
				return {
					msg:665,
					list:[{name:'John','age':12}]
				}
			},
			computed: {
				result() {
					return this.msg + this.list[0].name + this.list[0].age;
				}
			}
		}
		new Vue({
			el:document.getElementById('app'),
			components: {
				App
			},
			template: '<App />'
		})
	</script>
</body>
</html>

MiemieWan

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue 计算属性和侦听器(watch和computed)

1.watch：用来侦听data中已存在的数据的变化（只能监视单个变量），对于数组和对象的改变要用深度监听。（因为监听的是对象的地址。修改数组或对象时地址并没有改变改变的是指定地址中的值）<!DOCTYPE html><html><head> <title>计算属性和侦听器(watch和computed)</title...
复制链接

扫一扫