16.Vue深度监视简写

最新推荐文章于 2023-07-09 19:36:15 发布

修罗_

最新推荐文章于 2023-07-09 19:36:15 发布

阅读量67

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45843676/article/details/122961415

版权

VUE 专栏收录该内容

93 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>今天天气很{{info}}!</h2>
			<!-- 改变天气 -->
			<button @click="changeWeather" type="button">切换天气</button>

		</div>
	</body>
</html>

<script type="text/javascript">
	const vm = new Vue({
		el: '#root',
		data: {
			isHot: true,
		},
		watch: { //监听值改变
			//正常模式
			isHot: { //监听isHot值被修改时触发handler回调函数
				//handler操作者[ˈhændlə(r)]
				handler(newValue, oldValue) {
					console.log('isHot被修改了', newValue, oldValue);
				},
				// immediate: true //初始化时触发handler
				// deep: true//深度监视
			},
			//简写模式，当只有handler属性的时候可以简写
			isHot(newValue, oldValue) {
				console.log(newValue, oldValue);
			}
		},
		computed: { //计算，此方法返回最终值
			info() {
				return this.isHot ? '炎热' : '凉爽';
			}
		},
		methods: { //存放方法
			changeWeather() {
				this.isHot = !this.isHot;
			}
		}
	});
	//正常写法
	vm.$watch('isHot', {
		//handler操作者[ˈhændlə(r)]
		handler(newValue, oldValue) {
			console.log('isHot被修改了', newValue, oldValue);
		},
		// immediate: true //初始化时触发handler
		// deep: true//深度监视
	});
	//简写，仅有handler属性时可简写，不再可配置immediate、deep
	vm.$watch('isHot', function(newValue, oldValue) {
		console.log('isHot被修改了', newValue, oldValue);
	})
</script>