<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用來(lái)監(jiān)控自己定義的變量，該變量不在data里面聲明，直接在computed里面定義， // 然后就可以在頁(yè)面上進(jìn)行雙向數(shù)據(jù)綁定展示出結(jié)果或者用作其他處理；computed比較適合對(duì)多個(gè)變量或者對(duì)象進(jìn)行處理后返回一個(gè)結(jié)果值， // 也就是數(shù)多個(gè)變量中的某一個(gè)值發(fā)生了變化則我們監(jiān)控的這個(gè)值也就會(huì)發(fā)生變化，舉例：購(gòu)物車?yán)锩娴纳唐妨斜砗涂偨痤~之間的關(guān)系， // 只要商品列表里面的商品數(shù)量發(fā)生變化，或減少或增多或刪除商品，總金額都應(yīng)該發(fā)生變化。這里的這個(gè)總金額使用computed屬性來(lái)進(jìn)行計(jì)算是最好的選擇 // 與watch之間的區(qū)別： // watch主要用于監(jiān)控vue實(shí)例的變化，它監(jiān)控的變量當(dāng)然必須在data里面聲明才可以，它可以監(jiān)控一個(gè)變量，也可以是一個(gè)對(duì)象 watch:{ firstName(val){ this.fullName = val + ' ' + this.lastName; }, lastName(val){ this.fullName = this.firstName + ' ' + val; }, // 對(duì)firstName或者lastName屬性的監(jiān)聽(tīng)會(huì)在他們第一次變化后開(kāi)始進(jìn)行監(jiān)聽(tīng)，如果我們想在創(chuàng)建時(shí)監(jiān)聽(tīng)他們，要使用 handler 和 immediate對(duì)他們監(jiān)聽(tīng) //immediate設(shè)為true 監(jiān)聽(tīng)方法會(huì)在創(chuàng)建的時(shí)候 執(zhí)行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>

?

轉(zhuǎn)載于:https://www.cnblogs.com/caozhuzi/p/11161625.html

總結(jié)

以上是生活随笔為你收集整理的watch 和 computed的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。