VUE實戰 學習筆記（二）

2021-09-24 00:25:30 字數 945 閱讀 6253

計算屬性不能輸入引數。

計算屬性是對【複雜表示式=>資料】的聚合，並不一定是個純函式，但是最好能用乙個純函式作為計算屬性。



="lesson2"


>


}<


/div>


<


/template>


export


default


,  data:()


=>,,


]};}


,  methods:


,  computed:,""


);}}


};<


/script>


<


!-- add "scoped" attribute to limit css to this component only --


>


<


/style>
從上面例子可以看出來，computed中的值可以被視為直接使用變數，就和data中定義的一樣，不同的是計算值是一系列變數引數和表示式組合輸出的結果，之所以設計出這個概念就是為了抽象出呈現結果依賴於多個變數的邏輯，讓整個頁面的邏輯層次更分明。

計算屬性是可以設定getter和setter屬性的，以方便編寫者在讀/寫屬性的時候做一些其他的事情。其實可以認為預設情況下我們編寫的計算屬性邏輯就是放到getter方法中的。

dogname:


,get


:function()


}
注意get的觸發是由「dogcurrentname」引數被修改後導致的。

為什麼我們不直接使用method來實現計算屬性的功能能？因為計算屬性有快取這個大殺器！

//計算屬性快取測試


now:


function()
如果計算屬性依賴的引數沒有變化它將不會重新計算。頁面損耗將減小。

VUE實戰 學習筆記（一）

hello h1 h2 link span div template export default data mounted階段 el已經掛載，可以進行dom操作了 mounted function 1000 script hello h1 h2 link p p div template expo...

Vue實戰筆記

1 元件的屬性 例子 class hello props name demo title 我是title title是原生屬性，當inheritattrs為false時，原生屬性不顯示 2 事件 3 插槽 4 如何觸發元件的更新 vue在例項化的時候，會對data裡的資料進行getter和sette...

Vue學習筆記二

事件修飾符 統一的js new vue methods btnhandler linkclick stop事件 class inner click div1handler type button value 戳他 click.stop btnhandler div prevent事件 href cl...