>
}<
/div>
newvue(})
<
/script>
>
原始字串:
}<
/p>
計算後反轉字串:
}<
/p>
<
/div>
var vm =
newvue(,
computed:}}
)<
/script>
我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴快取，只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函式總會重新呼叫執行
可以說使用 computed 效能會更好，但是如果你不希望快取，你可以使用 methods 屬性。
computed setter
computed 屬性預設只有 getter ，不過在需要時你也可以提供乙個 setter
var vm =
newvue(,
computed:
,// setter
set: function (newvalue)}}
})// 呼叫 setter， vm.name 和 vm.url 也會被對應更新
vm.site =
'菜鳥教程 '
;//呼叫get，將更新後的值返回
document.
write
('name: '
+ vm.name)
;document.
write('
');document.
write
('url: '
+ vm.url)
;
用法1：用watch來響應資料的變化
示例：計數器
>
"font-size: 20px;"
>計數器：
}<
/p>
="count++"
>點我<
/button>
<
/div>
var vm =
newvue(,
watch:}}
)//上面等價於下面
var vm1 =
newvue(}
)vm1.$watch
("count"
,function
(newv, oldv)
)<
/script>
這樣使用watch時有乙個特點，就是當值第一次繫結的時候，不會執行監聽函式，只有值發生改變才會執行。如果我們需要在最初繫結值的時候也執行函式，則就需要用到immediate屬性，並將其屬性值設定為true
watch:
, immediate:
true
}}
當需要監聽乙個物件的改變時，普通的watch方法無法監聽到物件內部屬性的改變，只有data中的資料才能夠監聽到變化，此時就需要deep屬性對物件進行深度監聽
"text" v-model=
"cityname.name"
/>
data ()}
},watch:
, immediate:
true
, deep:
true
}}
watch:
, deep:
true
, immediate:
true
}}
共同點是：都是希望在依賴資料發生改變的時候，被依賴的資料根據預先定義好的函式，發生「自動」的變化 。
不同點是：
1.watch擅長處理的場景：乙個資料影響多個資料（乙個資料改變時，如計數器示例）
2.computed擅長處理的場景：乙個資料受多個資料影響（多個資料變化時，如computed setter）
Vue計算屬性和監聽屬性
可以看下以下反轉字串的例子 模板變的很複雜起來，也不容易看懂理解 使用了計算屬性的例項 原始字串 計算後反轉字串 例項中宣告了乙個計算屬性 reversedmessage 提供的函式將用作屬性 vm.reversedmessage 的 getter vm.reversedmessage 依賴於 vm...
Vue計算屬性和監聽屬性
1 關鍵字 2 計算屬性 ku 姓 text v model lastname input 名 text v model firstname input 姓名 text v model fullname input div template export default computed metho...
Vue計算屬性和監聽屬性
可以看下以下反轉字串的例子 模板變的很複雜起來，也不容易看懂理解 使用了計算屬性的例項 原始字串 計算後反轉字串 例項中宣告了乙個計算屬性 reversedmessage 提供的函式將用作屬性 vm.reversedmessage 的 getter vm.reversedmessage 依賴於 vm...