Hey小伙伴们～👋 今天要给你们种草的是Vue3中的超级神器——Ref、Reactive、Computed还有它们的进阶小伙伴toRef、toRefs！🌟 让你的前端开发技能瞬间升级，效率飞起！🚀
1.Ref：数据响应式的小确幸💖
想象一下，你有一个简单的数据需要响应式处理，Ref就是你的首选！它能让你的值拥有“被观察”的超能力！👀
下面是一个简单的Vue3应用示例，使用ref来创建一个响应式的计数器。当用户点击按钮时，页面上显示的数值会递增。
首先，确保你已经安装了Vue3，并在项目中设置好了基本配置。
Example.vue
<template>
<div>
<h1>Vue3 Ref 示例 🚀</h1>
<p>当前计数: {{ counter }}</p>
<button @click="increment">点击加一</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
// 使用ref创建一个响应式变量
const counter = ref(0);
// 定义一个方法来改变ref的值
const increment = () => {
counter.value++; // 通过.value访问和修改ref的值
};
</script>
<style scoped>
/* 可以添加一些样式美化 */
button {
background-color: #4CAF50;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
在这个例子中，我们使用ref创建了一个初始值为0的计数器counter。模板中直接绑定counter来显示其值，而按钮的点击事件则调用了increment方法，该方法使counter的值增加1。由于counter是响应式的，所以每当它的值发生变化时，绑定到这个值的DOM元素也会自动更新，展示最新的计数结果。
2. Reactive：对象&数组的魔法棒🧙♂️
如果Ref是单兵作战的勇士，那Reactive就是指挥千军万马的将军！它让对象和数组的每一个属性都变得可响应！
想象一下，你的店铺页面要有个炫酷的购物车，能随着用户选择实时变动，那咱们就动手用reactive来实现它吧！✨
👩💻代码演示时刻：
<template>
<div class="cart">
<h2>Vue3购物车组件🔥</h2>
<div v-for="(item, index) in cartItems" :key="index">
<img :src="item.image" alt="Product Image" />
<h3>{{ item.title }}</h3>
<p>价格: {{ item.price }} 元</p>
<button @click="decrement(index)">-</button>
<span>{{ item.quantity }}</span>
<button @click="increment(index)">+</button>
</div>
<p>总价: {{ totalPrice }} 元</p>
</div>
</template>
<script setup>
import { reactive, computed } from 'vue';
// 初始化购物车数据
const cartItems = reactive([
{ title: '时尚T恤', price: 99, quantity: 1, image: 'tshirt.jpg' },
{ title: '潮流牛仔裤', price: 199, quantity: 2, image: 'jeans.jpg' },
]);
// 计算总价的计算属性
const totalPrice = computed(() => {
return cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
});
// 数量增加方法
const increment = (index) => {
cartItems[index].quantity++;
};
// 数量减少方法
const decrement = (index) => {
if (cartItems[index].quantity > 1) {
cartItems[index].quantity--;
}
};
</script>
<style scoped>
.cart {
/* 添加一些购物车组件的样式 */
}
</style>
🌈解析时间：
这里，我们利用reactive让cartItems变成响应式对象，每当商品数量发生变化时，页面上的显示立即更新，无需手动刷新！并且，通过computed创建的totalPrice能够自动计算总价，保证了数据的实时性和准确性。
只需轻轻一点按钮，商品数量增减自如，购物车总价即刻刷新，是不是超酷？😍 快去给你的店铺也添上这样的购物车吧，销量up up不在话下！🚀
别忘了给我点个赞+关注，更多Vue3小技巧持续放送！😘
3. Computed：计算属性的智慧结晶💡
Computed属性，懒加载的高手，只在依赖变化时计算，完美平衡性能与优雅！
嘿，小伙伴们！今天要和你们分享一个Vue3的宝藏功能——computed属性，用它来制作一个吸引眼球的个性化折扣计算器，让你的粉丝们直呼内行！🤩
👩💻代码实战区：
<template>
<div class="discount-calculator">
<h2>Vue3个性折扣计算器✨</h2>
<label>
原价:<input type="number" v-model.number="originalPrice" />
</label>
<label>
折扣率:<input type="number" v-model.number="discountRate" step="0.01" />
</label>
<p>折后价格: {{ discountedPrice }} 元</p>
<button @click="applyDiscount">计算折扣</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
// 使用ref声明可变的原始价格和折扣率
const originalPrice = ref(100);
const discountRate = ref(0.9); // 初始折扣90%
// computed计算属性，根据原始价格和折扣率计算折后价格
const discountedPrice = computed(() => {
return originalPrice.value * discountRate.value;
});
// 应用折扣的模拟方法，实际上computed已自动处理
const applyDiscount = () => {
console.log('折扣已自动应用！');
};
</script>
<style scoped>
.discount-calculator {
/* 加入一些风格化的CSS */
}
</style>
🔍细节解读：
在这个爆款示例里，我们利用Vue3的computed创建了一个计算属性discountedPrice，它负责动态计算折后价格。无论用户怎样调整原价或折扣率，折后价格总能实时响应，无需手动调用任何方法——这就是computed的魅力所在！
输入框绑定到ref定义的变量上，保证了双向数据绑定的实时性。虽然我们定义了一个applyDiscount方法，但实际上它只是用来模拟一个操作过程，因为computed属性已经自动完成了所有计算逻辑。
快去试试这个小工具吧，让你的粉丝们在享受购物乐趣的同时，也感受到技术的魔力！🎉
Tips:.方法没有缓存，computed计算属性有缓存，可以加快计算。
4. toRef & toRefs：解构的艺术🖌️
处理嵌套对象时，toRef和toRefs让你轻松解构，保持响应性不丢失！
const user = reactive({ name: 'Alice', age: 30 });
// 使用toRef
const userNameRef = toRef(user, 'name');
// 使用toRefs
const { name, age } = toRefs(user);
这样，即使从复杂对象中解构出的每个属性，依然保持响应式，修改它们就像修改原对象一样流畅！🌊
好啦，今天的Vue3小课堂就到这里！希望这些小技巧能让你的代码更加灵动高效！别忘了实践出真知，动手试试看吧！✍️
记得点赞关注我，更多前端宝藏知识，下次见！👋
#Vue3技巧 #前端开发 #响应式编程
1741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
