Vue3(ref与reactive)

一,ref创建_基本类型的响应式数据

在 Vue 3 中,ref是创建响应式数据的核心 API 之一

** ref的基本概念**

  • ref用于创建一个可变的响应式数据引用适用于任何类型的值(基本类型、对象、数组等)。
  • 通过ref包装的值会被转换为一个响应式对象 ,其值存储在.value属性中。

你想让谁是响应式数据就把谁用ref包装起来。

不过在使用ref之前我们需要先引入ref

vue 复制代码
//引入ref
import { ref } from 'vue'

在Vue模版中ref会自动展开.value

就像这样

vue 复制代码
//数据
let name = ref('张三');
let age = ref(18);
let address = '北京';
let tel = '123456789';

在JS中必须要通过.value属性访问和修改ref的值。

js 复制代码
//方法
function changeName(){
    name.value = '李四';
}
function changeAge(){
    age.value = 20;
}
function showTel(){
    console.log(tel);
}

我们可以通过volar插件自动添加.value

在vscode中的拓展中可以找到勾选上即可

目前来说模版就是上面的数据部分,JS就是方法部分,其他的后面再说。

二,reactive对象类型的数据

reactive跟ref差不多就是定义的类型不同,不过reactive只能定义对象类型的数据,但是ref可以定义任何类型的值。

示例:

vue 复制代码
<template>
    <div class="person">
      <h2>一辆{{ car.brand }},颜色是{{ car.color }},价格为{{ car.price}}</h2>
 <button @click="changePrice">加价</button>
 <br>
 
 <h2>游戏列表</h2>
 <!-- v-bind:key代表将后面双引号里的内容当成JS表达式来解析可以将v-bind省略只写一个:key -->
 <ul>
    <li v-for="g in games" v-bind:key="g.id"></li>
 </ul>
 <button @click="changeFirstGameName">
    修改第一个游戏的名字
 </button>
 </div>
</template>
<script lang="ts" setup name="Person">
import {reactive} from 'vue'
    //reactive可以定义数组
let car = reactive({brand : '梅赛德斯', color: 'red', price: 200000})
let games = reactive([{id: 1, name: '金铲铲之战'}, {id: 2, name: '原神'}, {id: 3, name: '王者荣耀'}])
function changePrice() {
    car.price += 10000
    console.log(car.price)
}
function changeFirstGameName() {
    games[0].name = '无畏契约'
}
</script>

但是用ref定义对象类型的数据,底层还是靠reactive来实现

三,reactive和ref的区别

区别:

1.ref创建的变量必须使用.value

2.reactive重新分配一个新对象,会失去响应式(可以使用Object.assign去整体替换)

vue 复制代码
function changeCar(){
Object.assign(car,{brand:'bwm',price:999999})
}

就像这样如果想要同时更改品牌和价格就需要这样写。

如果你使用reactive页面不会更新。

  • 使用原则

1,若需要一个基本类型的响应式数据,必须使用ref

2,若需要一个响应式对象,层级不深,ref,reactive都可以

3,若需要一个响应式对象,且层级较深,推荐使用reactive。

相关推荐
菜鸟学Python2 分钟前
Python web框架王者 Django 5.0发布:20周年了!
前端·数据库·python·django·sqlite
前端开发爱好者23 分钟前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
pe7er26 分钟前
RESTful API 的规范性和接口安全性如何取舍
前端·后端
Fly-ping34 分钟前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
墨迹的陌离1 小时前
【Linux】重生之从零开始学习运维之Mysql
linux·运维·服务器·数据库·学习·mysql
未来之窗软件服务2 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
拾光拾趣录2 小时前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http
阿华的代码王国2 小时前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器
2025年一定要上岸2 小时前
【pytest高阶】源码的走读方法及插件hook
运维·前端·python·pytest
姑苏洛言2 小时前
答题抽奖活动小程序技术复盘
前端