vue中計(jì)算屬性（computed）、methods和watched之間的區(qū)別

更新時(shí)間：2017年07月27日 11:02:59 作者：seven_an

這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性（computed）、methods和watched之間區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

本文主要給大家介紹了關(guān)于vue中計(jì)算屬性（computed）、methods和watched之間的區(qū)別，分享出來供大家參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹：

計(jì)算屬性

和普通屬性一樣是在模板中綁定計(jì)算屬性的，當(dāng)data中對(duì)應(yīng)數(shù)據(jù)發(fā)生改變時(shí)，計(jì)算屬性的值也會(huì)發(fā)生改變。

Methods

methods是方法，只要調(diào)用它，函數(shù)就會(huì)執(zhí)行。

相同：兩者達(dá)到的效果是同樣的。

不同：計(jì)算屬性是基于它們的依賴進(jìn)行緩存的，只有相關(guān)依賴會(huì)發(fā)生改變時(shí)才會(huì)重新求職。只要相關(guān)依賴未改變，只會(huì)返回之前的結(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)測(cè)的值是誰，然后相應(yīng)的改變其他的值。

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)容對(duì)大家的學(xué)習(xí)或者使用shell能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

elementUI Pagination 分頁指定最大頁的問題及解決方法(page-count)
項(xiàng)目中遇到數(shù)據(jù)量大,查詢的字段多,但用戶主要使用的是最近的一些數(shù)據(jù),1萬條以后的數(shù)據(jù)一般不使用,這篇文章主要介紹了elementUI Pagination 分頁指定最大頁的問題及解決方法(page-count),需要的朋友可以參考下
2024-08-08
vue favicon設(shè)置以及動(dòng)態(tài)修改favicon的方法
這篇文章主要介紹了vue favicon設(shè)置以及動(dòng)態(tài)修改favicon的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
如何解決vue2.0下IE瀏覽器白屏問題
這篇文章主要介紹了如何解決vue2.0下IE瀏覽器白屏問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
Vue渲染器設(shè)計(jì)實(shí)現(xiàn)流程詳細(xì)講解
在瀏覽器平臺(tái)上，用它來渲染其中的真實(shí)DOM元素。渲染器不僅能夠渲染真實(shí)的DOM元素，它還是框架跨平臺(tái)能力的關(guān)鍵。所以在設(shè)計(jì)渲染器的時(shí)候一定要考慮好自定義的能力
2023-01-01
vuex中store存儲(chǔ)store.commit和store.dispatch的區(qū)別及說明
這篇文章主要介紹了vuex中store存儲(chǔ)store.commit和store.dispatch的區(qū)別及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
iphone劉海屏頁面適配方法
這篇文章主要介紹了iphone劉海屏頁面適配方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
Vuex數(shù)據(jù)持久化實(shí)現(xiàn)的思路與代碼
Vuex數(shù)據(jù)持久化可以很好的解決全局狀態(tài)管理,當(dāng)刷新后數(shù)據(jù)會(huì)消失,這是我們不愿意看到的。這篇文章主要給大家介紹了關(guān)于Vuex數(shù)據(jù)持久化實(shí)現(xiàn)的思路與代碼，需要的朋友可以參考下
2021-05-05
Vue后臺(tái)中優(yōu)雅書寫狀態(tài)標(biāo)簽的方法實(shí)例
在Vue中,我們可以非常便捷地通過標(biāo)簽實(shí)現(xiàn)狀態(tài)的保存,這篇文章主要給大家介紹了關(guān)于Vue后臺(tái)中如何優(yōu)雅的書寫狀態(tài)標(biāo)簽的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-08-08
vue3版本網(wǎng)頁小游戲設(shè)計(jì)思路
最近火爆全網(wǎng)的羊了個(gè)羊小程序，背景是根據(jù)官方介紹，“羊了個(gè)羊”是一款闖關(guān)消除小游戲，通關(guān)率不到0.1%。主要玩法為重疊的各類方塊，需要在下方7個(gè)欄內(nèi)完成消除，其特點(diǎn)就是“極難”，也因此成為熱門挑戰(zhàn)，對(duì)vue3版本網(wǎng)頁小游戲設(shè)計(jì)思路感興趣的朋友跟隨小編一起看看吧
2022-12-12
利用vue3自己實(shí)現(xiàn)計(jì)數(shù)功能組件封裝實(shí)例
組件(Component) 是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展 HTML 元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于利用vue3自己實(shí)現(xiàn)計(jì)數(shù)功能組件封裝的相關(guān)資料,需要的朋友可以參考下
2021-09-09