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。

相关推荐
止观止18 分钟前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall19 分钟前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴24 分钟前
简单入门Python装饰器
前端·python
新中地GIS开发老师43 分钟前
新发布:26考研院校和专业大纲
学习·考研·arcgis·大学生·遥感·gis开发·地理信息科学
袁煦丞1 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码1 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
SH11HF1 小时前
小菜狗的云计算之旅,学习了解rsync+sersync实现数据实时同步(详细操作步骤)
学习·云计算
Frank学习路上2 小时前
【IOS】XCode创建firstapp并运行(成为IOS开发者)
开发语言·学习·ios·cocoa·xcode
鱼樱前端3 小时前
今天介绍下最新更新的Vite7
前端·vue.js
Chef_Chen3 小时前
从0开始学习计算机视觉--Day07--神经网络
神经网络·学习·计算机视觉