本文介紹了vue watch自動檢測數據變化實時渲染的方法，分享給大家，具體如下:
首先確認 watch是一個對象，一定要當成對象來用。
對象就有鍵，有值。
鍵：就是你要監控的那個家伙，比如說$route，這個就是要監控路由的變化。或者是data中的某個變量。
值可以是函數：就是當你監控的家伙變化時，需要執行的函數，這個函數有兩個形參，第一個是當前值，第二個是變化后的值。
值也可以是函數名：不過這個函數名要用單引號來包裹。
第三種情況厲害了。
值是包括選項的對象：選項包括有三個。
watch實例
上次講到可以使用this.$set或vm.set來動態的改變，已經渲染在頁面上的數據（添加，刪除）重新計算重新渲染。
有時候你會需要，動態的改變某個數據或者值，然后根據你改變的值再做出其它的處理操作（如：顯示，隱藏，增，刪）等，如下面代碼例子：
這里舉個Tab的例子：
在vue的項目里新建一個Tab的組件頁面
<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可以讓你自定義一個偵聽器，當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的
我再舉一個搜索的例子：
<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>
舉了兩個簡單的例子，希望對大家能有所幫助～也希望大家多多支持腳本之家。
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
