Vue3的ref和reactive-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3的ref和reactive。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、ref的基本使用

2、reactive的基本使用

3、ref操作dom

4、ref与reactive的异同

1、ref的基本使用

ref创建数据可以是基本类型也可以是引用类型

ref函数创建响应式数据，返回值是一个对象

模版中使用ref数据,省略.value，js代码中不能省略

获取ref创建数据的值要加上.value

<script setup>
// ref函数创建响应式数据，返回值是一个对象
// 模版中使用ref数据,省略.value，js代码中不能省略
import { ref } from 'vue'
const obj =ref({
  name: '北京',
  desc: '政治文化中心'
})
// 修改城市的方法
const change = () => {
  obj.value.name = '上海'
}
</script>

<template>
  <div>Hello Vue3</div>
  <p>城市 {{ obj.name }}</p>
  <button @click="change">修改城市</button>
</template>

<style scoped></style>

2、reactive的基本使用

reactive创建响应式

reactive函数创建响应式数据，只支持引用数据类型

使用reactive响应式数据的时候，不需要.value

<script setup>
// reactive函数创建响应式数据，只支持引用数据类型
// 使用reactive响应式数据的时候，不需要.value


import { reactive } from 'vue'
const user = reactive({
  name: 'admin',
  pwd: '123456'
})
const changeUserName = () => {
  user.name = 'admin666' 
}
</script>

<template>
  <div>Hello Vue3</div>
  <p>姓名 {{ user.name }}</p>
  <button @click="changeUserName">修改姓名</button>
</template>

<style scoped></style>

3、ref操作dom

1、创建ref对象，将该对象作为ref的值

2、想获取谁，就再谁的标签上添加ref，其ref=‘ref对象’

<script setup >

import {ref} from 'vue'
// 创建ref对象
const eleref=ref()
const changeBackgroundColor=()=>{
eleref.value.style.backgroundColor='pink'
}

</script>

<template>
<div>hello,world</div>
<!-- ref='ref对象' -->
<p ref="eleref">pppp</p>
<button @click="changeBackgroundColor"> 改变背景色</button>

</template>

<style scoped>

</style>