老生常談vue2中watch的使用

更新時(shí)間：2024年01月31日 10:36:09 作者：coderkey

watch的基本用法是在Vue實(shí)例中定義一個(gè)watch對(duì)象,該對(duì)象內(nèi)部包含需要監(jiān)聽(tīng)的數(shù)據(jù)項(xiàng)和對(duì)應(yīng)的回調(diào)函數(shù)，這篇文章主要介紹了vue2中watch的使用,需要的朋友可以參考下

一，監(jiān)聽(tīng)基本普通屬性：

字符串，布爾值，number

（1）把要監(jiān)聽(tīng)的msg值看作方法名，來(lái)進(jìn)行監(jiān)聽(tīng)。

<template>
  <div id="app">
    <div>
      <button @click="btnClick">觸發(fā)</button>
      <div>{{ msg }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "codekey",
    }
  },
  methods: {
    btnClick() {
      this.msg = 'pink'
    }
  },
  watch: {
    // watch第一次綁定值的時(shí)候不會(huì)執(zhí)行監(jiān)聽(tīng)，修改數(shù)據(jù)才會(huì)觸發(fā)函數(shù)
    msg(newVal,oldVal) {
      console.log('oldVal:',oldVal)   // coderkey
      console.log('newVal:',newVal)   // pink
    }
  }
};
</script>

（2）把要監(jiān)聽(tīng)的msg值看作對(duì)象，利用hanler方法來(lái)進(jìn)行監(jiān)聽(tīng)

watch第一次綁定值的時(shí)候不會(huì)執(zhí)行監(jiān)聽(tīng)，如果需要第一次就執(zhí)行監(jiān)聽(tīng) 則需要設(shè)置：immediate: true

<template>
  <div id="app">
    <div>
      <button @click="btnClick">觸發(fā)</button>
      <div>{{ msg }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "codekey",
    }
  },
  methods: {
    btnClick() {
      this.msg = 'pink'
    }
  },
  watch: {
   //  如果需要第一次就執(zhí)行監(jiān)聽(tīng) 則需要設(shè)置：immediate: true
    msg: {
      handler(newVal,oldVal) {
        console.log('oldVal:',oldVal)  
        console.log('newVal:',newVal)  
      },
      immediate: true
    }, 
  }
};
</script>

二，監(jiān)聽(tīng)對(duì)象：

（1）監(jiān)聽(tīng)對(duì)象需要用到深度監(jiān)聽(tīng)，設(shè)置deep:true

<template>
  <div id="app">
    <div>
      <button @click="btnClick">觸發(fā)</button>
      <div>{{ obj.name }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        name: 'coderkey',
        age: 18
      },
    }
  },
  methods: {
    btnClick() {
     this.obj.name = 'pink'
    }
  },
  watch: {
    obj:{
    //  注意：屬性值發(fā)生變化后，handler執(zhí)行后獲取的 newVal 值和 oldVal 值是一樣的
      handler(newVal,oldVal) {
        console.log('oldVal:',oldVal)
        console.log('newVal:',newVal)
      },
      immediate: true,
      // 開(kāi)啟深度監(jiān)聽(tīng) deep
      deep: true
    }
  }
};
</script>

（2）可以只監(jiān)聽(tīng)對(duì)象的其中一個(gè)屬性值 ’對(duì)象.屬性‘ 的形式

<template>
  <div id="app">
    <div>
      <button @click="btnClick">觸發(fā)</button>
      <div>{{ obj.name }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        name: 'coderkey',
        age: 18
      },
    }
  },
  methods: {
    btnClick() {
     this.obj.name = 'pink'
    }
  },
  watch: {
    // 函數(shù)執(zhí)行后，獲取的 newVal 值和 oldVal 值不一樣
    'obj.name'(newVal,oldVal) {
      console.log('oldVal:',oldVal)    // coderkey
      console.log('newVal:',newVal)   // pink
    }, 
   /*  'obj.name':{
      handler(newVal,oldVal) {
        console.log('oldVal:',oldVal)
        console.log('newVal:',newVal)
      },
    // 立即處理 進(jìn)入頁(yè)面就觸發(fā)
      immediate: true
     }  */
  }
}
</script>

三，監(jiān)聽(tīng)數(shù)組

（1）（一維、多維）數(shù)組的變化不需要深度監(jiān)聽(tīng)

<template>
  <div id="app">
    <div>
      <button @click="btnClick">觸發(fā)</button>
      <!-- <div>{{ obj.name }}</div> -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
     arr1:[1,2,4,5,6]
    }
  },
  methods: {
    btnClick() {
      this.arr1.unshift(0)
    },
  },
  watch: {
    arr1:{
      handler(newVal,oldVal) {
        console.log('oldVal:',oldVal)    // [0,1,2,4,5,6]
        console.log('newVal:',newVal)   // [0,1,2,4,5,6]
      },
      // immediate: true,
     } 
  }
}
</script>

多維數(shù)組

<template>
  <div id="app">
    <div>
      <button @click="btnClick">觸發(fā)</button>
      <!-- <div>{{ obj.name }}</div> -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
     arr1:[1,2,4,[5,6]]
    }
  },
  methods: {
    btnClick() {
      this.arr1.push(0)
    },
  },
  watch: {
    arr1:{
      handler(newVal,oldVal) {
        console.log('oldVal:',oldVal)
        console.log('newVal:',newVal)
      },
      // immediate: true,
     } 
  }
}
</script>

（2）數(shù)組對(duì)象中對(duì)象屬性變化監(jiān)測(cè)需要使用deep:true深度監(jiān)聽(tīng)，多少層內(nèi)產(chǎn)生變化都可以監(jiān)測(cè)到。

<template>
  <div id="app">
    <div>
      <button @click="btnClick">觸發(fā)</button>
      <!-- <div>{{ obj.name }}</div> -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr1: [
				{
					name: 'coderkey',
					age: 22
				}
			],
			arr2: [
				{
					name: 'coderkey',
					age: 22,
					children: [
						{
							name: 'why',
							sex: 33
						}
					]
				}
			]
    }
  },
  methods: {
    btnClick() {
      this.arr1[0].name = 'pink'
      this.arr2[0].children[0].name = 'pink'
    },
  },
  watch: {
    arr1: {
			handler(newVal, oldVal) {
				console.log('newVal1', newVal);
				console.log('oldVal1', oldVal);
			},
			deep: true
		},
		arr2: {
			handler(newVal, oldVal) {
				console.log('newVal2', newVal);
				console.log('oldVal2', oldVal);
			},
			deep: true
		}
  }
}
</script>

四，監(jiān)聽(tīng)路由變化

// 方法一：
watch:{
  $router(to,from){
       console.log(to.path)
  }
}
// 方法二：
watch: {
   $route: {
     handler:  function (val, oldVal){
       console.log(val);
     },
     // 深度觀察監(jiān)聽(tīng)
     deep:  true
   }
},
// 方法三：
watch: {
   '$route' : 'getRoutePath'
},
methods: {
   getRoutePath(){
     console.log( this .$route.path);
   }
}

到此這篇關(guān)于老式常談vue2中watch的使用的文章就介紹到這了,更多相關(guān)vue2中watch使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: