vue选项 - - 浅谈watch监听器

最新推荐文章于 2022-02-11 10:44:23 发布

原创最新推荐文章于 2022-02-11 10:44:23 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

选项专栏收录该内容

1 篇文章

订阅专栏

本文探讨了Vue.js中使用watch监听器来跟踪数据变化，特别是如何通过深度监听(deep:true)来捕捉直接赋值不改变响应式数据的情况。示例展示了在列表数据更新时，如何通过`splice`方法修改列表并触发监听器。同时，文章讲解了Vue的数据响应式机制，强调直接赋值不会触发监听，需要正确设置监听选项。

watch 监听器

以data中的变量为名监听哪个变量以哪个为名

但直接赋值不改变响应式数据不会触发监听因此需设置深度监听

<div class="app">
	<ul>
		<li v-for="(item,index) in list">
		   {{index}},{{item.name}}
           <button type="button" @click="update(index)">修改</button>
		</li>
	</ul>	
</div>
<script>
	new Vue({
		el:".app",
		data:{
			  //list:['a','b','c','d','d']
				list:[
						{name:"li",salary:"15k"},
						{name:"huah",salary:"18k"}
					]
		},
		watch:{
           list(val){
				console.log(val)
			}		
		},
			
		methods:{
			update(index){
				//splice添加或删除元素
				this.list.splice(index,1,{
					name:"li",salary:"20k"
				 })		
			}
		}
				
	})
</script>

watch:{
	//运用深度监听 便可监听到直接赋值 不改变地址的情况
	list:{
		handler(val){
			console.log(val)
		},deep:true
	}
},