Vue中watchEffect和computed的应用方式

最新推荐文章于 2024-09-15 16:33:50 发布

原创最新推荐文章于 2024-09-15 16:33:50 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

Vue3笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Vue中响应式原理的应用，包括使用ref和reactive创建响应式变量，通过watch和watchEffect监听变量变化，以及利用computed实现计算属性。并通过具体示例展示了如何在实际项目中运用这些技术。

<template>
    <div>
        <h2>{{counter}}</h2>
        <button @click="changeCounter"></button>
        <h3>{{user.name}}</h3>
        <button @click="cheangeUserName">改变user名字</button>
    </div>
</template>

<script >
// reactive可以引用对象类型
 import { reactive, computed } from 'vue';

export default{

    setup(props, context) {
        
        const counter = ref(0)
        function changeCounter(){
            counter.value++
        }
       
       const suser = reactive({
            name:"阿斯顿",
            age:10
        })

        function cheangeUserName(){
            user.name="李四"
        }
        //watch(侦听的响应式引用，回调函数)
        watch(counter,(newval,oldval)=>{
            console.log("newval-----------",newval);
            console.log("oldval-----------",oldval);
        })

        //watchEffect（回调函数）注意不需要指点监听属性，组件初始化的时候会执行一次回调，自动手机依赖
        watchEffect(()=>{
            console.log("newval-----------",newval);
            console.log("oldval-----------",oldval);
        })

        // watch和watchEffect的区别
        // 1.watchEffect不需要指定监听的属性，自动手机依赖，只要在回调中引用响应式的属性，只要这些属性发生改变，回调就会发生改变
        

        //computed的用法
        const msg = ref("helloworld")
        const reverseMsg=computed(()=>{
            return msg.value.split("").reverse().join("")
        })

        const user = reactive({
            name:"张三",
            age:44,
            reverseMsg:computed(()=>{
                return msg.value.split("").reverse().join("")
            })
        })
        return{counter,changeCounter,user}; 
    }
}