简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef

个人简介

👀个人主页: 前端杂货铺

🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展

📃个人状态: 研发工程师,现效力于中国工业软件事业

🚀人生格言: 积跬步至千里,积小流成江海

🥇推荐学习:🍍前端面试宝典 🎨100个小功能 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧

文章目录

    • 前言
    • [Ref 响应式(基本数据类型)](#Ref 响应式(基本数据类型))
    • [Reactive 响应式(对象类型)](#Reactive 响应式(对象类型))
    • [ref 对比 reactive](#ref 对比 reactive)

前言

重拾 Vue3,查缺补漏、巩固基础。

Ref 响应式(基本数据类型)

使用 ref 包裹,即可实现基本数据类型的响应式。

javascript 复制代码
<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 包裹,即可实现基本数据类型的响应式。

javascript 复制代码
<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 实现对象响应式。

javascript 复制代码
<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 实现对象的响应式。

javascript 复制代码
<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



相关推荐
java水泥工5 小时前
课程答疑系统|基于SpringBoot和Vue的课程答疑系统(源码+数据库+文档)
spring boot·vue·计算机毕业设计·java毕业设计·大学生毕业设计·课程答疑系统
IT教程资源C5 小时前
(N_157)基于springboot,vue服装商城系统
mysql·vue3·前后端分离·springboot服装商城
Sheldon一蓑烟雨任平生12 小时前
Vue3 组件 v-model
vue.js·vue3·v-model·definemodel·v-model修饰符·自定义双向绑定组件·多个v-model绑定
嗷呜~12 小时前
error 找不到模块“../views/Login.vue”或其相应的类型声明
typescript·vue3
加蓓努力我先飞13 小时前
Vue3小兔鲜-(二)
前端·javascript·css·vue3
阿洛学长17 小时前
高质量 AI 提示词之(从 0-1 开发 Vue 项目)
vue·ai编程·1024程序员节
IT教程资源D18 小时前
[N_149]基于微信小程序网上商城系统
mysql·vue·前后端分离·springboot网上商城·网上商城小程序
ytgytg2819 小时前
芋道源码:VUE3部署:避坑--验证码不现显示,管理后台无法访问后端接口等,完善中。。。
java·vue
学会煎墙1 天前
使用uniapp——实现微信小程序的拖拽排序(vue3+ts)
微信小程序·uni-app·vue·ts
神膘护体小月半1 天前
bug 记录 - 路由守卫 beforeRouteLeave 与 confirm 结合,不生效问题
javascript·vue