真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

  
{{ message.split('').reverse().join('') }}

data () {
  return {
    results: [
      {
        name: 'English',
        marks: 70
      },
      {
        name: 'Math',
        marks: 80
      },
      {
        name: 'History',
        marks: 90
      }
    ]
  }
}

computed: {
  totalMarks: function () {
    let total = 0
    let me = this
    for (let i = 0; i < me.results.length; i++) {
      total += parseInt(me.results[i].marks)
    }
    return total
  }
}

  
    
    Marks for {{ subject.name }}: {{ subject.marks }}
  

效果如下：

計(jì)算屬性 vs 方法

我們可以使用Vue中的 method 計(jì)算出學(xué)科的總分，最終得到的總數(shù)結(jié)果是相同的。

在上例的基礎(chǔ)上，我們把 computed 區(qū)塊中的 totalMarks 函數(shù)整體移到 methods 中。同時(shí)在模板中將 {{ totalMarks }} 替換成 {{ totalMarks() }} 。 你最終看到的結(jié)果是一樣的，如下所示：

let app = new Vue({
 el: '#app',
 data () {
  return {
   results: [
    {
     name: '英語',
     marks: 70
    },
    {
     name: '數(shù)學(xué)',
     marks: 80
    },
    {
     name: '歷史',
     marks: 90
    }
   ]
  }
 },
 methods: {
  totalMarks: function () {
   let total = 0
   let me = this
   for (let i = 0; i < me.results.length; i++) {
    total += parseInt(me.results[i].marks)
   }
   return total
  }
 }
})

雖然這兩種方式輸出的結(jié)果是相同的，但是性能將遭受毀滅性的打擊。使用這種方法， totalMarks() 方法在每次頁面渲染時(shí)都被執(zhí)行一次（例如，使用每一個(gè) change ）。

如果我們有一個(gè)計(jì)算屬性，那么Vue會(huì)記住計(jì)算的屬性所依賴的值（在我們這個(gè)示例中，那就是 results ）。通過這樣做，Vue只有在依賴變化時(shí)才可以計(jì)算值。否則，將返回以前緩存的值。這也意味著 只要 results 還沒有發(fā)生改變，多次訪問 totalMarks 計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。

上面兩個(gè)示例也說明，在Vue中 計(jì)算屬性是基于它們的依賴進(jìn)行緩存的，而方法是不會(huì)基于它們的依賴進(jìn)行緩存的。從而使用計(jì)算屬性要比方法性能更好。

這也同樣意味著下面的計(jì)算屬性將不再更新，因?yàn)?Date.now() 不是響應(yīng)式依賴：

computed: {
  now: function () {
    return Date.now()
  }
}

相比之下，每當(dāng)觸發(fā)重新渲染時(shí)，方法的調(diào)用方式將總是再次執(zhí)行函數(shù)。因此，函數(shù)必須是一個(gè)純函數(shù)。它不能有副作用。輸出只能依賴于傳遞給函數(shù)的值。

那么我們?yōu)槭裁葱枰彺?？假設(shè)我們有一個(gè)性能開銷比較大的的計(jì)算屬性 A ，它需要遍歷一個(gè)極大的數(shù)組和做大量的計(jì)算。然后我們可能有其他的計(jì)算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執(zhí)行 A 的 getter ！如果你不希望有緩存，請(qǐng)用方法來替代。

計(jì)算屬性的 setter

計(jì)算屬性默認(rèn)只有 getter ，不過在需要時(shí)你也可以提供一個(gè) setter ：

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

效果如下：

你在輸入框中輸入一個(gè) fullName ，然后點(diǎn)擊 set 按鈕，可以看到對(duì)應(yīng)的效果。你現(xiàn)在再運(yùn)行 app.fullName="Airen liao" 時(shí)，計(jì)算屬性的 setter 會(huì)被調(diào)用， app.firstName 和 app.lastName 也相應(yīng)地會(huì)被更新。如下圖所示：

觀察者

雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)候也需要一個(gè)自定義的 watcher 。這是為什么Vue通過 watch 選項(xiàng)提供一個(gè)更通用的方法，來響應(yīng)數(shù)據(jù)的變化。當(dāng)你想要在數(shù)據(jù)變化響應(yīng)時(shí)，執(zhí)行異步操作或開銷較大的操作，這是很有用的。

Vue確實(shí)提供了一種更通用的方式來觀察和響應(yīng)Vue實(shí)例上的數(shù)據(jù)變動(dòng)： watch 屬性 。當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動(dòng)而變動(dòng)時(shí)，你很容易濫用 watch 。然而，通常更好的想法是使用計(jì)算屬性而不是命令式的 watch 回調(diào)。比如下面的示例：

  {{ fullName }}


let app = new Vue({
  el: '#app',
  data () {
    return {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
    }
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

上面代碼是命令式的和重復(fù)的。將它與計(jì)算屬性的版本進(jìn)行比較：

let app = new Vue({
  el: '#app',
  data () {
    return {
      firstName: 'Foo',
      lastName: 'Bar'
    }
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

在Vue中使用異步計(jì)算屬性

Vue中的計(jì)算屬性非常好。它們?cè)试S你執(zhí)行復(fù)雜的操作或數(shù)據(jù)格式，同時(shí)大限度地執(zhí)行依賴項(xiàng)計(jì)算的性能，只在依賴更改時(shí)更新視圖。但遺憾的是，它們完全是同步的。

值得慶幸的是，有一個(gè)插件。使用vue-async-computed 包可以通地將一個(gè) promise 的值綁定到組件屬性來創(chuàng)建和使用組件中的異步計(jì)算屬性。

我們可以在項(xiàng)目的根目錄下通過 yarn 或 npm 來安裝 vue-async-computed 插件：

# Yarn
$ yarn add vue-async-computed
# NPM
$ npm i vue-async-computed --save

接下來在你的項(xiàng)目中開啟這個(gè)插件：

// main.js
import Vue from 'vue';
import AsyncComputed from 'vue-async-computed'
import App from 'App.vue';

Vue.use(AsyncComputed);

new Vue({
  el: '#app',
  render: h => h(App)
});

如果你和我一樣，對(duì)Vue的構(gòu)建工具不是很熟悉的話，我建議你使用Vue官方提供的構(gòu)建工具 Vue CLI 。默認(rèn)情況，它提供了五種模板，你可以根據(jù)自己喜歡的方式選擇自己需要的模板即可。

確認(rèn)在項(xiàng)目中引用 vue-async-computed 之后，咱們就可以開始使用這個(gè)插件了。使用如何使用這個(gè)插件之前，先來簡單的了解一些概念。

在Vue中標(biāo)準(zhǔn)計(jì)算屬性和異步屬性之間有一些區(qū)別：

• 異步屬性不能有 setter

• 直到 promise 的 resolve 為止，除非 default 被設(shè)置，否則該值為 null

在大多數(shù)情況下，你可以將它們視為返回 promise 的計(jì)算屬性。

使用ES7 / ES2016的 async / await ，這將變得更簡單：

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。