vue3.2 reactive函数问题小结

reactive函数

上篇文章给大家介绍了Vue中的reactive函数操作代码，需要的朋友点击查看。

reactive用来包装一个对象，使其每个对象属性都具有响应性（也就是深层次响应式）。

  • 语法：const 代理对象= reactive(源对象) 。
  • 接收一个对象（或数组），返回一个代理对象（简称proxy对象）。
  • 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

注意点1：

问题：reactive函数使用基本类型数据会报警告

注意点2：

总结：基础类型数据推荐适用ref函数，引用类型数据推荐适用reactive函数

使用reactive函数实现引用数据响应式数据

<script setup>
  //数据
  let job = reactive({
    type: '前端工程师',
    salary: '20K'
  })

  //方法
  function changeInfo() {
    job.type = 'UI设计师'
    job.salary = '30K'
  }
</script>

如果想使用ref函数实现引用数据响应式,使用job.value

<script setup>
  //数据
  let job = ref({
    type: '前端工程师',
    salary: '20K'
  })

  //方法
  function changeInfo() {
    job.value.type = 'UI设计师'
    job.value.salary = '30K'
  }
</script>

注意点3：

当然也可以把基础类型数据和引用类型数据封装成一个代理对象，通过reactive函数关联，使用起来也很方便，缺点是还是写了很多person.xxx重复字符串

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h3>工作种类：{{ person.job.type }}</h3>
  <h3>工作薪水：{{ person.job.salary }}</h3>
  <h3>爱好：{{ person.hobby }}</h3>
  <h3>测试的数据c：{{ person.job.a.b.c }}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script setup>
import { reactive } from "vue";
//数据
let person = reactive({
  name: "张三",
  age: 18,
  job: {
    type: "前端工程师",
    salary: "20K",
    a: {
      b: {
        c: 666,
      },
    },
  },
  hobby: ["打球", "跑步", "健身"],
});

//方法
function changeInfo() {
  person.name = "李四";
  person.age = 50;
  person.job.type = "UI设计师";
  person.job.salary = "30K";
  person.job.a.b.c = 999;
  person.hobby[0] = "学习";
}
</script>

到此这篇关于vue3.2 reactive函数的文章就介绍到这了,更多相关vue3.2 reactive函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3 源码分析reactive readonly实例

    目录 引言 一.reactive 和 readonly 1. reactive相关类型 2. 相关全局变量与方法 3. reactive函数 4. 造物主createReactiveObject 5. shallowReactive.readonly和shallowReadonly 二.对应的 Handlers 1. baseHandlers 1.1 reactive 1.2 readonly 1.3 shallowReactive 1.4 shallowReadonly 2. cellecti

  • 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定义和修改响应式数据(最新推荐)

    需求:vue3中setup组合式api中如何定义响应式数据并且修改赋值呢? 1.字符串/数字:“ref”是vue3中用来存储值的响应式数据源,它可以定义字符串,数字等 <script setup> import { ref } from 'vue' // "ref"是用来存储值的响应式数据源. // 理论上我们在展示该字符串的时候不需要将其包装在 ref() 中, const message = ref('Hello World!') // 但是在这个示例中更改这个值的时候

  • vue3 reactive函数用法实战教程

    目录 vue3 reactive函数用法 Vue3中reactive的理解 1.什么是reactive? 2.reactive注意点 错误示范 正确实例 arr正确实例 vue3 reactive函数用法 reactive的用法与ref的用法相似,也是将数据变成响应式数据,当数据发生变化时UI也会自动更新.不同的是ref用于基本数据类型,而reactive是用于复杂数据类型,比如对象和数组例如:定义一个对象类型的变量user <template> <div> <p>{{

  • Vue3关于响应式数据类型详解(ref、reactive、toRef、及toRefs)

    目录 ref reactive toRef() toRefs() ref 接受一个内部值,返回一个响应式的.可更改的 ref 对象,此对象只有一个指向其内部值的 property .value. 类型 function ref<T>(value: T): Ref<UnwrapRef<T>> interface Ref<T> { value: T } 详细信息 ref 对象是可更改的,也就是说你可以为 .value 赋予新的值.它也是响应式的,即所有对 .va

  • vue3 reactive响应式依赖收集派发更新原理解析

    目录 proxy 依赖收集 currentEffect 派发更新 总结 proxy vue3的响应式实现依旧是依赖收集与派发更新,本节乃至后面涉及的代码都是经过简化,文章目的是讲解原理,直接贴源码会很枯燥 vue3已经从Object.property更换成Proxy,Proxy相比于前者可以直接监听对象数组,对于深层次的对象和数组,会把触发对应getter,然后去递归进行依赖收集,并不是直接像vue2暴力那样递归,总体而言性能更好 对reactive传进来的对象进行Proxy进行劫持在内部进行依

  • vue3.2 reactive函数问题小结

    reactive函数 上篇文章给大家介绍了Vue中的reactive函数操作代码,需要的朋友点击查看. reactive用来包装一个对象,使其每个对象属性都具有响应性(也就是深层次响应式). 语法:const 代理对象= reactive(源对象) . 接收一个对象(或数组),返回一个代理对象(简称proxy对象). 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作. 注意点1: 问题:reactive函数使用基本类型数据会报警告 注意点2: 总结:基础类型数据推荐

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

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

  • Vue中的reactive函数操作代码

    reactive函数 之前给大家介绍过vue3.2 reactive函数问题小结,喜欢的朋友点击查看. 作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数,ref函数可以用基本类型也可以对象类型) 语法:const 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象) reactive定义的响应式数据是“深层次的”. 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作. <tem

  • 对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中setUp和reactive函数的用法

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

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

  • 详解Vue3中ref和reactive函数的使用

    目录 前言 ref 函数介绍 ref 函数使用 ref 函数处理基本数据类型 ref 函数处理复杂数据类型 ref 函数获取单个DOM元素 其他相关方法 reactive 函数介绍 reactive 函数使用 ref 函数处理对象 ref 函数处理数组 前言 上一篇博文介绍 setup 函数的时候,最后出现一个问题,就是在 setup 函数中,编写一个事件,直接去修改定义的变量,发现页面上没有更新成功,并且控制台报错,那这篇博客就是讲解遇到的这个问题应该如何处理. ref 函数介绍 ref 作用

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

    Vue3中reactive与ref函数使用场景

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

  • 详解vue3中渲染函数的非兼容变更

    目录 渲染函数API变更 Render函数参数 渲染函数签名更改 VNode Props 格式化 slot统一 移除$listeners $attrs现在包括class和style 渲染函数API变更 此更改不会影响到<template>用户 h现在全局导入,而非作为参数传递给渲染函数 渲染函数参数更改为在有状态组件和函数组件之间更加一致 vnode现在又一个扁平的prop结构 Render函数参数 // 2.0 渲染函数 export default { render(h) { return

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

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

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

随机推荐