vue.js中的watch監聽和set方法使用

時間 2019-12-06

標籤 vue.js vue watch 監聽 set 方法使用欄目 JavaScript 简体版

原文原文鏈接

1、vue中的watch使用

一、watch是什麼？

watch是vue中提供的一個方法，用來觀察數據變更，進行數據監聽的一種方式。也能夠這樣說 watch是一個對象，能夠看做對象使用，是對象就有鍵，有值。vue

鍵：是須要監聽的目標，能夠是data中的某個變量。java
值能夠是函數：就是當你監聽的變量發生變化時，須要執行的函數，這個函數有兩個形參，第一個是當前值，第二個是更新後的值。數組
值能夠是函數名：不過這個函數名要使用單引號來標註。app
值能夠是選項中的對象：選項包括有三個。函數
- 第一個handler：其值是一個回調函數。即監聽到變化時應該執行的函數。
- 第二個是deep：其值是true或false；確認是否深刻監聽。（通常用來監聽一個對象裏面的值）
- 第三個是immediate：其值是true或false；確認是否以當前的初始值執行handler的函數。

二、watch的使用

（1）用watch來監聽一個普通變量

<div class="app">
    <div> <p>watch方法使用</p> <input v-model="data"/> </div> </div>
<script>
var vm = new Vue({
    el: '.app',
    data: {
    	data: '111',
    	obj: {
    	    arr: [
                {value: ''}
            ],
    	    data: ''
    	}		
    },
    watch: {
    	data(newVal, oldVal) {
    	    console.log(newVal, oldVal) 
    	}
    },
});
</script>
複製代碼

結果如圖所示：ui

（2）用watch來監聽一個對象

<script>
var vm = new Vue({
    el: '.app',
    data: {
    	data: '111',
    	obj: {
            arr: [
                {value: ''}
            ],
            data: ''
    	}		
    },
    watch: {
    	data(newVal, oldVal) {
    	    console.log(newVal, oldVal)
    	},
    	'obj': {
            deep: true,
            handler (newVal, oldVal) {
                console.log(newVal)
            }					
    	}
    },
    methods: {
    	addInput () {
    	    this.obj.arr.push({value: '111'})
    	}
    }
});
複製代碼

結果以下： this

當對象中的某一項數據發生變化時，都會被監聽到。若是想監聽對象中的某一項，能夠用對象名.屬性名，如"obj.data"，雙引號必須加上。

2、vue中set方法的使用

在最近的項目中，我遇到了這樣一個問題，在用watch監聽對象的時候，對象裏面數組的變更沒法實時渲染到頁面中，也由於這個問題卡了好久～～～最後，經過set方法解決了這樣的問題，下面我來總結一下本身對set方法的理解。spa

一、 set方法存在的意義

因爲javaScript的限制，vue不能檢測如下變更的數組3d

當你利用索引直接設置一個項時，vue不會爲咱們自動更新。例如：vm.items[indexOfItem] = newValue
當你修改數組的長度時，vue不會爲咱們自動更新。vm.items.length = newLength，不會更新數組。
注意：對象不能是vue實例，或是vue實例中的根數據對象。

爲了解決以上的問題，set方法就能發揮它的做用了～code

二、set方法簡單的使用

vue.set(target,key,value)

參數設置：
- target: 要更改的目標數據 {Object | Array}
- key: 數據的第幾項 {String | Number}
- value: 更改後的數據 {any}
返回值：
- 設置的值
用法：

設置對象的屬性，同時觸發視圖更新。這個方法主要是用於爲了避開vue不能檢測屬性被添加的限制。

<div class="app">
    <div>
    	<p>set方法使用</p>
    	<ul>
    	    <li v-for="(item, index) in arr">{{item}}</li>
    	</ul>
    </div>
</div>
<script>
    var vm = new Vue({
    	el: '.app',
    	data: {
    	    arr: ['aaa', 'bbb', 'ccc']
    	}
    });
    vm.arr[1] = 'ddd'
    console.log(vm.arr) // ['aaa','ddd','ccc']
複製代碼

運行結果：

（界面顯示）

（控制檯顯示）

由上面的結果的能夠看出，數組的第一項的值被改變了，在控制下面的數據已是更新的了，但在界面中顯示的依舊是原來數組裏面的值，因而可知，變更的數據並無實時更新到視圖中。出現這種狀況，那咱們就可使用set方法來解決啦～

<script>
    var vm = new Vue({
    	el: '.app',
    	data: {
    	    arr: ['aaa', 'bbb', 'ccc']
    	}
    });
    Vue.set(vm.arr, 1, 'ddd')
    console.log(vm.arr) // ['aaa','ddd','ccc']
複製代碼