Day12 Vue computed VS watch VS method | vue computed methods
本文同步發表於AndysBlog[1]前言這兩天我們介紹完了Computed與watch特性與用法。那今天我們將來了解一下,這三者有什麼差異。第一部分:computedVSwatchOK,我們首先簡單複習一下,這兩者的特性。Computed:適合用來處理複雜邏輯運算。Watch:會去監聽特定變數,當變數產生變動時,就會執行某個動作。範例:HTML部分
本文同步發表於Andys Blog[1]
前言這兩天我們介紹完了Computed與watch特性與用法。那今天我們將來了解一下,這三者有什麼差異。
第一部分:computed VS watchOK,我們首先簡單複習一下,這兩者的特性。Computed:適合用來處理複雜邏輯運算。Watch:會去監聽特定變數,當變數產生變動時,就會執行某個動作。範例:HTML部分
<div id="app"> {{ fullName }} <br> <input type="text" v-model="firstName"> <br> <input type="text" v-model="lastName"> </div>JavaScript寫法一(使用Watch)
var vm = new Vue({ el: #app, data: { firstName: chunwen, lastName: YU, // 我們需要手動設定初始值 fullName: chunwen YU }, watch: { // 參數可以自行命名(更新資料,原始資料) firstName: function (newValue,rawValue) { // console.log(資料:,newVal,rawValue) this.fullName = `${newValue} ${this.lastName}` console.log(this.fullName) }, lastName: function (newValue) { this.fullName = `${this.firstName} ${newValue}` ...