針對vue wtach一次詳細的剖析

crossoverJie 發布于2019-08-23 18:05 / 2086人閱讀

摘要：提問深度與非深度的區別對象與數組與的區別的一個特點是，最初綁定的時候是不會執行的，要等到改變時才執行監聽計算。為一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象適用場景一個數據影響多個數據。

提問

1.深度watch與非深度watch的區別；
2.watch對象與數組；
3.watch與computed的區別；

immediate


   FullName: {{fullName}}
   FirstName: 

 
new Vue({
  el: "#root",
  data: {
    firstName: "Dawei",
    lastName: "Lou",
    fullName: ""
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName + " " + this.lastName;
    }
  } 
})

watch 的一個特點是，最初綁定的時候是不會執行的，要等到 firstName 改變時才執行監聽計算。那我們想要一開始就讓他最初綁定的時候就執行改怎么辦呢？我們需要修改一下我們的 watch 寫法，修改過后的 watch 代碼如下：

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + " " + this.lastName;
    },
    // 代表在wacth里聲明了firstName這個方法之后立即先去執行handler方法
    immediate: true
  }
}

注意到handler了嗎，我們給 firstName 綁定了一個handler方法，之前我們寫的 watch 方法其實默認寫的就是這個handler，Vue.js會去處理這個邏輯，最終編譯出來其實就是這個handler。而immediate:true代表如果在 wacth 里聲明了 firstName 之后，就會立即先去執行里面的handler方法，如果為 false就跟我們以前的效果一樣，不會在綁定的時候就執行。

deep

默認情況下 handler 只監聽obj這個屬性它的引用的變化，我們只有給obj賦值的時候它才會監聽到，比如我們在 mounted事件鉤子函數中對obj進行重新賦值，當需要監聽一個對象的改變時，普通的watch方法無法監聽到對象內部屬性的改變，此時就需要deep屬性對對象進行深度監聽。

watch: {
  obj: {
    handler(newName, oldName) {
      console.log("obj.a changed");
    },
    immediate: true,
    deep: true
  }

deep的意思就是深入觀察，監聽器會一層層的往下遍歷，給對象的所有屬性都加上這個監聽器，但是這樣性能開銷就會非常大了，任何修改obj里面任何一個屬性都會觸發這個監聽器里的 handler。

優化，我們可以是使用字符串形式監聽：

watch: {
  "obj.a": {
    handler(newName, oldName) {
      console.log("obj.a changed");
    },
    immediate: true,
    // deep: true
  }
}

注銷watch

為什么要注銷 watch？因為我們的組件是經常要被銷毀的，比如我們跳一個路由，從一個頁面跳到另外一個頁面，那么原來的頁面的 watch 其實就沒用了，這時候我們應該注銷掉原來頁面的 watch 的，不然的話可能會導致內置溢出。好在我們平時 watch 都是寫在組件的選項中的，他會隨著組件的銷毀而銷毀。
但是，如果我們使用下面這樣的方式寫 watch，那么就要手動注銷了，這種注銷其實也很簡單：

const unWatch = app.$watch("text", (newVal, oldVal) => {
  console.log(`${newVal} : ${oldVal}`);
})
unWatch(); // 手動注銷watch

app.$watch調用后會返回一個值，就是unWatch方法，你要注銷 watch 只要調用unWatch方法就可以了。

watch與computed的區別

computed：當頁面中有某些數據依賴其他數據進行變動的時候，可以使用計算屬性，需要注意的是，就算在data中沒有直接聲明出要計算的變量，也可以直接在computed中寫入。

computed: {  
            fullName: function () {  
                return this.firstName + " " + this.lastName  
            }  
        }

計算屬性默認只有getter，可以在需要的時候自己設定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]
            }
        }
    }

這個時候在控制臺直接運行vm.fullName = ‘bibi wang’，相應的firstName和lastName也會改變。
適用場景：一個數據受多個數據影響。
watch：watch用于觀察和監聽頁面上的vue實例，當然在大部分情況下我們都會使用computed，但如果要在數據變化的同時進行異步操作或者是比較大的開銷，那么watch為最佳選擇。watch為一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象

watch: {
            firstName: function (val) {
                this.fullName = val + " " + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + " " + val
            }
        }

適用場景：一個數據影響多個數據。

需要注意的是，computed是具有緩存的，這就意味著只要計算屬性的依賴沒有進行相應的數據更新，那么computed會直接從緩存中獲取值，多次訪問都會返回之前的計算結果。

版本號：V2.8.3
更新日期：2018-07-09

GPU云服務器云服務器 wtach 針對防火墻的攻擊針對網站的加速器針對學生的服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104647.html

有價值的前端技術點

摘要：借著產品層面的功能和視覺升級，我們用對它進行了一次技術重構。前端優化是一個讓人技術提升的，希望你也能從這里學到一些東西。年最流行的前端鏈接我們每周會給多名前端開發者發送新聞郵件。面試 -- 網絡 HTTP 現在面試門檻越來越高，很多開發者對于網絡知識這塊了解的不是很多，遇到這些面試題會手足無措。本篇文章知識主要集中在 HTTP 這塊。文中知識來自《圖解 HTTP》與維基百科，若有錯...

microelec 2019-08-26 11:32 評論0 收藏0
[Vue.js進階]從源碼角度剖析計算屬性的原理

摘要：前言最近在學習計算屬性的源碼，發現和普通的響應式變量內部的實現還有一些不同，特地寫了這篇博客，記錄下自己學習的成果文中的源碼截圖只保留核心邏輯完整源碼地址可能需要了解一些響應式的原理版本計算屬性的概念一般的計算屬性值是一個函數，這個函數showImg(https://user-gold-cdn.xitu.io/2019/5/6/16a8b98f1361f6f6); 前言最近在學習Vue計...

melody_lql 2019-05-23 17:30 評論0 收藏0
剖析Vue實現原理 - 如何實現雙向綁定mvvm（轉載）

摘要：接下來要看看這個訂閱者的具體實現了實現訂閱者作為和之間通信的橋梁，主要做的事情是在自身實例化時往屬性訂閱器里面添加自己自身必須有一個方法待屬性變動通知時，能調用自身的方法，并觸發中綁定的回調，則功成身退。本文能幫你做什么？1、了解vue的雙向數據綁定原理以及核心代碼模塊2、緩解好奇心的同時了解如何實現雙向綁定為了便于說明原理與實現，本文相關代碼主要摘自vue源碼, 并進行了簡化改造，...

nemo 2019-08-21 11:38 評論0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....

izhuhaodev 2019-08-21 11:44 評論0 收藏0