vue中計算屬性（computed）、methods和watched之間的區別，vuecomputed

vue中計算屬性（computed）、methods和watched之間的區別，vuecomputed

前言

本文主要給大家介紹了關於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能帶來一定的協助，如果有疑問大家可以留言交流，謝謝大家對幫客之家的支援。