Vue.js中 computed 和 methods 的区别
computed 的使用場景
-
HTML模板中的復(fù)雜邏輯表達(dá)式,為了防止邏輯過重導(dǎo)致不易維護(hù),都應(yīng)當(dāng)把相關(guān)邏輯放入計(jì)算屬性。
-
比如這種
```<div id="root"> <p>Reversed message: "{{ message.split('').reverse().join('') }}"</p> </div> ```
-
在這個(gè)地方,模板不再是簡單的聲明式邏輯。這里是想要顯示變量 message 的翻轉(zhuǎn)字符串,而這種包含復(fù)雜邏輯處理的表達(dá)式,都應(yīng)當(dāng)使用計(jì)算屬性。
computed 和 methods 的區(qū)別
1. computed是屬性調(diào)用,而methods是函數(shù)調(diào)用
這意味著在HTML的插值里
- computed定義的方法是以屬性訪問的形式來調(diào)用,如 {{reversedMessageComputed}}
- methods定義的方法,則要加上 () 來調(diào)用,如 {{reversedNameMethod()}} ,否則視圖中會(huì)渲染出如下內(nèi)容
- function () { [native code] }
2. computed帶有緩存功能,而methods不是
這里我引用一下官方文檔的說明
計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。只在相關(guān)依賴發(fā)生改變時(shí)它們才會(huì)重新求值。<!-- html --> <div id="root"> <p>Reversed message: "{{ reversedNameMethod() }}"</p> <p>Reversed message: "{{ reversedMessageComputed }}"</p> </div>
// javascript var vm = new Vue({el: '#root',data: {name: 'Alex',message: 'Hello'},methods: {reversedNameMethod: function () {return this.name.split('').reverse().join('')}},computed: {// 計(jì)算屬性的 getterreversedMessageComputed: function () {// `this` 指向 vm 實(shí)例return this.message.split('').reverse().join('')}} })上面的例子中,緩存意味著只要 message 還沒有發(fā)生改變,多次訪問 reversedMessageComputed 計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果,而不必再次執(zhí)行函數(shù)。而 reversedNameMethod() 方法,每次調(diào)用都會(huì)重新執(zhí)行函數(shù)。
但同時(shí)需要注意,這也同樣意味著下面的計(jì)算屬性將不再更新,因?yàn)?Date.now() 不是響應(yīng)式依賴:
// javascript computed: {now: function () {return Date.now()} }now 的值將在Vue實(shí)例化時(shí)生成,并且不再改變。
相比之下,每當(dāng)觸發(fā)重新渲染時(shí),調(diào)用方法將總會(huì)再次執(zhí)行函數(shù)。
computed其他說明
-
computed 和 methods 不可以重名
- Vue會(huì)把 methods 和 data 里的東西,全部代理到Vue生成的對(duì)象中,這會(huì)將computed中重名屬性覆蓋
來源:https://segmentfault.com/a/1190000017920016
轉(zhuǎn)載于:https://www.cnblogs.com/lalalagq/p/10283157.html
總結(jié)
以上是生活随笔為你收集整理的Vue.js中 computed 和 methods 的区别的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: sql根据某个字段拼接另外字段
- 下一篇: vue——组件之elementTable