本文介紹了vue watch自動檢測數據變化實時渲染的方法，分享給大家，具體如下:
首先確認 watch是一個對象，一定要當成對象來用。
對象就有鍵，有值。
鍵：就是你要監控的那個家伙，比如說$route，這個就是要監控路由的變化。或者是data中的某個變量。
值可以是函數：就是當你監控的家伙變化時，需要執行的函數，這個函數有兩個形參，第一個是當前值，第二個是變化后的值。
值也可以是函數名：不過這個函數名要用單引號來包裹。
第三種情況厲害了。
值是包括選項的對象：選項包括有三個。
- 第一個handler：其值是一個回調函數。即監聽到變化時應該執行的函數。
- 第二個是deep：其值是true或false；確認是否深入監聽。（一般監聽時是不能監聽到對象屬性值的變化的，數組的值變化可以聽到。）
- 第三個是immediate：其值是true或false；確認是否以當前的初始值執行handler的函數。
watch實例
上次講到可以使用this.$set或vm.set來動態的改變，已經渲染在頁面上的數據（添加，刪除）重新計算重新渲染。
有時候你會需要，動態的改變某個數據或者值，然后根據你改變的值再做出其它的處理操作（如：顯示，隱藏，增，刪）等，如下面代碼例子：
這里舉個Tab的例子：
在vue的項目里新建一個Tab的組件頁面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<template>
{{index}}
<div>
<div @click=
"showFun(0)"
>Tab1</div>
<div @click=
"showFun(1)"
>Tab2</div>
<div @click=
"showFun(2)"
>Tab3</div>
</div>
<div>
<div v-
if
=
"index == 0"
>cont1</div>
<div v-
if
=
"index == 1"
>cont1</div>
<div v-
if
=
"index == 2"
>cont1</div>
</div>
</template>
<script>
export
default
{
data(){
return
{
index: 0
// 索引
}
},
watch:{
// 實時檢測
index(idx){
//實時監聽index的變化
console.log(idx)
//在這里你可以再根據idx的值，做出其它的操作
}
},
methods:{
showFun(idx){
this
.index = idx
}
}
}
</script>
|
watch可以讓你自定義一個偵聽器，當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的
我再舉一個搜索的例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<template>
<input v-model=
"value"
/>
// 搜索框
</template>
<script>
export
default
{
data(){
return
{
value:
''
// 值
}
},
watch:{
value(val){
// 實時監聽數據變化
this
.wat_fun(val)
}
}，
methods:{
wat_fun(val){
// 這里可以調用搜索api接口
console.log(val)
}
}
}
</script>
|