Vue中watchEffect和computed的应用方式

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

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

<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}; 
    }
}
    

### Vue 3 中 `computed` 属性的使用 #### 概念 在 Vue 3 中,`computed` 是一种用于定义具有依赖关系的数据属性的方式。这些属性会基于其他响应式数据自动更新,并缓存其结果直到依赖发生改变[^1]。 #### Options API 中的使用 当采用传统的选项式API时,在组件内部通过声明一个名为 `computed` 的对象来创建计算属性。此对象内的每一个键都是一个新的计算属性名称,而对应的值则是一个函数或者 getter/setter 对象: ```javascript export default { data() { return { message: 'Hello' } }, computed: { reversedMessage() { return this.message.split('').reverse().join('') } } } ``` 上述例子展示了如何反转字符串类型的 `message` 变量[^3]。 #### Composition API 中的使用 对于组合式API而言,则利用 `ref`, `reactive` `computed` 函数来进行操作。这里不再局限于特定的对象结构,而是可以自由地将逻辑拆分并重用: ```javascript import { ref, computed } from 'vue' const count = ref(1) // 创建只读的计算属性 const plusOne = computed(() => count.value + 1) console.log(plusOne.value) // 输出:2 count.value++ console.log(plusOne.value) // 输出:3 ``` 这段代码片段说明了怎样在一个独立的作用域下构建计算属性以及它们是如何随着源变量的变化同步变化的。 #### 实际应用场景举例 ##### 购物车商品总价计算 假设有一个简单的购物车应用,其中包含多个产品及其单价数量。为了显示总金额给用户查看,可以通过如下方式实现: ```html <template> <div class="cart"> <!-- 显示每件物品 --> <ul v-for="(item, index) in items" :key="index"> {{ item.name }} - 单价:{{ item.price }} 数量:{{ item.quantity }} </ul> <!-- 总计 --> <p>总计:<strong>{{ totalPrice }}</strong></p> </div> </template> <script setup> import { reactive, computed } from 'vue'; let cartItems = reactive([ { name: '苹果', price: 5, quantity: 2 }, { name: '香蕉', price: 3, quantity: 4 } ]) const totalPrice = computed(() => cartItems.reduce((acc, curVal) => acc + (curVal.price * curVal.quantity), 0) ); </script> ``` 在这个案例中,每当任何一项产品的数量或价格发生变化时,`totalPrice` 都会被重新评估以反映最新的合计数值。 #### 用户输入表达式的解析与求解 另一个常见的场景是对用户的实时输入做即时反馈。比如允许他们输入数学公式并通过计算得出结果: ```html <template> <input type="text" placeholder="Enter expression..." v-model="expression"/> Result is: {{ result }} </template> <script setup> import { ref, watchEffect, computed } from 'vue'; const expression = ref(''); const result = computed(() => eval(expression.value)); </script> ``` 注意这里的 `eval()` 方法仅作演示用途;实际开发过程中应考虑更安全可靠的方案来执行自定义脚本。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值