Vue的watch函数实现

妮妮喔妮

于 2025-06-29 15:41:45 发布

阅读量181

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_79982845/article/details/148998756

<script setup>
import { watch, ref, reactive, toRefs } from 'vue';

const count = ref(0);
const obj = reactive({
    name: '张三',
    age: 18
});

// 我们可以使用toRefs，将reactive对象中的属性转换为ref对象，保持响应性！！
const { name, age } = toRefs(obj);

watch([count, name, age], 
    ([newCount, newName, newAge], [oldCount, oldName, oldAge]) => {
        console.log(`count: ${oldCount} -> ${newCount}`);
        console.log(`name: ${oldName} -> ${newName}`);
        console.log(`age: ${oldAge} -> ${newAge}`);
    }
);
</script>

<template>
    <span>wacth函数的实现：</span>
    <button @click="count=3, obj.name='李四', obj.age=20">点我呀！</button>
</template>

在 Vue 3 中，toRefs 的作用是将响应式对象的每个属性转换为独立的 ref，这样在解构赋值时能够保持响应性。