<xmp id="cogkk"><nav id="cogkk"></nav>
<dd id="cogkk"></dd>
  • <menu id="cogkk"><menu id="cogkk"></menu></menu>
    <menu id="cogkk"><code id="cogkk"></code></menu>

    卓象程序員 | 哈爾濱IT培訓 | 品質教育,口碑傳承 | 為做出口口相傳,好口碑的教育品牌而奮斗!

    卓象程序員讓每一位學員高薪就業 聯系我們13101507057

    加微信,了解詳情
    您所在的位置:首頁 > 文章 >Vue.js

    「Vue.js開發連載十三」計算屬性
    時間: 2018-11-09 10:34:46     來源: 卓象IT實訓基地【原創】

    上一篇文章講解“vue.js指令v-pre+v-once”,本篇文章講解“計算屬性”。


    模板內的表達式非常便利,但是設計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如:

    「Vue.js開發連載十三」計算屬性


    瀏覽器訪問:

    「Vue.js開發連載十三」計算屬性


    在這個地方,模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到,這里是想要顯示變量message的翻轉字符串。當你想要在模板中多次引用此處的翻轉字符串時,就會更加難以處理。

    所以,對于任何復雜邏輯,你都應當使用計算屬性。

    「Vue.js開發連載十三」計算屬性


    【例】將字符串翻轉功能使用計算屬性實現。

    「Vue.js開發連載十三」計算屬性


    瀏覽器訪問:

    「Vue.js開發連載十三」計算屬性


    注意

    1. 每當this.message發生變化,reverseMessage會自動重新計算新值,綁定計算屬性的元素也會響應變化。

    2. 計算屬性是通過函數定義的返回值。

    當參與計算的屬性沒有發生變化,那么計算屬性是自動緩存的,無論是在模板還是js中調用計算屬性他都不會重新計算,這相比綁定表達式多次調用會被多次計算相比性能更優,試想想如果我們計算屬性內部的邏輯是處理1000條產品信息。建議大家實際開發中優先使用計算屬性。


    只讀的計算屬性

    剛剛我們說了計算屬性是有返回值的函數,所以一般情況下它都是只讀的,但是有些特殊情況也需要對計算屬性賦值,這時候計算屬性就不只是一個簡單的有返回值的函數(Function)了,而是一個對象(Object),對象的get屬性對應有返回值的函數,而set去響應對計算屬性寫的操作:

    「Vue.js開發連載十三」計算屬性


    瀏覽器訪問:

    「Vue.js開發連載十三」計算屬性


    雖然可以對寫操做進行響應,但是計算屬性是只讀的,所以在set中一般做的并不是去改變計算屬性的值,而是去操作其他屬性,比如自定義組件vmodel/vuex中都會經常用到這個set,現階段只要知道有這個set就可以,后續章節會慢慢展開。

    Vue.js連載為卓象程序員原創,轉載請聯系卓象程序員

    「Vue.js開發連載十三」計算屬性


    關注卓象程序員,定期發布技術文章

    下一篇講解“vue.js觀察者”

    「Vue.js開發連載十三」計算屬性
    热99re久久精品|天天综合网久久综合免费人成|91久久久久久久精品青草| 亚洲AV无码无一区二区Ⅰ久久|
    <xmp id="cogkk"><nav id="cogkk"></nav>
    <dd id="cogkk"></dd>
  • <menu id="cogkk"><menu id="cogkk"></menu></menu>
    <menu id="cogkk"><code id="cogkk"></code></menu>