Vue3 watch监听属性与多属性监听

toRefs

基本功效和toRef一样,只不过这里使用解构的思想,让原对象内的属性转换为ref对象后各自使用;
如下代码将原obj对象内两个属性foo boo直接转变为ref对象来使用!

<script setup lang="ts">
import { toRefs,reactive } from 'vue';
let obj = reactive({
    foo:1,
    boo:2
})
let {foo,boo} = toRefs(obj)
const change = ()=>{
    foo.value++
    boo.value++
}
script>

还有一个toRaw()方法,它的作用是把响应式对象(如reactive)变回原始对象


watch监听属性

单个watch接收三个属性

  1. 参数一:具有响应式的对象,如reactive对象
  2. 参数二:关于对象内部属性变化的回调函数,有新旧两个形参
  3. 参数三:监听属性控制,deep表示深度监听,immediate表示一启动页面立即开始监听
<script setup lang="ts">
import { ref, watch, reactive } from 'vue';
let message = reactive({
    name: 'helloworld'
})
watch(message, (newVal, oldVal) => {
    console.log(newVal);
    console.log(oldVal);
}, {
    deep: true,
    immediate: true
})
script>

当侦听对象内有多个属性时,参数一可以写成箭头函数的形式显示指定我们要监听的属性名称;
如果不这样做,那就会全部监听

<script>
let message = reactive({
    name: 'helloworld',
    name2: 'none'
})
watch(()=>message.name2, (newVal, oldVal) => {
    console.log(newVal);
})
script>

watchEffect多属性监听

不同于watch,它采用监听对象和监听方法相结合的形式;

  1. watchEffect接收一个函数,有一个参数evt,把该参数写成箭头函数后即可在里面写入监听开始前要执行的代码
  2. 剩余空间直接写当某参数变化时做出的监听
  3. 把watchEffect设置为一个变量,而后用函数的形式调用它时就会停止监听
  4. 还有附加参数,flush表示副作用作用时期(即执行附加参数的时机),有三个:
    pre 监听更新前执行, sync同时进行, post监听更新后执行
    之后只需要在附加参数里写方法即可在对应时间段触发!

onTrigger方法为vue协助开发者测试的

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
let msg1 = ref<string>('name')
let msg2 = ref<string>('age')

const wc = watchEffect((evt) => {
    // 设置监听前要做的事
    evt(() => {
        console.log('正在执行多属性监听');
    })
    console.log("msg1 is changed:" + msg1.value);
}, {
    flush: 'post',
    onTrigger() {
        debugger
    }
})

const stopWatch = () => wc()    // 停止监听
script>

你可能感兴趣的:(#,Vue,vue.js,javascript,前端)