欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中使用計(jì)算屬性的知識(shí)點(diǎn)總結(jié)

 更新時(shí)間：2021年12月05日 09:39:47   作者：青燈夜游  
在本篇文章里小編給大家整理了一篇關(guān)于Vue中使用計(jì)算屬性的知識(shí)點(diǎn)總結(jié)內(nèi)容，對(duì)此有興趣的朋友們可以跟著學(xué)習(xí)參考下。

計(jì)算屬性

有些時(shí)候，我們?cè)谀０逯蟹湃肓诉^多的邏輯，從而導(dǎo)致模板過重，且難以維護(hù)。例如：

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

碰到這樣的情況，我們必須看一段時(shí)間才能意識(shí)到，這里是想要顯示變量message的翻轉(zhuǎn)字符串，而且，一旦我們想要在模板中多次使用翻轉(zhuǎn)字符串時(shí)，會(huì)更加麻煩。 所以，當(dāng)我們處理復(fù)雜邏輯時(shí)，都應(yīng)該使用計(jì)算屬性。

基礎(chǔ)用法

計(jì)算屬性是Vue配置對(duì)象中的屬性，使用方式如下：

<div id="app">
   <!-- 計(jì)算屬性的值可以像data數(shù)據(jù)一樣，直接被使用 -->
  {{ someComputed }}
</div>
const vm = new Vue({
  el: '#app',
  computed: {
     // 返回的值，就是計(jì)算屬性的值
    someComputed () {
      return 'some values'
    }
  }
})

例如，我們想要獲取到一串字符串的翻轉(zhuǎn)字符串，我們可以利用計(jì)算屬性來做：

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻轉(zhuǎn)字符處啊: "{{ reversedMsg }}"</p>
</div>
const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello'
  },
  computed: {
    reversedMsg: function () {
      return this.msg.split('').reverse().join('');
    }
  }
})

我們可以看到，reversedMsg的值取決于msg的值，所以，當(dāng)我們更改msg的值是，reversedMsg的值也會(huì)隨之更改。

計(jì)算屬性 vs 方法

其實(shí)，我們上述的功能，利用方法也可以實(shí)現(xiàn)，如：

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻轉(zhuǎn)字符串: "{{ reversedMsg() }}"</p>
</div>
const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello'
  },
  methods: {
    reversedMsg: function () {
      return this.msg.split('').reverse().join('');
    }
  }
})

雖然在表達(dá)式中調(diào)用方法也可以實(shí)現(xiàn)同樣的效果，但是使用計(jì)算屬性和使用方法有著本質(zhì)的區(qū)別。 當(dāng)使用方法時(shí)，每一次頁(yè)面重新渲染，對(duì)應(yīng)的方法都會(huì)重新執(zhí)行一次，如：

<div id="app">
  <p>{{ name }}</p>
  <p>{{ reversedMsg() }}</p>
</div>
const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello',
    name: 'shanshan'
  },
  methods: {
    reversedMsg: function () {
      console.log('方法執(zhí)行啦');
      return this.msg.split('').reverse().join('');
    }
  }
})
vm.name = 'duyi';

在上面的例子中我們可以看到，一旦更改name的值，頁(yè)面會(huì)重新渲染，此刻控制臺(tái)中打印出方法執(zhí)行啦這串字符串，代表著reversedMsg這個(gè)函數(shù)執(zhí)行了，但是我們并不需要該方法執(zhí)行，因?yàn)楦膭?dòng)的數(shù)據(jù)和這個(gè)函數(shù)沒有任何關(guān)系，如果這個(gè)函數(shù)內(nèi)的邏輯很復(fù)雜，那么對(duì)于性能來講，也是一種消耗。

但是利用計(jì)算屬性做，就不會(huì)有這樣的現(xiàn)象出現(xiàn)，如：

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello',
    name: 'shanshan'
  },
  computed: {
    reversedMsg: function () {
      console.log('計(jì)算執(zhí)行啦');
      return this.msg.split('').reverse().join('');
    }
  }
})
vm.name = 'duyi';

此時(shí)可以看到，當(dāng)給數(shù)據(jù)name重新賦值時(shí)，計(jì)算屬性并沒有執(zhí)行。 所以，計(jì)算屬性和方法的最本質(zhì)的區(qū)別，是：計(jì)算屬性是基于響應(yīng)式依賴進(jìn)行緩存的，計(jì)算屬性的值一直存于緩存中，只要它依賴的data數(shù)據(jù)不改變，每次訪問計(jì)算屬性，都會(huì)立刻返回緩存的結(jié)果，而不是再次執(zhí)行函數(shù)。而方法則是每次觸發(fā)重新渲染，調(diào)用方法將總會(huì)再次執(zhí)行函數(shù)。

那么，為什么需要緩存呢？

假如說，我們有一個(gè)計(jì)算屬性A，它需要遍歷一個(gè)巨大的數(shù)組并且做巨大的計(jì)算。然后我們需要使用到這個(gè)計(jì)算屬性A，如果沒有緩存，我們就會(huì)再次執(zhí)行A的函數(shù)，這樣性能開銷就變得很大了。

深入計(jì)算屬性

計(jì)算屬性除了寫成一個(gè)函數(shù)之外，還可以寫成一個(gè)對(duì)象，對(duì)象內(nèi)有兩個(gè)屬性，getter&setter，這兩個(gè)屬性皆為函數(shù)，寫法如下：

const vm = new Vue({
  el: '#app',
  computed: {
    fullName: {
      getter () {
         // 一些代碼
      },
      setter () {
         // 一些代碼
      }
    }
  }
})

getter 讀取

在前面，我們直接將計(jì)算屬性寫成了一個(gè)函數(shù)，這個(gè)函數(shù)即為getter函數(shù)。也就是說，計(jì)算屬性默認(rèn)只有g(shù)etter。 getter的this，被自動(dòng)綁定為Vue實(shí)例。

何時(shí)執(zhí)行？

當(dāng)我們?nèi)カ@取某一個(gè)計(jì)算屬性時(shí)，就會(huì)執(zhí)行g(shù)et函數(shù)。

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello'
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split('').reverse().join('');
      }
    }
  }
})

setter 設(shè)置

可選，set函數(shù)在給計(jì)算屬性重新賦值時(shí)會(huì)執(zhí)行。 參數(shù)：為被重新設(shè)置的值。 setter的this，被自動(dòng)綁定為Vue實(shí)例。

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello',
    firstStr: ''
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split('').reverse().join('');
      },
      setter (newVal) {
        this.firstStr = newVal[0];
      }
    }
  }
})

要注意，即使給計(jì)算屬性賦了值，計(jì)算屬性也不會(huì)改變，在重復(fù)一遍，只有當(dāng)依賴的響應(yīng)式屬性變化了，計(jì)算屬性才會(huì)重新計(jì)算。

練習(xí)_姓名篩選

personArr: [
  { 
    name: '', 
    src: '.jpg', 
    des: '頸椎不好', 
    sex: 'm', 
    id: '056482'
  },
  { 
    name: '', 
    src: '.jpg', 
    des: '我是誰(shuí)', 
    sex: 'f', 
    id: '157894'
  },
  { 
    name: '', 
    src: '.jpg', des: '我長(zhǎng)得很好看', 
    sex: 'f', 
    id: '2849245'
  },
  { 
    name: '', 
    src: '.jpeg', 
    des: '你沒有見過陌生的臉', 
    sex: 'm', 
    id: '348515'
  },
  { 
    name: '', 
    src: '.jpeg', 
    des: '瓜皮劉', 
    sex: 'm', 
    id: '478454'
  }
]

練習(xí)_全選商品

courseList: [
  {
    poster: '.jpg',
    title: '',
    price: 1299,
    cart: 1,
    id: 0
  },
  {
    poster: '.jpg',
    title: '',
    price: 1148,
    cart: 1,
    id: 1595402664708
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1596305473062
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1595413512182
  },
  {
    poster: '.jpg',
    title: '',
    price: 12798,
    cart: 1,
    id: 1596302161181
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1596300025301,
  },
]

知識(shí)點(diǎn)擴(kuò)展：

實(shí)例擴(kuò)展

<div id="app1"></div>

    <div id="app2">
        {
<!-- -->{reverseMes}}
    </div>
let vm1 = new Vue({
            el:'#app1',
            data:{
                mes:'hello'
            }
        })

        let vm2 = new Vue({
            el:'#app2',
            computed: {
                reverseMes(){
                    // 使用實(shí)例 vm1中的data數(shù)據(jù)中心的 mes 去做反轉(zhuǎn)字符串的操作
                    return vm1.mes.split('').reverse().join('')
                }
            }
        })

實(shí)例vm1中的數(shù)據(jù)，vm2計(jì)算屬性也可以使用

自定義的計(jì)算屬性除了可以在插值表達(dá)式中使用，還可以在 v-bind: 屬性綁定中使用，用來做一些樣式的變換等等。

以上就是Vue中使用計(jì)算屬性的知識(shí)點(diǎn)總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于Vue中怎么使用計(jì)算屬性的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論