溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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
}
}
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
