vue watch自動檢測資料變化即時渲染的方法，vuewatch

vue watch自動檢測資料變化即時渲染的方法，vuewatch

本文介紹了vue watch自動檢測資料變化即時渲染的方法，分享給大家，具體如下:

首先確認 watch是一個對象，一定要當成對象來用。

對象就有鍵，有值。

鍵：就是你要監控的那個傢伙，比如說$route，這個就是要監控路由的變化。或者是data中的某個變數。
值可以是函數：就是當你監控的傢伙變化時，需要執行的函數，這個函數有兩個形參，第一個是當前值，第二個是變化後的值。

值也可以是函數名：不過這個函數名要用單引號來包裹。

第三種情況厲害了。

值是包括選項的對象：選項包括有三個。

1. 第一個handler：其值是一個回呼函數。即監聽到變化時應該執行的函數。
2. 第二個是deep：其值是true或false；確認是否深入監聽。（一般監聽時是不能監聽到對象屬性值的變化的，數組的值變化可以聽到。）
3. 第三個是immediate：其值是true或false；確認是否以當前的初始值執行handler的函數。

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>

舉了兩個簡單的例子，希望對大家能有所協助～也希望大家多多支援幫客之家。