watch本身很容易理解, watch負責將視圖中的數據與某個函數關聯起來
當Vue視圖中的數據變化時, 關聯的函數會被執行
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>監聽方法watch的使用</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script></head><body> <div id="root"></div> <script> var vm = new Vue({ el: "#root", data: { obj: {name: "zhaoolee", age: 12} , tel:6666666}, template: `<div><div>姓名: {{obj.name}}</div> <div>電話: {{tel}}</div> <input type="text" v-model="obj.name"> <input type="text" v-model="tel"></div>`, watch: { obj: { handler(){ console.log("obj被改變"); }, // 頁面加載之初先執行一次handle immediate: true, // 深度檢查屬性,即使對象內部的屬性值改變, 也能檢測到(比較消耗性能) deep: true }, "obj.name": { handler(){ console.log("=>obj.name被改變"); } }, tel:{ handler(){ console.log("tel被改變"); } } } }) </script></body></html>對應一個對象，鍵是觀察表達式，值是對應回調。值也可以是方法名，或者是對象，包含選項。在實例化時為每個鍵調用 $watch() ;
//使用官方vue-cli腳手架書寫<template> //觀察數據為字符串或數組 <input v-model="example0"/> <input v-model="example1"/> /當單觀察數據examples2為對象時，如果鍵值發生變化，為了監聽到數據變化，需要添加deep:true參數 <input v-model="example2.inner0"/></template><script> export default { data(){ return { example0:"", example1:"", example2:{ inner0:1, innner1:2 } } }, watch:{ example0(curVal,oldVal){ console.log(curVal,oldVal); }, example1:'a'，//值可以為methods的方法名 example2:{ //注意：當觀察的數據為對象或數組時，curVal和oldVal是相等的，因為這兩個形參指向的是同一個數據對象 handler(curVal,oldVal){ conosle.log(curVal,oldVal) }, deep:true } }, methods:{ a(curVal,oldVal){ conosle.log(curVal,oldVal) } } }</script>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
