Vue3中使用ref与reactive创建响应式数据的示例代码
作者：布呐呐na
这篇文章主要介绍了Vue3中使用ref与reactive创建响应式数据的方法,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
1 ref创建：基本类型的响应式数据
使用ref将基本类型的数据变成一个RefImpl的实例对象，对象的value属性即为具体数值，函数修改时需要修改value属性，但是在模板中直接使用，不需要value：
<template>
<h1 class="home">首页</h1>
// 基本数据类型
<p>{{name}}</p>
<p>{{age}}</p>
<button @click="addAge">增加年龄</button>
</template>
<script setup lang="ts">
import {ref} from "vue";
let name = ref("张三")
let age = ref(18)
function addAge(){
age.value += 1
}
</script>2 ref创建：对象类型的响应式数据
ref既可以定义基础类型的数据，也可以定义对象类型的响应式数据，但是都必须加上.value：
<template>
<h1 class="home">首页</h1>
<p>我喜欢开{{car.name}}</p>
<button @click="changeCar">修改汽车</button>
</template>
<script setup lang="ts">
import {ref} from "vue";
// 数据
let car = ref({name: "AuDi", price: 1000000})
// 方法
function changeCar(){
car.value.name = car.value.name === "AuDi" ? "YaDi" : "AuDi"
}
</script>3 reactive创建：对象类型的响应式数据
使用reactive将对象类型数据变成一个Proxy的实例对象，将其变成响应式数据，其实不仅仅是对象类型，数组、集合等类型均可：
注：reactive只能创建对象类型的响应式数据
<template>
<h1 class="home">首页</h1>
// 对象数据类型
<p>我喜欢开{{car.name}}</p>
<button @click="changeCar">修改汽车</button>
<hr>
<h3>我喜欢的游戏：</h3>
// 数组数据类型
<ul>
<li v-for="item in games" :key="item.id">{{item.name}}</li>
</ul>
<button @click="changeFirstGame">改变第一个游戏</button>
<hr>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {reactive} from "vue";
// 数据
let car = reactive({name: "AuDi", price: 1000000})
let games = reactive([
{id: "001", name: "英雄联盟"},
{id: "002", name: "穿越火线"},
{id: "003", name: "洛克王国"}
])
// 方法
function changeCar(){
car.name = car.name === "AuDi" ? "YaDi" : "AuDi"
}
function changeFirstGame(){
games[0].name = "LOL"
}
</script>4 ref与reactive
当修改使用reactive创建的对象属性时，如果只修改对象的某个属性，则不会出现问题。如果修改整个对象比如：
function changeCar(){
car = {name: "YaDi", price: 1000}
} function changeCar(){
car = reactive({name: "YaDi", price: 1000})
}上面两种写法均无法修改数据，页面不会更新，数据失去了响应式。正确修改方式：
<template>
<h1 class="home">首页</h1>
<p>我喜欢开{{car.name}}，价值{{car.price}}元</p>
<button @click="changeCar">修改汽车</button>
</template>
<script setup lang="ts">
import {reactive} from "vue";
// 数据
let car = reactive({name: "AuDi", price: 1000000})
// 方法
function changeCar(){
Object.assign(car, {name: "YaDi", price: 1000})
}
</script>但是，使用ref创建的对象可以直接修改：
<template>
<h1 class="home">首页</h1>
<p>我喜欢开{{car.name}}，价值{{car.price}}元</p>
<button @click="changeCar">修改汽车</button>
</template>
<script setup lang="ts">
import {ref} from "vue";
// 数据
let car = ref({name: "AuDi", price: 1000000})
// 方法
function changeCar(){
car.value = {name: "YaDi", price: 1000}
}
</script>使用原则：
- 若需要一个基本数类型的响应式数据，必须用ref
- 若需要一个响应式对象，层级不深，ref、reactive都可以
- 若需要一个响应式对象，层级较深，推荐使用reactive
5 ref的另一个作用
ref标签属性
ref标签加到html标签上，可以直接拿到DOM元素：
<template>
<div>
<p ref="title">hello vue3</p>
<button @click="showTag">输出title标签的组件</button>
</div>
</template>
<script setup lang="ts">
import {ref} from 'vue';
// 创建一个title，用于存储ref标记的内容
let title = ref()
function showTag(){
console.log(title.value)
}
</script>当ref标签加到组件上，也可以拿到组件元素，但是vue3对其进行了保护措施：
<template>
<Home ref="qwe"/>
<button @click="showTag">获取组件</button>
</template>
<script setup lang="ts">
import Home from "./components/Home.vue"
import {ref} from "vue";
let qwe = ref()
function showTag(){
console.log(qwe.value)
}
</script>
获取的内容里并没有可用信息，需要Home组件暴露出信息，使用defineExpose指出可访问的信息：
<template>
<div>
<p ref="title">hello vue3</p>
<button @click="showTag">输出title标签的组件</button>
</div>
</template>
<script setup lang="ts">
import {ref,defineExpose} from 'vue';
// 创建一个title，用于存储ref标记的内容
let title = ref()
function showTag(){
console.log(title.value)
}
defineExpose({title})
</script>
6 toRefs与toRef
toRefs可以用来将对象类型数据解构，解构后的数据也是响应式数据：
注：原对象的数据也会跟随结构的数据的改变而改变！！！
<template>
<h1 class="home">首页</h1>
<p>{{name}}</p>
<p>{{price}}</p>
<button @click="changeCarName">修改车名</button>
<button @click="changeCarPrice">修改价格</button>
</template>
<script setup lang="ts">
import {reactive, toRefs} from "vue";
// 数据
let car = reactive({name: "AuDi", price: 1000000})
let {name,price} = toRefs(car)
// 方法
function changeCarName(){
name.value = "YaDi"
}
function changeCarPrice(){
price.value = 1000
}
</script>toRef的解构方式：
let car = reactive({name: "AuDi", price: 1000000})
let carName = toRef(car, 'name')
let carPrice = toRef(car, 'price')7 小贴士：
条件渲染的两种方式v-if和v-show的对比，两种方式实现的效果相同，但是渲染原理不同：
v-if：指令用于条件性地渲染一个元素。如果条件为真，元素将会被渲染到 DOM 中；如果条件为假，元素将不会被渲染。
v-show：它与v-if不同，在渲染时不管条件为真还是为假，都会渲染。但是会根据条件真假去决定显示还是隐藏。
v-if具有更高的切换开销，v-show具有更高的初始渲染开销。v-if 适用于条件不经常改变的场景，切换条件时的开销较大，因为需要重新渲染元素。v-show适用于条件经常改变的场景，切换条件时的开销较小，因为只是改变样式属性。
以上就是Vue3中使用ref与reactive创建响应式数据的示例代码的详细内容，更多关于Vue3 ref与reactive创建响应式数据的资料请关注脚本之家其它相关文章！