Vue3.0 watch与watchEffect的区别

最新推荐文章于 2025-04-08 16:53:45 发布

@huihui_new

最新推荐文章于 2025-04-08 16:53:45 发布

阅读量960

点赞数 1

文章标签： vue watch

本文链接：https://blog.youkuaiyun.com/m0_52544128/article/details/114160615

版权

博客涉及Vue和watch相关信息技术内容，但具体内容缺失。Vue是前端开发框架，watch可用于监听数据变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 40</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
    </style>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    // watch 侦听器
    // watchEffect 侦听器，偏向于effect
    const app = Vue.createApp({
        setup() {
            const { ref, watch, reactive, toRefs, watchEffect } = Vue;
            const nameObj = reactive({ name:'del' });
            // const name = ref('dell');
            //具备一定的惰性 lazy
            //参数可以拿到原始和当前值
            //可以侦听多个数据的变化，用一个侦听器承载
            // watch(name, (currentValue, prevValue) => {
            //     console.log(currentValue, prevValue)
            // })
            // watch(() => nameObj.name, (currentValue, prevValue) => {
            //     console.log(currentValue, prevValue)
            // });

            //立即执行，没有惰性 immediate
            //不需要传递你要侦听的内容，自动会感知代码依赖，不需要传递很多参数，只要传递一个回调函数
            //watchEffect 不能获取之前数据的值
            watchEffect(() => {
                console.log(nameObj.name)
            })
            const { name } = toRefs(nameObj);
            return { name };
        },
        template:
            `<div>
               Name:<input v-model="name" />
            </div>
            <div>
               Name is {{name}}
            </div>`,
    });
    
    const vm = app.mount('#root');
    
</script>
</html>