Vue中的計(jì)算屬性、方法與偵聽器源碼分析

這篇“Vue中的計(jì)算屬性、方法與偵聽器源碼分析”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue中的計(jì)算屬性、方法與偵聽器源碼分析”文章吧。

創(chuàng)新互聯(lián)公司是一家網(wǎng)站設(shè)計(jì)公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營產(chǎn)品：響應(yīng)式網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、成都營銷網(wǎng)站建設(shè)。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立，網(wǎng)絡(luò)互動的體驗(yàn)，以及在手機(jī)等移動端的優(yōu)質(zhì)呈現(xiàn)。成都網(wǎng)站建設(shè)、網(wǎng)站制作、移動互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運(yùn)營、VI設(shè)計(jì)、云產(chǎn)品.運(yùn)維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場的競爭激烈，認(rèn)真對待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價值服務(wù)。

需求：在 data 中，有 firstName 和 lastName 兩個內(nèi)容，頁面顯示“全名 fullName ”。

我們直接使用插值表達(dá)式就能實(shí)現(xiàn)這個需求：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>前端一萬小時-計(jì)算屬性、方法與偵聽器</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    {{firstName + ' ' + lastName}} <!-- 2??使用插值表達(dá)式展示全名。 -->
  </div>

  <script>
    var vm = new Vue({
      el: '#app',

      data: { // 1??在 data 中定義一組數(shù)據(jù)，里面有 firstName 和 lastName 兩個內(nèi)容；
        firstName: 'Oli',
        lastName: 'Zhao'
      }
    })
  </script>
</body>
</html>

Vue中的計(jì)算屬性、方法與偵聽器源碼分析

但需求是實(shí)現(xiàn)了，可同時模板上就有了一些邏輯。而模板本身是用來顯示就好，并不需要添加邏輯在里面！

理想的方式是在插值表達(dá)式中直接添加 fullName 變量來顯示全名：

<div id="app">
  {{fullName}}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'Oli',
      lastName: 'Zhao',
      fullName: 'Oli Zhao' // ??data 中添加了 fullName！
    }
  })
</script>

Vue中的計(jì)算屬性、方法與偵聽器源碼分析

可以看到，當(dāng)代碼這樣寫時也是沒有問題的。

但實(shí)際上代碼冗余了：原本 data 內(nèi)已經(jīng)有了 firstName 和 lastName ，可以用它們組合出全名，但又重新定義了一次 fullName 。

接下來，將介紹另外三種方法來解決這個需求。

1 計(jì)算屬性 `computed`

<div id="app">
  {{fullName}}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'Oli',
      lastName: 'Zhao'
    },

    computed: { // 1??計(jì)算屬性 computed 屬于 Vue 實(shí)例的方法，直接定義在實(shí)例中；

      fullName() { // 2??計(jì)算屬性的值 fullName 是一個函數(shù)；

        return this.firstName + ' ' + this.lastName // ??一定要寫上 return 把計(jì)算結(jié)果返回！
      }
    }
  })
</script>

使用計(jì)算屬性后，代碼完全不會冗余， fullName 是根據(jù) firstName 和 lastName 計(jì)算出來的，頁面上的效果也是一樣。 Vue中的計(jì)算屬性、方法與偵聽器源碼分析

計(jì)算屬性還有一個非常重要的知識點(diǎn)：

計(jì)算屬性會基于它們的響應(yīng)式依賴進(jìn)行緩存。

也就是說，當(dāng)計(jì)算屬性依賴的數(shù)據(jù)發(fā)生改變時，它會重新計(jì)算；若沒有變化時，則不計(jì)算，會一直使用上一次計(jì)算的結(jié)果（這樣也就提高了一些性能）。

在我們的代碼中，當(dāng) firstName 或 lastName 改變時，fullName 會重新計(jì)算，不變時則用緩存的上次計(jì)算結(jié)果。

<div id="app">
  {{fullName}}

  {{age}} <!-- 2??把 age 渲染到模板上； -->
  
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'Oli',
      lastName: 'Zhao',

      age: 18 // 1??data 中添加 age 為 18；
    },
    computed: {
      fullName() {
        console.log('計(jì)算了一次') // 3??每當(dāng)執(zhí)行時 console.log 一次。
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

保存刷新網(wǎng)頁后，可以看到計(jì)算屬性 計(jì)算了一次 。當(dāng)在控制臺輸入 vm.age = 20 更改 age 后，頁面重新渲染了，“18”變?yōu)榱恕?0”，但控制臺沒有再次輸出 計(jì)算了一次 ，即計(jì)算屬性沒有進(jìn)行重新計(jì)算。

Vue中的計(jì)算屬性、方法與偵聽器源碼分析

而當(dāng)我們更改 lastName 后，會重新計(jì)算一次：

Vue中的計(jì)算屬性、方法與偵聽器源碼分析

2 方法 `methods`

第二種是我們已經(jīng)非常熟悉的方法 methods：

<div id="app">

  <!-- ??注意：在插值表達(dá)式內(nèi)，計(jì)算屬性通過屬性的名字就可以用，但調(diào)用方法時，
	一定要加上 () 來進(jìn)行調(diào)用！ -->
  {{fullName()}}

  {{age}}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'Oli',
      lastName: 'Zhao',
      age: 18
    },

    methods: { // ??在 methods 中定義 fullName 方法，邏輯上與計(jì)算屬性一樣；
      fullName() { 
        console.log('計(jì)算了一次')
        return this.firstName + ' ' + this.lastName
      }
    }

  })
</script>

保存后，刷新頁面查看效果時，它會進(jìn)行一次計(jì)算。當(dāng)我們更改 age 時，它會再計(jì)算一次，更改 lastName 時也會進(jìn)行一次計(jì)算： Vue中的計(jì)算屬性、方法與偵聽器源碼分析

所以方法是沒有緩存機(jī)制的，只要頁面重新渲染， fullName 方法就會被重新執(zhí)行一次。

3 偵聽器 `watch`

當(dāng)使用偵聽器時，不可避免的會讓代碼冗余：

<div id="app">

  {{fullName}} <!-- 1??-②：插值表達(dá)式內(nèi)不需要 ()； -->

  {{age}}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'Oli',
      lastName: 'Zhao',
      fullName: 'Oli Zhao', // 1??-①：data 中定義 fullName；
      age: 18
    },

    watch: {  // 2??在實(shí)例中定義偵聽器 watch；

      firstName() { /*
      							2??-①：定義 firstName 方法，對 firstName 進(jìn)行偵聽，
                    當(dāng)它改變時，重新對 fullName 賦值；
                     */
        console.log('計(jì)算了一次')
        this.fullName = this.firstName + ' ' + this.lastName
      },

      lastName() { /*
      						 2??-②：定義 lastName 方法，對 lastName 進(jìn)行偵聽，
                   當(dāng)它改變時，重新對 fullName 賦值。
                    */
        console.log('計(jì)算了一次')
        this.fullName = this.firstName + ' ' + this.lastName
      }
    }

  })
</script>

保存后回到頁面刷新。當(dāng)?shù)谝淮芜M(jìn)入頁面時，因?yàn)槲覀冎匦露x過 fullName ，所以 watch 不會進(jìn)行計(jì)算就會顯示出來。在修改與 fullName 不想關(guān)的數(shù)據(jù) age 后，由于我們只用 watch 偵聽了 firstName 和 lastName ，所以也不會進(jìn)行計(jì)算。當(dāng)我們修改 lastName 時，則進(jìn)行一次計(jì)算：

Vue中的計(jì)算屬性、方法與偵聽器源碼分析

以上就是關(guān)于“Vue中的計(jì)算屬性、方法與偵聽器源碼分析”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱：Vue中的計(jì)算屬性、方法與偵聽器源碼分析
鏈接分享：http://jinyejixie.com/article42/ghojhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站、企業(yè)網(wǎng)站制作、服務(wù)器托管、外貿(mào)網(wǎng)站建設(shè)、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

Vue中的計(jì)算屬性、方法與偵聽器源碼分析

1 計(jì)算屬性 computed

2 方法 methods

3 偵聽器 watch

Vue中的計(jì)算屬性、方法與偵聽器源碼分析

1 計(jì)算屬性 `computed`

2 方法 `methods`

3 偵聽器 `watch`