对Vue3中reactive的深入理解

目录
  • Vue3 reactive的理解
    • 1.什么是reactive?
    • 2.reactive注意点
  • Vue3笔记 reactive函数

Vue3 reactive的理解

1.什么是reactive?

  • reactive是Vue3中提供实现响应式数据的方法.
  • 在Vue2中响应式数据是通过defineProperty来实现的.
  • 而在Vue3响应式数据是通过ES6的Proxy来实现的

2.reactive注意点

  • reactive参数必须是对象(json/arr)
  • 如果给reactive传递了其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值的方式.

错误示范

  • 当传递的是非对象时,页面不会发生响应

正确实例

arr正确实例

  • 传入数组会转成proxy对象

Vue3笔记 reactive函数

  • 作用：定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
  • 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）

reactive定义的响应式数据是“深层次的”。

内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>一个人的信息</h1>
  <h1>年龄：{{ p.age }}</h1>
  <h1>姓名：{{ p.name }}</h1>
  <h1>工作种类: {{ p.job.type }}</h1>
  <h1>工作薪水: {{ p.job.salary }}</h1>
  <h1>爱好: {{ hobby }}</h1>
  <h1>测试的数据: {{ p.a.b.c }}</h1>
  <button @click="changeInfo">修改人的信息</button>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref, reactive } from "vue";
export default {
  name: "App",
  components: {
    HelloWorld,
  },
  setup() {
    let hobby = reactive(["抽烟", "喝酒", "打麻将"]);
    // 数据
    let p = reactive({
      name: "张三",
      age: 19,
      job: {
        type: "前端工程师",
        salary: "20k",
      },
      a: {
        b: {
          c: 666666,
        },
      },
      hobby: ["抽烟", "喝酒", "打麻将"],
    });

    // 方法
    function changeInfo() {
      console.log(p.job);
      p.name = "李四";
      p.age = 119;
      p.job.salary = "69k";
      p.job.type = "算法工程师";
      p.hobby[0] = "学习";
      hobby[0] = "学习算法";
    }
    return {
      p,
      hobby,
      changeInfo,
    };
  },
};
</script>

总结一下：

  • reactive主要是用来操作对象或数组，定义为响应式数据
  • 增删改查都可以操作。
  • 内部是通过Proxy代理的形式

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3中reactive数据被重新赋值后无法双向绑定的解决

    vue3中reactive数据被重新赋值后无法双向绑定的解决

    目录 reactive数据被重新赋值后无法双向绑定 推荐写法 vue3数据的双向绑定 一.script setup 二.ref() 函数 三.reactive()函数 reactive数据被重新赋值后无法双向绑定 这是因为reactive数据被重新赋值后,原来数据的代理函数和最新的代理函数不是同一个,无法被触发 推荐写法 import {reactive, toRefs} from 'vue' setup(props, context) { const state = reactive({ my

  • setup+ref+reactive实现vue3响应式功能

    setup 是用来写组合式 api ,内部的数据和方法需要通过 return 之后,模板才能使用.在之前 vue2 中,data 返回的数据,可以直接进行双向绑定使用,如果我们把 setup 中数据类型直接双向绑定,发现变量并不能实时响应.接下来就看看setup如何实现data的响应式功能? 一.ref setup 内的自定义属性不具备响应式能力,所以引入了 ref ,ref 底层通过代理,把属性包装值包装成一个 proxy ,proxy 内部是一个对象,使得基础类型的数据具备响应式能力,使用之

  • vue3中reactive不能直接赋值的解决方案

    目录 vue3 reactive不能直接赋值 方法 vue3 reactive赋值不响应 (1)多嵌套一层 (2)使用ref (3)用obeject.assign vue3 reactive不能直接赋值 最近比较忙,都没什么时间学习了. 在vue3里,ref和reacitve都可以定义响应式数据,但是两者有所不同.在使用reactive定义复杂结构的响应式数据时,如果你要对其赋值,会丢失其响应性.然后赋值是我们经常进行的操作,那么该怎么解决呢? 方法 1. 改为ref定义 const arr=

  • vue3的ref,computed,reactive和toRefs你都了解吗

    目录 1.ref 2.computed 3.reactive 4.toRefs 总结 在vue2中,data函数里返回的值直接为响应式的,但在vue3中我们需要使用一些函数才能达到这个效果. setup函数中拿不到vue的this 1.ref 本质为一个函数,输入参数为一个值(原始类型),返回响应式的对象 2.computed 本质为一个函数,输入参数是一个函数,可以将我们需要的值作为输入函数的返回值 例子:实现点击按钮,屏幕上的数加1 <template> <div id='app'&

  • 关于vue3中的reactive赋值问题

    目录 vue3 reactive赋值问题 vue3 reactive的坑 清空数组 清空对象 vue3 reactive赋值问题 vue3中直接对reactive整个对象赋值检测不到 let obj = reactive({ name: 'zhangsan', age: '18' }) obj = { name: 'lisi' age: '' } // 上面这样赋值检测不到,因为响应式的是它的属性,而不是它自身 // 如需要对 reactive 赋值 // 方法1: 单个赋值 obj['name

  • vue3中的reactive函数声明数组方式

    目录 reacitve函数如何声明一个响应式数组 解决办法 使用reactive包裹数组赋值 需求 代码 reacitve函数如何声明一个响应式数组 如以下案例 <template>   <div>       <div v-for="item in arr" :key="item">            {{item}}       </div>         <button @click="ch

  • 对Vue3中reactive的深入理解

    对Vue3中reactive的深入理解

    目录 Vue3 reactive的理解 1.什么是reactive? 2.reactive注意点 Vue3笔记 reactive函数 Vue3 reactive的理解 1.什么是reactive? reactive是Vue3中提供实现响应式数据的方法. 在Vue2中响应式数据是通过defineProperty来实现的. 而在Vue3响应式数据是通过ES6的Proxy来实现的 2.reactive注意点 reactive参数必须是对象(json/arr) 如果给reactive传递了其他对象,默认

  • Vue3中reactive函数toRef函数ref函数简介

    目录 reactive函数 用法: toRef函数(了解即可) 用法: ref函数 定义响应式数据 直接定义使用 获取dom 获取组件实例对象 reactive函数 reactive用于定义响应式数据(可以理解 成data的替代品) 用法: 导入 import {reactive} from 'vue' 使用: const state=reactive({ 参数名:参数值 }) 访问: state.参数名 访问: state.参数名 toRef函数(了解即可) toRef:将响应式数据中某个字段

  • Vue3中reactive与ref函数使用场景

    Vue3中reactive与ref函数使用场景

    目录 前言 简单了解 ref & reactive reactive ref reactive 能做的 ref 也能做,并且还是用 reactive 做的 ref 能做,但是 reactive 不能做 总结 前言 如果你使用过 Vue3,你知道的,在 Vue3 中有两个非常常用的响应式 API:reactive 和 ref.它们会把我们想要追踪的数据变成响应式. 而且我们在使用时一直被告知 ref 用于创建基础类型的响应式,也可以创建引用类型的响应式.而对于引用类型,底层也是转换为 reacti

  • vue3 中ref和reactive的区别讲解

    1. ref和reactive区别:    如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value    如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value 2. Vue是如何决定是否需要自动添加.value的    Vue在解析数据之前, 会自动判断这个数据是否是ref类型的,    如果是就自动添加.value, 如果不是就不自动添加.value 3. Vue是如何判断当前的数据是否是ref类型的   

  • Vue3中ref和reactive的基本使用及区别详析

    目录 前言 ref—计数器案例 reactive—计数器案例 区别 类似使用ref 类似使用 reactive 附:ref和reative的使用心得 总结 前言 今天给大家讲一下在vue3中ref和reactive的使用方法,以及他们的使用区别在哪里,下面通过一个简单的计数器的例子来给大家进行说明 ref—计数器案例 ref 主要用于基本类型的响应,看如下代码: import { ref } from 'vue' // 导入ref interface DataProps { count: num

  • Vue3中ref与reactive的详解与扩展

    Vue3中ref与reactive的详解与扩展

    一.ref和reactive 死死记住:ref本质也是reactive,ref(obj)等价于reactive({value: obj}) vue3中实现响应式数据的方法是就是使用ref和reactive,所谓响应式就是界面和数据同步,能实现实时更新 vue2中响应式是通过defineProperty实现的,vue3中是通过ES6的Proxy来实现的 1.reactive reactive的参数必须是一个对象,包括json数据和数组都可以,否则不具有响应式 如果给reactive传递了其他对象(

  • 详解vue3中setUp和reactive函数的用法

    详解vue3中setUp和reactive函数的用法

    1 setUp的执行时机 我们都知道,现在vue3是可以正常去使用methods的. 但是我们却不可以在setUp中去调用methods中的方法. 为什么了??? 我们先了解一下下面这两个生命周期函数,分别是: beforeCreate 表示data 中的数据还没有初始化,是不可以使用的 Created : data已经被初始化了,可以使用 setUp在beforeCreate 和 Created 这两个函数之间. 是不是就知道为啥setUp中不可以去调用methods中的方法了. 2.setU

随机推荐