vue watch普通監(jiān)聽和深度監(jiān)聽實(shí)例詳解(數(shù)組和對(duì)象)

下面通過一段代碼給大家介紹vue watch的普通監(jiān)聽和深度監(jiān)聽，具體代碼如下所示：

var vm=new Vue({

data:{

num:1,

obj:{

name:'三兒',

age:'21',

sex:'女'

}

},

watch:{

num(val, oldVal){

//普通的watch監(jiān)聽

console.log(“num: “+val, oldVal);

},

obj:{

//深度監(jiān)聽，可監(jiān)聽到對(duì)象、數(shù)組的變化

handler(val, oldVal){

console.log(“obj.name: “+val.name, oldVal.name);

},

deep:true

}

}

})

vm.num=2

vm.obj.name='二兒'

下面單獨(dú)給大家介紹下vue-watch 深度監(jiān)聽

watch:{} 對(duì)象，可監(jiān)聽數(shù)據(jù)，數(shù)據(jù)發(fā)生變化， 處理函數(shù)

目的： watch雖可監(jiān)聽，但只是淺監(jiān)聽，只監(jiān)聽數(shù)據(jù)第一層或者第二層，

何為第二層？

let obj = {name: 'xx', child: {age: 11}};

child之后的值就為第二層或者深層

實(shí)現(xiàn)目標(biāo): 如果 要監(jiān)聽一個(gè)對(duì)象中的屬性，屬性最高也是第二層了，watch可能監(jiān)聽不到，

所有要使用深度監(jiān)聽：

實(shí)現(xiàn)代碼:

watch: {

' user.phone ' : {

handel:function() { //特別注意，不能用箭頭函數(shù)，箭頭函數(shù)，this指向全局

處理函數(shù)

},

deep: true //深度監(jiān)聽

}

}

總結(jié)

以上所述是小編給大家介紹的vue watch普通監(jiān)聽和深度監(jiān)聽實(shí)例詳解(數(shù)組和對(duì)象)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)我們網(wǎng)站的支持！

時(shí)間： 2018-08-15

1.路由攜帶數(shù)據(jù)跳轉(zhuǎn) routerAction(hideDisplays, data) { switch (hideDisplays) { case "pubAccountMenu": this.$router.push({ name: "AppAccountInfo", }); break; //在菜單路由上存儲(chǔ)各種需要信息 case "publicDocInfoMenu": //菜單code: publicDocInfoMenu data.i

前言 創(chuàng)建 Vue 實(shí)例時(shí),Vue 將遍歷 data 的屬性,通過 ES5 的 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter,在其內(nèi)部 Vue 可以追蹤依賴.通知變化. const vm = new Vue({ data: {foo: 1} // 'vm.foo' (在內(nèi)部,同 'this.foo') 是響應(yīng)的 }) 觀察屬性變化 Vue 的實(shí)例提供了 $watch 方法,用于觀察屬性變化. const vm = new Vue({ data: {foo:

一.watch監(jiān)聽路由變化 解決辦法: export default{ data(){ return{} }, watch:{ "$route":"getPath" // 監(jiān)聽事件 }, methods:{ getPath(){ let path = this.$roune.path; //或得當(dāng)前路徑 進(jìn)行邏輯判斷 } } } 二.watch監(jiān)聽對(duì)象 例子:

watch除了可以監(jiān)聽數(shù)據(jù)的變化,路由的變化也能被其監(jiān)聽到 效果如下: 具體代碼 當(dāng)路由發(fā)生變化后,在watch中寫具體的業(yè)務(wù)邏輯 let vm = new Vue({ el: "#app", data: {}, router, watch: { '$route.path': function (newVal, oldVal) { if (newVal === '/login') { console.log('歡迎進(jìn)入登錄頁面'); } if (newVal === '/registe

watch本身很容易理解, watch負(fù)責(zé)將視圖中的數(shù)據(jù)與某個(gè)函數(shù)關(guān)聯(lián)起來 當(dāng)Vue視圖中的數(shù)據(jù)變化時(shí), 關(guān)聯(lián)的函數(shù)會(huì)被執(zhí)行

監(jiān)聽方法watch的使用

在 ES5中新增了不少新的API, 例如? 新增了 Object.xxx相關(guān)的方法,其中有一個(gè)定義屬性相關(guān)的 Object.defineProperty 這個(gè)方法(還有Object.defineProperties)這個(gè)方法是 vue框架實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽的核心方法,它的定義如下: Object.defineProperty([Object] obj, [String] propname, [Object] desp ) @param? obj? 要配置屬性的某個(gè)對(duì)象 @param propname

現(xiàn)在我們來看一下vue中的數(shù)據(jù)監(jiān)聽事件$watch, js代碼: new Vue({ el:"#div", data:{ arr:[1,2,3] } }).$watch("arr",function () { alert("數(shù)據(jù)改變了") }) html代碼:

React 中 本地調(diào)試React代碼的方法 yarn build 場景 假設(shè)有這樣一個(gè)場景,父組件傳遞子組件一個(gè)A參數(shù),子組件需要監(jiān)聽A參數(shù)的變化轉(zhuǎn)換為state. 16之前 在React以前我們可以使用 componentWillReveiveProps 來監(jiān)聽 props 的變換 16之后 在最新版本的React中可以使用新出的 getDerivedStateFromProps 進(jìn)行props的監(jiān)聽, getDerivedStateFromProps 可以返回 null 或者一個(gè)對(duì)象,如果

我們首先來看vue2.x中的實(shí)現(xiàn),為簡單起見,我們這里不考慮多級(jí)嵌套,也不考慮數(shù)組 vue2.x中的實(shí)現(xiàn) 其本質(zhì)是new Watcher(data, key, callback)的方式,而在調(diào)用之前是先將data中的所有屬性轉(zhuǎn)化成可監(jiān)聽的對(duì)象, 其主要就是利用Object.defineProperty,. class Watcher{ constructor(data, key, cb){ } } //轉(zhuǎn)換成可監(jiān)聽對(duì)象 function observe(data){ new Observer(d

在vue項(xiàng)目中,假使我們在同一個(gè)路由下,只是改變路由后面的參數(shù)值,期望達(dá)到數(shù)據(jù)的更新. mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中會(huì)用到this.id這個(gè)參數(shù),在同一頁面切換id的值,并不會(huì)觸發(fā)vue的聲明周期函數(shù). 可以添加路由監(jiān)聽: watch: { $route: { handler() { this.id = this.$route.query.id; this.get

下面給大家分享兩種方法來介紹Vue 實(shí)時(shí)監(jiān)聽窗口變化 windowresize,具體內(nèi)容如下所示: 方法一: First-step : 定義變量 data(){ return{ formLabelWidth : '123px' } }, Second-step:?? 根據(jù)生命周期 在mounted 中綁定 窗口變化 mounted(){ const that = this window.onresize = () => { return (() => { window.screenWidth

1.vue中監(jiān)聽對(duì)象數(shù)據(jù)屬性值的改變,可以使用深度監(jiān)聽 data () { return { form: { status: '', cpufrequency: '', systemstacksize: '', scalabilityclass: '' } } }, watch: { form: { // 深度監(jiān)聽 handler(val, oldVal){ console.log('currentForm',val, oldVal) // 但是這兩個(gè)值打印出來卻都是一樣的,因?yàn)樗鼈兊囊弥赶蛲?/p>

在html或jsp頁面中我們總能碰到監(jiān)聽DOM事件來觸發(fā)javaScript代碼,下面我們就簡單聊聊Vue.js中的監(jiān)聽事件是怎么處理的. 在vue.js中監(jiān)聽事件是通過v-on指令來實(shí)現(xiàn)的,先看一下簡單的監(jiān)聽事件代碼.

總結(jié)

以上是生活随笔為你收集整理的watch深度监听数组_vue watch普通监听和深度监听实例详解(数组和对象)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。