vue3定义响应式数据(ref,reactive)

一 ref 定义响应式数据

在 Vue 3 中,ref 是一个用于创建响应式数据的 API。ref 可以用来使普通的 JavaScript 值(如字符串、数字、对象等)变得响应式,从而在 Vue 的模板中使用和自动更新。

  1. 基本用法
  • 导入 ref:首先,你需要从 Vue 中导入 ref。
  • 创建响应式数据:使用 ref 创建一个响应式的值。
  • 访问和更新响应式数据:你可以通过 .value 属性来访问和更新响应式数据。
  1. **作用:**定义响应式变量。
  2. 语法: let xxx = ref(初始值)
  3. **返回值:**一个RefImpl的实例对象,简称ref对象refref对象的value属性是响应式的
  4. 注意点:
  • JS中操作数据需要:xxx.value,但模板中不需要.value,直接使用即可。
  • 对于let name = ref('张三')来说,name不是响应式的,name.value是响应式的。
  1. ref 创建:基本类型的响应式数据:
javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 ref 示例</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <p>当前计数: {{ count }}</p>
        <button @click="increment">增加计数</button>
    </div>

    <script>
        const { ref, createApp } = Vue;

        createApp({
            setup() {
                // 创建一个响应式的计数器
                const count = ref(0);

                // 定义增加计数的函数
                function increment() {
                    count.value++;
                }

                // 返回响应式数据和方法以供模板使用
                return {
                    count,
                    increment
                };
            }
        }).mount('#app');
    </script>
</body>
</html>
  1. ref 创建:对象类型的响应式数据:
javascript 复制代码
const { ref, createApp } = Vue;

createApp({
    setup() {
        const state = ref({
            name: 'Alice',
            age: 30
        });

        const items = ref([1, 2, 3]);

        function updateName(newName) {
            state.value.name = newName;
        }

        function addItem(item) {
            items.value.push(item);
        }

        return {
            state,
            items,
            updateName,
            addItem
        };
    }
}).mount('#app');

二 reactive定义响应式数据

在 Vue 3 中,reactive 是一个用于创建响应式对象的 API。与 ref 主要用于处理基本数据类型不同,reactive 适用于处理更复杂的数据结构,如对象和数组。使用 reactive 创建的对象会对其属性的变化进行响应式更新。

  • 作用:定义一个响应式对象 (基本类型不要用它,要用ref,否则报错)
  • 语法: let 响应式对象= reactive(源对象)
  • **返回值:**一个Proxy的实例对象,简称:响应式对象。
  • 注意点: reactive定义的响应式数据是"深层次"的。
javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 reactive 示例</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <p>姓名: {{ state.name }}</p>
        <p>年龄: {{ state.age }}</p>
        <button @click="updateName('Bob')">更改姓名</button>
        <button @click="incrementAge">增加年龄</button>
    </div>

    <script>
        const { reactive, createApp } = Vue;

        createApp({
            setup() {
                // 创建一个响应式对象
                const state = reactive({
                    name: 'Alice',
                    age: 30
                });

                // 更新对象的属性
                function updateName(newName) {
                    state.name = newName;
                }

                function incrementAge() {
                    state.age++;
                }

                // 返回响应式对象和方法以供模板使用
                return {
                    state,
                    updateName,
                    incrementAge
                };
            }
        }).mount('#app');
    </script>
</body>
</html>

说明

  1. 创建响应式对象:
  • const state = reactive({ name: 'Alice', age: 30 }); 将一个包含 name 和 age
    属性的对象转化为响应式对象。
  1. 访问和更新响应式对象:
  • 在模板中,你可以直接使用 state.name 和 state.age。 在 JavaScript 代码中,你可以直接通过 state.name 和 state.age 访问和修改这些属性。
  1. 响应式更新:
  • 当你更新 state 对象的属性时,例如调用 updateName('Bob') 或 incrementAge(),Vue会自动更新视图。

三 ref 和reactive 的区别

宏观角度看:

  1. ref用来定义:基本类型数据对象类型数据
  2. reactive用来定义:对象类型数据
  • 区别:
  1. ref创建的变量必须使用.value(可以使用volar插件自动添加.value)。
  2. reactive重新分配一个新对象,会失去 响应式(可以使用Object.assign去整体替换)。
  • 使用原则:
  1. 若需要一个基本类型的响应式数据,必须使用ref
  2. 若需要一个响应式对象,层级不深,refreactive都可以。
  3. 若需要一个响应式对象,且层级较深,推荐使用reactive

ref

  1. 用途:
  • 用于创建对基本数据类型(如 string、number、boolean)的响应式引用。
  • 也可以用于创建对对象或数组的响应式引用,但在这种情况下,ref 本身是对对象或数组的一个"包裹"。
  1. 创建方式:
javascript 复制代码
const value = ref(initialValue);
  1. 访问和更新:
  • 对于基本数据类型,使用 .value 进行访问和更新。例如:value.value = 10
  • 对于对象或数组,可以使用 .value 访问和修改它们的内容,但 .value 只是用于访问 ref包裹的内容。具体的更新和访问内容会通过 .value 进行。

reactive

1 用途:

  • 用于创建对复杂数据结构(如对象和数组)的响应式引用。
  • 自动将整个对象或数组的属性变为响应式,而不需要显式地使用 .value。

2 创建方式:

javascript 复制代码
const state = reactive(initialObject);

3 访问和更新:

  • 直接通过对象或数组的属性访问和更新,不需要 .value。例如:state.name = 'Alice'

四 toRefs 与 toRef

  • 作用 :将一个响应式对象中的每一个属性,转换为ref对象。
  • 备注toRefstoRef功能一致,但toRefs可以批量转换。
  • 语法如下
java 复制代码
<template>
  <div class="person">
    <h2>姓名:{{person.name}}</h2>
    <h2>年龄:{{person.age}}</h2>
    <h2>性别:{{person.gender}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>

<script lang="ts" setup>
  import {ref,reactive,toRefs,toRef} from 'vue'

  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
	
  // 通过toRefs将person对象中的n个属性批量取出,且依然保持响应式的能力
  let {name,gender} =  toRefs(person)
	
  // 通过toRef将person对象中的gender属性取出,且依然保持响应式的能力
  let age = toRef(person,'age')

  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
  function changeGender(){
    gender.value = '女'
  }
</script>
相关推荐
customer0817 分钟前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf18 分钟前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据25 分钟前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_3901617733 分钟前
防抖函数--应用场景及示例
前端·javascript
334554321 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx