關注【搜狐技術產品】公眾號，第一時間獲取技術干貨

作者介紹：

本期特邀作者：浪里行舟

Github博客2600 star作者，專注于前端領域。個人公眾號：「前端工匠」，致力于打造適合初中級工程師能夠快速吸收的一系列優質文章！

一、前言

一些初學者可能對計算屬性和偵聽屬性的使用場景感到困惑不解，本文主要介紹兩者的用法、使用場景及兩者的區別。

本文的代碼請猛戳github博客，紙上得來終覺淺，大家多動手敲敲代碼！

二、計算屬性

1.介紹

計算屬性是自動監聽依賴值的變化，從而動態返回內容。監聽是一個過程，在監聽的值變化時，可以觸發一個回調，并做一些事情。它有以下幾個特點：

• 數據可以進行邏輯處理，減少模板中計算邏輯
• 對計算屬性中的數據進行監視
• 依賴固定的數據類型（響應式數據）

計算屬性由兩部分組成：get和set，分別用來獲取計算屬性和設置計算屬性。默認只有get，如果需要set，要自己添加。另外set設置屬性，并不是直接修改計算屬性，而是修改它的依賴：

1computed: {2 fullName: {3 // getter4 get: function () {5 return this.firstName + ' ' + this.lastName6 },7 // setter8 set: function (newValue) {9 //this.fullName = newValue 這種寫法會報錯 10 var names = newValue.split(' ') 11 this.firstName = names[0]//對它的依賴進行賦值 12 this.lastName = names[names.length - 1] 13 } 14 } 15}

現在再運行 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName 也會相應地被更新。

2.計算屬性 vs 普通屬性

可以像綁定普通屬性一樣在模板中綁定計算屬性，但是它們在定義上有區別，即計算屬性的屬性值必須是一個函數：

1data:{ //普通屬性2 msg:'浪里行舟',3},4computed:{ //計算屬性5 msg2:function(){ //該函數必須有返回值，用來獲取屬性，稱為get函數6 return '浪里行舟';7 },8 reverseMsg:function(){9 //可以包含邏輯處理操作，同時reverseMsg依賴于msg,一旦msg發生變化，reverseMsg也會跟著變化 10 return this.msg.split(' ').reverse().join(' '); 11 } 12}

3.計算屬性 vs 方法

兩者最主要的區別：computed 是可以緩存的，methods 不能緩存；只要相關依賴沒有改變，多次訪問計算屬性得到的值是之前緩存的計算結果，就不會多次執行。網上有種說法就是方法可以傳參，而計算屬性不能，其實并不準確，計算屬性可以通過閉包來實現傳參：

1:data="closure(item, itemName, blablaParams)" 2computed: { 3 closure () { 4 return function (a, b, c) { 5 /** do something */ 6 return data 7 } 8 } 9}

三、偵聽屬性

Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動：偵聽屬性watch。Watch中可以執行任何邏輯，如函數節流、Ajax異步獲取數據，甚至操作 DOM（不建議）。

1.常規用法

1<template>2 <div class="attr">3 <h1>watch屬性</h1>4 <h2>{{ $data }}</h2>5 <button @click="() => (a += 1)">修改a的值</button>6 </div>7</template>8<script>9export default { 10 data() { 11 return { 12 a: 1, 13 b: { c: 2, d: 3 }, 14 e: { 15 f: { 16 g: 4 17 } 18 }, 19 h: [] 20 }; 21 }, 22 watch: { 23 a: function(val, oldVal) { 24 this.b.c += 1; 25 }, 26 "b.c": function(val, oldVal) { 27 this.b.d += 1; 28 }, 29 "b.d": function(val, oldVal) { 30 this.e.f.g += 1; 31 }, 32 e: { 33 handler: function(val, oldVal) { 34 this.h.push("浪里行舟"); 35 }, 36 deep: true //用于監聽e對象內部值的變化 37 } 38 } 39}; 40</script>

2.使用 watch 的深度遍歷和立即調用功能
使用 watch 來監聽數據變化的時候除了常用到的 handler 回調，其實還有兩個參數，它們是：

• deep 設置為 true 用于監聽對象內部值的變化
• immediate 設置為 true 將立即以表達式的當前值觸發回調

1<template>2 <button @click="obj.a = 2">修改</button>3</template>4<script>5export default {6 data() {7 return {8 obj: {9 a: 1, 10 } 11 } 12 }, 13 watch: { 14 obj: { 15 handler: function(newVal, oldVal) { 16 console.log(newVal); 17 }, 18 deep: true, 19 immediate: true 20 } 21 } 22} 23</script>

以上代碼我們修改了 obj 對象中 a 屬性的值，我們可以觸發其 watch 中的 handler 回調輸出新的對象，而如果不加 deep: true，我們只能監聽 obj 的改變，并不會觸發回調。同時我們也添加了 immediate: true 配置，其會立即以 obj 的當前值觸發回調。我們再看一個實際工作中常遇到的場景：組件創建的時候我們獲取一次列表的數據，同時監聽input框，每當發生變化的時候重新獲取一次篩選后的列表：

1created(){ 2 this.fetchPostList() 3}, 4watch: { 5 searchInputValue(){ 6 this.fetchPostList() 7 } 8}

有沒有辦法優化一下呢？

1watch: { 2 searchInputValue:{ 3 handler: 'fetchPostList', 4 immediate: true 5 } 6}

首先，在watchers中，可以直接使用函數的字面量名稱；其次，聲明immediate:true表示創建組件時要立馬執行一次。

四、兩者之間對比

從上面流程圖中，我們可以看出它們之間的區別：

• watch：監測的是屬性值， 只要屬性值發生變化，其都會觸發執行回調函數來執行一系列操作；
• computed：監測的是依賴值，依賴值不變的情況下其會直接讀取緩存進行復用，變化的情況下才會重新計算。

除此之外，有點很重要的區別是：計算屬性不能執行異步任務，計算屬性必須同步執行。也就是說計算屬性不能向服務器請求或者執行異步任務。如果遇到異步任務，就交給偵聽屬性。Watch也可以檢測computed屬性。

接下來我們看個用watch來實現防抖的例子：直到用戶停止輸入超過1秒后，才更新視圖：

1<template>2 <div>3 {{ fullName }}4 <div>firstName: <input v-model="firstName" /></div>5 <div>lastName: <input v-model="lastName" /></div>6 </div>7</template>8<script>9import { setTimeout } from "timers"; 10export default { 11 data: function() { 12 return { 13 firstName: "浪里行舟", 14 lastName: "前端工匠", 15 fullName: "浪里行舟 前端工匠" 16 }; 17 }, 18 watch: { 19 firstName: function(val) { 20 clearTimeout(this.firstTimeout); 21 this.firstTimeOut = setTimeout(() => { 22 this.fullName = val + " " + this.lastName; 23 }, 1000); 24 }, 25 lastName: function(val) { 26 clearTimeout(this.lastTimeout); 27 this.lastTimeOut = setTimeout(() => { 28 this.fullName = this.firstName + " " + val; 29 }, 1000); 30 } 31 } 32};

五、總結

計算屬性適合用在模板渲染中，某個值是依賴了其它的響應式對象甚至是計算屬性計算而來的；而偵聽屬性適用于觀測某個值的變化去完成一段復雜的業務邏輯。

• computed能做的，watch都能做，反之則不行
• 能用computed的盡量用computed

參考資料：

[1]珠峰架構課(強烈推薦)

[2]Vue 項目構建與開發入門

[3]Vue.js 組件精講

[4]前端面試之道

[5]Vue.js最佳實踐（五招讓你成為Vue.js大師）

加入搜狐技術作者天團，千元稿費等你來！

獲取更多資訊請關注微信公眾號【搜狐技術產品】，微信后臺聯系搜狐技術產品小助手。

總結

以上是生活随笔為你收集整理的oclick vue 传参 函数_详解Vue计算属性和侦听属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。