VUE中watch的详细使用教程(推荐!)
更新时间：2023年08月11日 11:31:51 作者：宠297
这篇文章主要给大家介绍了关于VUE中watch的详细使用教程,watch是vue实例的一个属性,主要用来监听数据的变化,并做出一些操作,需要的朋友可以参考下
1、watch是什么？
watch:是vue中常用的侦听器（监听器），用来监听数据的变化
2、watch的使用方式如下
watch: {
这里写你在data中定义的变量名或别处方法名: {
handler(数据改变后新的值, 数据改变之前旧的值) {
这里写你拿到变化值后的逻辑
}
}
}
3、watch监听简单案例（监听一个）
<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监听复杂单一案例（例：监听对象中的某一项）
<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页面进来就会立即执行，值需要设为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>进来页面后立即加载，效果图如下：
6、watch中deep 深度监听的用法和作用
1、作用：deep 用来监听data中的对象，值需要设为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);这种打印出来的是对象本身，如下图：
总结
到此这篇关于VUE中watch的详细使用教程的文章就介绍到这了,更多相关VUE watch使用教程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue的filters过滤器是比较常见的一个知识点，下面我将结合时间戳转换的例子带你快速了解filters的用法，感兴趣的朋友一起看看吧2021-09-09
这篇文章主要介绍了vue3中的响应式原理-effect，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue 表单之v-model绑定单选按钮radio的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了Vue.extend使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了Vue 收集表单数据方法详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
vue项目里面使用到的加密和解密的方法,本文主要介绍了vue中jsencrypt与base64加密解密的实用流程,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
下面小编就为大家分享一篇基于vue-resource jsonp跨域问题的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
解决vue js IOS H5focus无法自动弹出键盘的问题
今天小编就为大家分享一篇解决vue js IOS H5focus无法自动弹出键盘的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue中关于_ob_:observer的处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
对于浏览器来说,文本、图片等可以直接打开的文件,不会进行自动下载,下面这篇文章主要给大家介绍了关于Vue实现下载文件而非浏览器直接打开的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
最新评论