<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <!-- watch/computed比較 --> <div> <input v-model="firstName" type="text"> <input v-model="lastName" type="text"> <input v-model="fullName" type="text"> </div> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App', firstName:'AAA', lastName:'BBB', //computed的話不能在date里定義 fullName:'AAA BBB' } }, //computed用來監控自己定義的變量，該變量不在data里面聲明，直接在computed里面定義， // 然后就可以在頁面上進行雙向數據綁定展示出結果或者用作其他處理；computed比較適合對多個變量或者對象進行處理后返回一個結果值， // 也就是數多個變量中的某一個值發生了變化則我們監控的這個值也就會發生變化，舉例：購物車里面的商品列表和總金額之間的關系， // 只要商品列表里面的商品數量發生變化，或減少或增多或刪除商品，總金額都應該發生變化。這里的這個總金額使用computed屬性來進行計算是最好的選擇 // 與watch之間的區別： // watch主要用于監控vue實例的變化，它監控的變量當然必須在data里面聲明才可以，它可以監控一個變量，也可以是一個對象 watch:{ firstName(val){ this.fullName = val + ' ' + this.lastName; }, lastName(val){ this.fullName = this.firstName + ' ' + val; }, // 對firstName或者lastName屬性的監聽會在他們第一次變化后開始進行監聽，如果我們想在創建時監聽他們，要使用 handler 和 immediate對他們監聽 //immediate設為true 監聽方法會在創建的時候 執行handler里的方法 // firstName:{ // handler:function(val){ // this.fullName = val + ' ' + this.lastName; // }, // immediate: true // }, // lastName:{ // handler:function(val){ // this.fullName = this.firstName + ' ' + val; // }, // immediate: true // }, }, // computed:{ // fullName(){ // return this.firstName + ' ' + this.lastName; // } // } } </script>

?

轉載于:https://www.cnblogs.com/caozhuzi/p/11161625.html

總結

以上是生活随笔為你收集整理的watch 和 computed的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。