vue中計算屬性(computed)、methods和watched之間的區別

NO IMAGE

前言

本文主要給大家介紹了關於vue中計算屬性(computed)、methods和watched之間的區別,分享出來供大家參考學習,下面來一起看看詳細的介紹:

計算屬性

和普通屬性一樣是在模板中繫結計算屬性的,當data中對應資料發生改變時,計算屬性的值也會發生改變。

Methods

methods是方法,只要呼叫它,函式就會執行。

相同:兩者達到的效果是同樣的。

不同:計算屬性是基於它們的依賴進行快取的,只有相關依賴會發生改變時才會重新求職。只要相關依賴未改變,只會返回之前的結果,不再執行函式。


<p>原始資料:{{msg}}</p> 
<p>改變後的資料:{{changemsg}}</p> 
var vm=new Vue({ 
<span style="white-space:pre"> </span>el:"#example", 
data:{ 
<span style="white-space:pre"> </span>msg:"hello", 
<span style="white-space:pre"> </span>}, 
<span style="white-space:pre"> </span>computed:{ 
changemsg:function(){ 
return this.msg.split("").reverse().join(""); 
}, 
} 

computed屬性  VS watched 屬性

watched屬性:程式碼更易於理解,它指定監測的值是誰,然後相應的改變其他的值。


var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val   ' '   this.lastName
},
lastName: function (val) {
this.fullName = this.firstName   ' '   val
}
}
})

computed屬性:程式碼更簡單。


var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName   ' '   this.lastName
}
}
})

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者使用shell能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對指令碼之家的支援。

您可能感興趣的文章:

詳解Vue的computed(計算屬性)使用例項之TodoListVue中計算屬性computed的示例解讀Vue computed計算屬性的使用方法Vue.js計算屬性computed與watch(5)Vue.js第三天學習筆記(計算屬性computed)Vue.js每天必學之計算屬性computed與$watch深入理解Vue Computed計算屬性原理