vue watch

vue watch
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

watch 監聽資料的改變,並呼叫相關的函式


<div id="myDiv">
<h2>watch</h2>
<p>{{data}}</p>
<button @click="btnClick()">增加</button>
</div>
<script>
//觀察者模式,在資料改變時觸發
var myDiv = new Vue({
el: "#myDiv",
data: {
data:1
},
methods:{
btnClick:function () {
this.data  = 1
}
},
watch:{
//為屬性繫結監視器,會自動呼叫繫結的函式,並傳入之前的值和改變後的值
data:function (newVal,oldVal) {
console.log('new:' newVal)
console.log('old:' oldVal)
console.log('data:' this.data)
}
}
})
</script>

呼叫該函式時,資料已經改變

但物件的資料改變不會呼叫該函式

而物件的改變會呼叫該函式

 

深度監聽陣列變化,使用set設定新值


<div class="container" id='myDiv'>
<ul>
<li v-for=" (i,index) in items">{{i}}</li>
</ul>
<button class="btn" @click='btn_click'>增加</button>
<button class="btn" @click='btn_click2'>自己內部改變</button>
<button class="btn" onclick='btn_click3()'>外部通過函式改變</button>
<h1>
{{items}}
</h1>
</div>
</body>
<script>
var myDiv = new Vue({
el: '#myDiv',
data: {
items: new Array(),
},
watch: {
items: function (newVal, oldVal) {
console.log('new:'   newVal)
console.log('old:'   oldVal)
},
deep: true,
},
methods: {
btn_click: function () {
this.items.push(1)
console.log('btn_click')
},
btn_click2: function () {
//內部通過this改變
this.$set(this.items, '0', parseInt(this.items[0])   2)
console.log('btn_click2')
}
}
})
//外部通過函式改變
function btn_click3() {
console.log('btn3')
Vue.set(myDiv.items, '0', parseInt(myDiv.items[0])   2)
}
</script>

相關文章

程式語言 最新文章