vue中計(jì)算屬性（computed）、methods和watched之間的區(qū)別
前言
本文主要給大家介紹了關(guān)于vue中計(jì)算屬性（computed）、methods和watched之間的區(qū)別，分享出來供大家參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹：
計(jì)算屬性
和普通屬性一樣是在模板中綁定計(jì)算屬性的，當(dāng)data中對應(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)測的值是誰，然后相應(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)容對大家的學(xué)習(xí)或者使用shell能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
下面小編就為大家分享一篇在vue中實(shí)現(xiàn)圖片和文件上傳的示例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vant van-list下拉加載更多onload事件問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue3中Element Plus Table(表格)點(diǎn)擊獲取對應(yīng)id方式
這篇文章主要介紹了Vue3中Element Plus Table(表格)點(diǎn)擊獲取對應(yīng)id方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
watch和computed都是以Vue的依賴追蹤機(jī)制為基礎(chǔ)的,當(dāng)某一個(gè)依賴型數(shù)據(jù)發(fā)生變化的時(shí)候,所有依賴這個(gè)數(shù)據(jù)的相關(guān)數(shù)據(jù)會(huì)自動(dòng)發(fā)生變化,即自動(dòng)調(diào)用相關(guān)的函數(shù),來實(shí)現(xiàn)數(shù)據(jù)的變動(dòng)，這篇文章簡單介紹下Vue中computed和watch的區(qū)別異同，感興趣的朋友一起看看吧2023-02-02
這篇文章主要為大家介紹了如何利用Vue3制作簡單的消消樂游戲，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起動(dòng)手試一試2022-05-05
Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式）
如果想要獲取選中的日期時(shí)間就需要通過,Element Plus 日期選擇器?format屬性和value-format屬性,format指定輸入框的格式,value-format?指定綁定值的格式,本篇文章就給大家介紹Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式）,感興趣的朋友一起看看吧2023-10-10
vue車牌號校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)
這篇文章主要介紹了vue車牌號校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
Vue自定義Hook實(shí)現(xiàn)簡化本地存儲(chǔ)
這篇文章主要為大家詳細(xì)介紹了如何通過使用 Vue 3 的 Composition API 創(chuàng)建一個(gè)強(qiáng)大而靈活的自定義 Hook,簡化了在 localStorage 或 sessionStorage 中管理數(shù)據(jù)的流程,需要的可以參考下2023-12-12
詳解Vue+axios+Node+express實(shí)現(xiàn)文件上傳(用戶頭像上傳)
這篇文章主要介紹了詳解Vue+axios+Node+express實(shí)現(xiàn)文件上傳(用戶頭像上傳)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08