简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
个人简介
👀个人主页: 前端杂货铺
🙋♂️学习方向: 主攻前端方向,正逐渐往全干发展
📃个人状态: 研发工程师,现效力于中国工业软件事业
🚀人生格言: 积跬步至千里,积小流成江海
🥇推荐学习:🍍前端面试宝典 🎨100个小功能 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧
文章目录
- 前言
- Ref 响应式(基本数据类型)
- Reactive 响应式(对象类型)
- ref 对比 reactive
前言
重拾 Vue3,查缺补漏、巩固基础。
Ref 响应式(基本数据类型)
使用 ref 包裹,即可实现基本数据类型的响应式。
<template>
<div class="person">
<h2>{{ name }}</h2>
<h2>{{ age }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">查看联系方式</button>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
let name = ref("zhangsan");
let age = ref(18);
let tel = 18588888888;
function changeName() {
name.value = "zs";
}
function changeAge() {
age.value += 1;
}
function showTel() {
alert(tel);
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
Reactive 响应式(对象类型)
使用 reactive 包裹,即可实现基本数据类型的响应式。
<template>
<div class="person">
<h2>{{ car.brand }}: {{ car.price }}w</h2>
<button @click="changePrice">修改价格</button>
<ul v-for="item in person" :key="item.id">
<li>{{ item.name }}</li>
</ul>
<button @click="changeFirstName">修改第一个人的名字</button>
</div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
let car = reactive({ brand: "大奔", price: 80 });
let person = reactive([
{ id: 1, name: "zhangsan" },
{ id: 2, name: "lisi" },
{ id: 3, name: "zahuopu" },
]);
function changePrice() {
car.price += 10;
}
function changeFirstName() {
person[0].name = "hh";
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
ref 对比 reactive
ref 创建的变量必须使用 .value
,reactive 重新分配一个新对象,会失去响应式(可以通过 Object.assign 去替换整体)。
使用 reactive 实现对象响应式。
<template>
<div class="person">
<h2>{{ car.brand }}: {{ car.price }}w</h2>
<button @click="changeCarInfo">修改汽车信息</button>
</div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
let car = reactive({ brand: "大奔", price: 80 });
function changeCarInfo() {
Object.assign(car, { brand: "小米", price: 29.98 });
}
</script>
使用 ref 实现对象的响应式。
<template>
<div class="person">
<h2>{{ car.brand }}: {{ car.price }}w</h2>
<button @click="changeCarInfo">修改汽车信息</button>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
let car = ref({ brand: "大奔", price: 80 });
function changeCarInfo() {
car.value = { brand: "小米", price: 29.98 };
}
</script>
参考资料:
https://www.bilibili.com/video/BV1Za4y1r7KE?spm_id_from=333.788.player.switch&vd_source=f839085517d2b7548b2939bfe214d466&p=16