VUE中watch的詳細(xì)使用教程(推薦!)
1、watch是什么？
watch:是vue中常用的偵聽器（監(jiān)聽器），用來監(jiān)聽數(shù)據(jù)的變化
2、watch的使用方式如下
watch: {
這里寫你在data中定義的變量名或別處方法名: {
handler(數(shù)據(jù)改變后新的值, 數(shù)據(jù)改變之前舊的值) {
這里寫你拿到變化值后的邏輯
}
}
}
3、watch監(jiān)聽簡單案例（監(jiān)聽一個）
<template>
<div>
<div>
<input type="text" v-model="something">
</div>
</div>
</template>
<script>
export default {
name: "AboutView",
components: {},
data() {
return {
something: ""
}
},
watch: {
//方法1
"something"(newVal, oldVal) {
console.log(`新值：${newVal}`);
console.log(`舊值：${oldVal}`);
console.log("hellow world");
}
//方法2
"something": {
handler(newVal, oldVal) {
console.log(`新的值: ${newVal}`);
console.log(`舊的值: ${oldVal}`);
console.log("hellow world");
}
}
}
}
</script>在輸入框中輸入1、4 效果圖如下：
4、watch監(jiān)聽復(fù)雜單一案例（例：監(jiān)聽對象中的某一項）
<template>
<div>
<div>
<input type="text" v-model="obj.something">
</div>
</div>
</template>
<script>
export default {
name: "AboutView",
components: {},
data() {
return {
obj: {
something: ""
}
}
},
watch: {
"obj.something": {
handler(newVal, oldVal) {
console.log(`新的值: ${newVal}`);
console.log(`舊的值: ${oldVal}`);
console.log("hellow world");
}
}
}
}
</script>在輸入框中輸入4、5 效果圖如下：
5、watch中immediate的用法和作用
1、作用：immediate頁面進(jìn)來就會立即執(zhí)行，值需要設(shè)為true
2、用法如下方代碼所示：
<template>
<div>
<div>
<input type="text" v-model="obj.something">
</div>
</div>
</template>
<script>
export default {
name: "AboutView",
components: {},
data() {
return {
obj: {
something: ""
}
}
},
watch: {
"obj.something": {
handler(newVal, oldVal) {
console.log(`新的值: ${newVal}`);
console.log(`舊的值: ${oldVal}`);
console.log("hellow world");
}，
immediate:true
}
}
}
</script>進(jìn)來頁面后立即加載，效果圖如下：
6、watch中deep 深度監(jiān)聽的用法和作用
1、作用：deep 用來監(jiān)聽data中的對象，值需要設(shè)為true
2、用法如下方代碼所示：
<template>
<div>
<div>
<input type="text" v-model="obj.something">
</div>
</div>
</template>
<script>
export default {
name: "AboutView",
components: {},
data() {
return {
obj: {
something: ""
}
}
},
watch: {
"obj": {
handler(newVal, oldVal) {
console.log(`新的值: ${newVal}`);
console.log(`舊的值: ${oldVal}`);
console.log("hellow world");
}，
deep:true
}
}
}
</script>注意：
1、console.log(`新的值: ${newVal}`); 這種打印出來的是對象的類型，如下圖：
2、console.log(newVal);這種打印出來的是對象本身，如下圖：
總結(jié)
到此這篇關(guān)于VUE中watch的詳細(xì)使用教程的文章就介紹到這了,更多相關(guān)VUE watch使用教程內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue如何根據(jù)不同的環(huán)境使用不同的接口地址
這篇文章主要介紹了vue如何根據(jù)不同的環(huán)境使用不同的接口地址問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue+ElementUi實現(xiàn)點擊表格中鏈接進(jìn)行頁面跳轉(zhuǎn)與路由詳解
在vue中進(jìn)行前端網(wǎng)頁開發(fā)時,通常列表數(shù)據(jù)用el-table展示,下面這篇文章主要給大家介紹了關(guān)于Vue+ElementUi實現(xiàn)點擊表格中鏈接進(jìn)行頁面跳轉(zhuǎn)與路由的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
<el-button>點擊后如何跳轉(zhuǎn)指定url鏈接
這篇文章主要介紹了<el-button>點擊后如何跳轉(zhuǎn)指定url鏈接問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue開發(fā)中后臺系統(tǒng)復(fù)雜表單優(yōu)化技巧
這篇文章主要為大家介紹了vue開發(fā)中后臺系統(tǒng)復(fù)雜表單的優(yōu)化技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要給大家介紹了關(guān)于vue3使用base64加密的兩種方法,我們在vue項目中有時會使用到Base6464轉(zhuǎn)碼,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
vue3+vite中報錯信息處理方法Error: Module “path“ has&nb
這篇文章主要介紹了vue3+vite中報錯信息處理方法Error: Module “path“ has been externalized for browser compatibility...,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
vue前端實現(xiàn)導(dǎo)出頁面為word的兩種方法代碼
在前端開發(fā)中我們常常需要將頁面頁面為word文件,這篇文章主要給大家介紹了關(guān)于vue前端實現(xiàn)導(dǎo)出頁面為word的兩種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細(xì)介紹了vue中使用svg封裝全局消息提示組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
element plus el-form雙列布局及拓展任意布局的實現(xiàn)
本文介紹了如何實現(xiàn)和拓展一個雙列布局的人員信息表單,并通過封裝el-form和Layout.vue組件,實現(xiàn)了更加靈活和可擴(kuò)展的表單布局2026-02-02
這篇文章主要為大家詳細(xì)介紹了vue Draggable實現(xiàn)拖動改變順序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04