vue中計算屬性（computed）、methods和watched之間的區(qū)別
更新時間：2017年07月27日 11:02:59 作者：seven_an
這篇文章主要給大家介紹了關于vue中計算屬性（computed）、methods和watched之間區(qū)別的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編來一起學習學習吧。
前言
本文主要給大家介紹了關于vue中計算屬性（computed）、methods和watched之間的區(qū)別，分享出來供大家參考學習，下面來一起看看詳細的介紹：
計算屬性
和普通屬性一樣是在模板中綁定計算屬性的，當data中對應數(shù)據(jù)發(fā)生改變時，計算屬性的值也會發(fā)生改變。
Methods
methods是方法，只要調(diào)用它，函數(shù)就會執(zhí)行。
相同：兩者達到的效果是同樣的。
不同：計算屬性是基于它們的依賴進行緩存的，只有相關依賴會發(fā)生改變時才會重新求職。只要相關依賴未改變，只會返回之前的結(jié)果，不再執(zhí)行函數(shù)。
<p>原始數(shù)據(jù)：{{msg}}</p>
<p>改變后的數(shù)據(jù)：{{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屬性：代碼更易于理解，它指定監(jiān)測的值是誰，然后相應的改變其他的值。
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
}
}
})
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者使用shell能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
elementUI Pagination 分頁指定最大頁的問題及解決方法(page-count)
項目中遇到數(shù)據(jù)量大,查詢的字段多,但用戶主要使用的是最近的一些數(shù)據(jù),1萬條以后的數(shù)據(jù)一般不使用,這篇文章主要介紹了elementUI Pagination 分頁指定最大頁的問題及解決方法(page-count),需要的朋友可以參考下2024-08-08
vue favicon設置以及動態(tài)修改favicon的方法
這篇文章主要介紹了vue favicon設置以及動態(tài)修改favicon的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了如何解決vue2.0下IE瀏覽器白屏問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在瀏覽器平臺上，用它來渲染其中的真實DOM元素。渲染器不僅能夠渲染真實的DOM元素，它還是框架跨平臺能力的關鍵。所以在設計渲染器的時候一定要考慮好自定義的能力2023-01-01
vuex中store存儲store.commit和store.dispatch的區(qū)別及說明
這篇文章主要介紹了vuex中store存儲store.commit和store.dispatch的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了iphone劉海屏頁面適配方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
Vuex數(shù)據(jù)持久化實現(xiàn)的思路與代碼
Vuex數(shù)據(jù)持久化可以很好的解決全局狀態(tài)管理,當刷新后數(shù)據(jù)會消失,這是我們不愿意看到的。這篇文章主要給大家介紹了關于Vuex數(shù)據(jù)持久化實現(xiàn)的思路與代碼，需要的朋友可以參考下2021-05-05
在Vue中,我們可以非常便捷地通過標簽實現(xiàn)狀態(tài)的保存,這篇文章主要給大家介紹了關于Vue后臺中如何優(yōu)雅的書寫狀態(tài)標簽的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-08-08
最近火爆全網(wǎng)的羊了個羊小程序，背景是根據(jù)官方介紹，“羊了個羊”是一款闖關消除小游戲，通關率不到0.1%。主要玩法為重疊的各類方塊，需要在下方7個欄內(nèi)完成消除，其特點就是“極難”，也因此成為熱門挑戰(zhàn)，對vue3版本網(wǎng)頁小游戲設計思路感興趣的朋友跟隨小編一起看看吧2022-12-12
利用vue3自己實現(xiàn)計數(shù)功能組件封裝實例
組件(Component) 是Vue.js最強大的功能之一,組件可以擴展 HTML 元素,封裝可重用的代碼,這篇文章主要給大家介紹了關于利用vue3自己實現(xiàn)計數(shù)功能組件封裝的相關資料,需要的朋友可以參考下2021-09-09