vue選項 - - 淺談watch監聽器

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
	}
},