watch属性监听器的作用在vue3.0中没有改变,还是监听值得变化。
在vue3.0中,仍然支持watch配置项。但是我们要在setup中使用watch得话,我们要导入watch的API,然后往watch函数中传参。
注意我们在setup中监视的数据要是响应式的,即数据要经过ref或者reactive处理。
当监视的基本类型的数据时,用法:watch("数据名",处理函数,配置对象(可省))
写一个例子:监视变量a的改变
- import { ref,watch } from "vue";
- let a=ref(20)
- //监听基本数据类型
- watch(a,(newvalue,oldvalue)=>{
- console.log("a原本为"+oldvalue+",被修改为"+newvalue);
- },{immediate:true})//初始加载页面就运行一次
-
- let changerandom=()=>{
- let sam=parseInt(Math.random()*100)-50
- console.log(sam);
- a.value+=sam
- }
-
-
- <template>
- <div>
- <p>{{a}}p>
- <button @click="changerandom">随机修改a的值button>
- div>
- template>
当我们第三个参数对象配置上immediate:true时,页面初始加载时就会调用一次监听打印,这时没有旧值就为undefined.
浏览器打印情况:
当点击按钮,a的value值-37,被监听到。
当监视的是引用数据类型时,用法也是:watch("数据名",处理函数,配置对象(可省))
不过当监听的是引用数据时,有几点需要注意:1、处理函数获取不了旧值,我们打印出来的跟新值一样,这是vue3.0的一个bug;2、引用数据内部默认开启深度监听,而且手动deep:false关闭不了。
写一个例子:
-
- import { reactive, ref,watch } from "vue";
- let obj=reactive({name:"张三",age:"40",school:"cqdx",degree:"professor"
- ,other:{hobby:"sing"}
- })
- //监听引用数据类型 默认开启了深度监听,而且无法关闭。同时获取不了旧值
- watch(obj,(newvalue,oldvalue)=>{
- console.log(newvalue,oldvalue);
- },{deep:false})//这里{deep:false}无效
-
- //改变引用对象的age属性
- let changeage=()=>{
- obj.age++
- }
-
- <template>
- <div>
- <p>{{obj.age}}p>
- <button @click="changeage">age加一button>
- div>
- template>
当点击按钮以后,检测到引用数据内部属性值的改变,浏览器控制台打印情况:
有关引用数据还有一个问题,当监听reactive处理过的引用数据内的一个引用数据时,这时它不具备默认深度监听,需要手动开启。并且如果要监听某个引用数据的属性,watch的第一个参数不再是写对象的引用,而是要写为函数的返回值的形式。
如监听上述例子的other属性,
-
- import { reactive,watch } from "vue";
- let obj=reactive({name:"张三",age:"40",school:"cqdx",degree:"professor"
- ,other:{hobby:"sing"}
- })
- watch(()=>obj.other,(newvalue,oldvalue)=>{
- console.log(newvalue,oldvalue);
- },{deep:true}) //如果不配置deep,则检测不到hobby的改变
-
- let changehobby=()=>{
- obj.other.hobby="dance"
- }
-
- <template>
- <div>
- <p>{{{obj.other.hobby}}p>
- <button @click="changehobby">改变兴趣button>
- div>
- template>