computed

computed：相當于method，返回function內return的值賦值在html的DOM上。但是多個{{}}使用了computed，computed內的function也只執行一次。僅當function內涉及到Vue實例綁定的data的值的改變，function才會從新執行，并修改DOM上的內容。

computed和method的對比

<div id="example"> {{ message.split('').reverse().join('') }}</div>

這個是vue官網一直拿來作為例子的代碼。在{{}}可以很方便的放入單個表達式，但是當一個HTML的DOM里面存在太多的表達式，程序會變得很笨重難于維護。

html

<div id="app9">  9、method與computed的區別<br/>  fullName<br/>  {{fullName}}<br/>  fullName2<br/>  {{fullName}}<br/>  fullNameMethod<br/>  {{getFullName()}}<br/>  fullNameMethod2<br/>  {{getFullName()}}<br/></div>

js

var app9 = new Vue({  el: '#app9',  data: {    firstName: 'Foo',    lastName: 'Bar'  },  methods:{    getFullName:function () {      console.log("執行了methods")      return this.firstName+" " +this.lastName;    }  },  computed: {    fullName: function () {      console.log("執行了computed")      return this.firstName + ' ' + this.lastName    }  }})setTimeout('app9.firstName="Foo2"',3000);

控制臺輸出的結果

執行了computed
執行了methods
執行了methods
執行了computed
執行了methods
執行了methods 

由此可見使用computed，function只會執行一次。當Vue實例中綁定的data數據改變的時候，computed也相對應的只改變一次。

相同點：在以上代碼中，兩個p標簽都會打印出同樣被反轉的Hello。

不同點：
使用了methods的：HTML中，每一個調用了Vue的methods的方法，都需要執行一遍reversedMessage()這個方法；
而使用computed計算屬性的，只執行一遍將結果保存在緩存中。

computed和watch的對比

html

<div id="demo">{{ fullName }}</div>

js

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 } }})

var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () {  return this.firstName + ' ' + this.lastName } }})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。