這篇文章給大家介紹vue中methods和watched有什么區(qū)別，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)公司的客戶來自各行各業(yè)，為了共同目標(biāo)，我們在工作上密切配合，從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對我們的要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括成都網(wǎng)站設(shè)計、做網(wǎng)站、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)。

Methods

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

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

不同：計算屬性是基于它們的依賴進(jìn)行緩存的，只有相關(guān)依賴會發(fā)生改變時才會重新求職。只要相關(guān)依賴未改變，只會返回之前的結(jié)果，不再執(zhí)行函數(shù)。

原始數(shù)據(jù)：{{msg}}
 
改變后的數(shù)據(jù)：{{changemsg}}
 
var vm=new Vue({ 
 el:"#example", 
 data:{ 
  msg:"hello", 
 }, 
 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
 }
 }
})

關(guān)于vue中methods和watched有什么區(qū)別就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。