vue之watch監聽物件或者一個值時注意事項(深度觀察deep:true慎用!)
vue中想在某個值改變的時候能夠做一些其他事情,可以使用其提供的監聽機制,使用watch。注意,本篇不講技術問題,只是講解如何應用,因為筆者也是一個前端的小白
例:經手專案中就有使用,截圖如下:
下面來分析上面分別是怎樣實現監聽的:
其實除了畫紅線的地方,別的都沒什麼,就是按照這個格式,上圖中的status、cboxUseCoupon、displayVideo,包括params4.payWay都是頁面中的全域性引數,其中前面幾個都是單值,可以直接這樣監聽,回撥鉤子裡面有新的值和舊的值,當這些值改變的時候,就會進入到這個function中,需要注意畫出來的那個註釋,這也是我碰到的問題:
params4是個物件 監聽了物件裡面的payWay屬性,一開始採用了那個深度觀察:deep:true,出現的問題是物件的其他值變化的時候導致執行了我監聽payWay的handler ,註釋掉那段就可以了,猜想原因:覺得是下面加這個深度監聽後不止這個值改變會執行handler,當這個物件id或者是類似儲存地址改變了也會執行handler。
相關推薦
vue之watch監聽物件或者一個值時注意事項(深度觀察deep:true慎用!)
vue中想在某個值改變的時候能夠做一些其他事情,可以使用其提供的監聽機制,使用watch。注意,本篇不講技術問題,只是講解如何應用,因為筆者也是一個前端的小白 例:經手專案中就有使用,截圖如下: 下面來分析上面分別是怎樣實現監聽的: 其實除了畫紅線的地方,別的都沒什
Vue computed結合watch監聽物件其一屬性值的變化
var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch監聽 console.log("a: "+val, old
ue watch監聽物件及對應值的變化
var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch監聽
Vue使用watch監聽一個物件中的屬性
問題描述 Vue提供了一個watch方法可以讓使用者去監聽某些data內的資料變動,觸發相應的方法,比如 queryData: { name: '', creator: '', selectedStatus: '', t
VUE watch監聽物件
今天在專案實現中遇到了關於在Vue中watch監聽物件失敗的問題,背景是這樣的: 我在VUE元件中的data裡聲明瞭一個空物件: obj: { } 然後在某一個函式裡面對obj新增某個物件: obj.name = 'liu' 再在另一個函式裡,對obj的na
09.VUE學習之watch監聽屬性變化實現類百度搜索欄功能ajax異步請求數據
class ivr url 實現類 int php head 實現 sta cmd下安裝axios npm install axios 安裝好後,會多出node_modules文件夾 思路: 監聽data裏的word改變時,發送ajax異步請求數據, 把返回的數據賦值給d
09.1.VUE學習之watch監聽屬性變化實現類百度搜索欄功能ajax非同步請求資料,返回陣列
09.1html裡 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
Vue開發——watch監聽陣列、物件、變數
1.普通的watchdata() { return { frontPoints: 0 }},watch: { frontPoints(newValue, oldV
Vue的watch監聽事件
lln 觸發 doctype new mode last 變化 char ext Vue的watch監聽事件 相關Html: <!DOCTYPE html> <html lang="en"> <head> &l
vue利用watch監聽路由變化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <bod
Vue之資料監聽存在的問題
Vue之資料監聽 當資料監聽的是列表時,資料發生改變,不會被監聽到。 // 用$set修改陣列中的陣列能夠被監聽 // app.$set(this.hobby, 0, "愛你哦"); <div id="app"> {{name}} <hr> {
vue.js watch監聽,vue.js 監聽watch
vue.js watch監聽,vue.js 監聽watch ================================ ©Copyright 蕃薯耀 2018年12月06日 http://fanshuyao.iteye.com/ <
vue子元件監聽父元件傳值
vue父元件傳值,在父元件修改值,通知到子元件,其實就是觀察訂閱者模式vue的實現採用了watch方法具體的寫法如下:父元件<template> <load-list :param="param" cate="hide"></load-li
基於vue-cli的vue專案之路由3--watch監聽路由
有時候我們需要監聽路由,做出某種操作。。。程式碼主要在app.vue上 1.hello.vue頁面//獲取一個引數,第五行顯示 <template> <div class="hello"> <!--{{ this.$route.param
Vue學習之路(五)----Computed計算屬性與watch監聽
1.computed計算屬性常用於當value值變化時重新對值進行計算。舉個簡單的例子(當輸入框中的value值變化時,輸出結果為無數字的字串): //html <input type="text" v-model="value"/>{{value
Vue中的watch監聽
watch監聽用來監聽某個prop或data的改變,當它們發生變化時,就會觸發watch配置的函式,從而完成我們的業務邏輯。 watch監聽的資料的回撥函式有兩個引數可用,第一個就是新的值,第二就是舊的值。 1、watch監聽基本例子 <div> <p>Fu
Vue.js(13)- Watch監聽資料變化
watch 監聽的特點:監聽到某個資料的變化後,側重於做某件事情; 只要被監聽的資料發生了變化,會自動觸發 watch 中指定的處理函式; app.vue <template> <div> <p>姓名:<input type="t
vue中的watch監聽資料變化以及watch中各屬性詳解
1、watch使用的幾種方法(1)通過watch監聽data資料的變化,資料發生變化時,就會列印當前的值 watch: { data(val, newval) { console.log(val) console.log(newval) } }
vue偵聽器監聽物件中屬性的變化
<el-form-item label="油卡價格:" prop="petrolPrice"> <el-select v-model="priceForm.petrolPrice" placeholder="油卡價格">//監聽price
vue computed計算屬性和watch監聽屬性解疑答惑
computed計算屬性 計算屬性類似於方法,用於輸出data中定義的屬性資料的結果,data資料變化時,計算屬性的結果會同步變化,需要注意的是計算屬性不可與data定義的屬性同名。 相比於方法它的優勢是隻有當依賴的屬性變化時,才會重新計算。而方法會在每次重新rende