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 } }})以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
