07 解决watch监听复杂数据类型中新值和老值相同问题

最新推荐文章于 2024-06-18 16:10:07 发布

旭旭不会踢球

最新推荐文章于 2024-06-18 16:10:07 发布

阅读量289

点赞数 7

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/xx0822_/article/details/124934004

版权

这篇博客探讨了在Vue.js中如何通过数据绑定和watcher实现对对象属性的深度监听。示例展示了当输入框值改变时，如何更新并打印fullName，同时详细解释了`JSON.parse(JSON.stringify())`方法在解决深度监听新老值同源问题中的作用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
			<p>FullName: {{person.fullname}}</p>
			<p>FirstName: <input type="text" v-model="person.firstname"></p>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						person: {
							firstname: 'Menghui',
							lastname: 'Jin',
							fullname: ''
						}
					}
				},
				methods: {

				},
				computed: {
					person2() {
						return JSON.parse(JSON.stringify(this.person));
					} //解决深度监听新老值同源问题
				},
				watch: {
					person2: {
						handler(n, o) {
							console.log(this.person);
							console.log(n.firstname);
							console.log(o.firstname);

							/* this.person.fullname = this.person.firstname + this.person.lastname */
						},
						/* immediate: true, */
						deep: true // 可以深度检测到 person 对象的属性值的变化
					}
				}
			})
		</script>
	</body>
</html>