vue中watch的詳細用法

来源:https://www.cnblogs.com/baller/archive/2020/07/29/13396124.html

在vue中,使用watch來響應數據的變化。watch的用法大致有三種。 1. 常用用法 <input type="text" v-model="name"/> new Vue({ el: '#app', data: { name: '鹹魚' }, watch: { name(newVal,oldV ...


在vue中,使用watch來響應數據的變化。watch的用法大致有三種。

1. 常用用法

<input type="text" v-model="name"/>
new Vue({
  el: '#app',
  data: {
    name: '鹹魚'
  },
  watch: {
    name(newVal,oldVal) {
      // ...
    }
  } 
})

直接寫一個監聽處理函數,當每次監聽到 name 值發生改變時,執行函數。也可以在所監聽的數據後面直接加字元串形式的方法名:

watch: {
    name: 'nameChange'
    }
 } 

2 .立即執行(immediate和handler)

第一種用法watch有一個特點,就是當值第一次綁定的時候,不會執行監聽函數,只有值發生改變才會執行。如果我們需要在最初綁定值的時候也執行函數,則就需要用到immediate屬性。

比如當父組件向子組件動態傳值時,子組件props首次獲取到父組件傳來的預設值時,也需要執行函數,此時就需要將immediate設為true。

new Vue({
  el: '#app',
  data: {
    name: ''
  },
  watch: {
    name: {
      handler(newVal,oldVal) {
        // ...
      },
      immediate: true
    }
  } 
})

監聽的數據後面寫成對象形式,包含handler方法和immediate,之前我們寫的函數其實就是在寫這個handler方法;

immediate表示在watch中首次綁定的時候,是否執行handler,值為true則表示在watch中聲明的時候,就立即執行handler方法,值為false,則和一般使用watch一樣,在數據發生變化的時候才執行handler。

3 .深度監聽

當需要監聽複雜數據類型(對象)的改變時,普通的watch方法無法監聽到對象內部屬性的改變,只有data中的數據才能夠監聽到變化,此時就需要deep屬性對對象進行深度監聽。

<input type="text" v-model="person.name"/>
new Vue({
  el: '#app',
  data: {
    person: {id: 1, name: '鹹魚'}
  },
  watch: {
    person: {
      handler(newVal,oldVal) {
      // ...
    },
    deep: true,
    immediate: true
    }
  } 
})

設置deep: true 則可以監聽到person.name的變化,此時會給person的所有屬性都加上這個監聽器,當對象屬性較多時,每個屬性值的變化都會執行handler。如果只需要監聽對象中的一個屬性值,則可以做以下優化:使用字元串的形式監聽對象屬性:

watch: {
    'person.name': {
      handler(newVal,oldVal) {
      // ...
      },
      deep: true,
      immediate: true
    }
  }

這樣只會給對象的某個特定的屬性加監聽器。

數組(一維、多維)的變化不需要通過深度監聽,對象數組中對象的屬性變化則需要deep深度監聽。


您的分享是我們最大的動力!

更多相關文章
  • 最近在做一個頁面時,發現在 iPad 的 Safari 瀏覽器中背景顯示不全,定位到該 div 後發現所指定 css 的寬度為 100% ; 到百度搜索後發現,safari 中 viewport 預設寬度為 980px,若事先未指定其初始 viewport 寬度,則會預設按照 980px 處理。 可 ...
  • 我們在使用html編寫一個網站的時候,通常情況下頭部和尾部是相同的,如果一個網站的每個頁面都把這些代碼寫一遍,不僅浪費時間,還顯得重覆代碼很多,所以此時把重覆的頁面單獨摘出來,在用到的時候從外部直接引進去,就能節省很多時間,減少很多代碼。 在這裡,有好幾種引入html文件的方式,不過每種都是有利有弊 ...
  • 一:完整代碼 ;(function (w){ function createElement(type, attribute, ...childs){ //創建虛擬DOM let element = { type: '', attribute: {}, childs: [] }; element.ty ...
  • “智慧園區管控系統”基於物聯網生態體系操控平臺架構,利用新一代信息與通信技術來感知、監測、分析、控制、整合園區各個關鍵環節的資源,集成了光伏、變電站、停車場等管控場景界面,使各系統之間互聯、共用、智慧,實現了多信息協同聯動,為園區安全管理、業主便捷生活、物業信息化管理提供了有力保障。有效的降低了企業... ...
  • 俗話說:“物以類聚,人以群分”“近朱者赤,近墨者黑”;一個良好的文件夾存放規範,往往能給WEB開發團隊帶來整體的提高渲染效率、方便維護代碼等必不可少的效果。 | |文件夾命名 |存放說明 | | | | | |_root/根目錄 | | | | |cn |中文html文件 | | |css |層疊樣 ...
  • 作者: 凹凸曼 - 風魔小次郎 背景 Webpack 迭代到4.x版本後,其源碼已經十分龐大,對各種開發場景進行了高度抽象,閱讀成本也愈發昂貴。但是為了瞭解其內部的工作原理,讓我們嘗試從一個最簡單的 webpack 配置入手,從工具設計者的角度開發一款低配版的 Webpack。 開發者視角 假設某一 ...
  • 1.html 亂碼 1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 2.jsp 亂碼頁面開頭加入 <%@ page language="java" import="java.util.*" content ...
  • 輸入成績(0-100),不同的分數段獎勵不同while(true){var a=prompt('請輸入成績');if (a>=0&&a<=100){ break;}}if (a==100){ alert('獎勵一輛汽車')}else if (a>=80&&a<99){ alert('獎勵一本筆記本' ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...