关于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'] = 'lisi';
obj['age'] = '';
// 方法2：多包一层
let obj = reactive({
	data: {
		name: 'zhangsan',
		age: '18'
	}
})
obj.data = {
	name: 'lisi'
	age: ''
}

vue3 reactive的坑

最近使用vue3的过程中发现reactive有一些问题

清空reactive定义的数组时必须将length设为0，直接赋值一个空数组是没有作用的，同理对象直接赋值一个空对象也没有作用，只能遍历对象一项一项删，这里说的没有作用是不能响应式的更新页面，如果打印一下是能看到确实被删除了，但是页面没有变化

清空数组

// 错误示例
<template>
  <div>{{ arr }}</div>
  <button @click="click">点击</button>
</template>
 
<script setup>
import { reactive } from 'vue'
let arr = reactive([1, 2, 3])
const click = () => {
  arr = []
  console.log(arr) // 这里打印的结果是正常的空数组
}
</script>
// 正确示例
<template>
  <div>{{ arr }}</div>
  <button @click="click">点击</button>
</template>
 
<script setup>
import { reactive } from 'vue'
let arr = reactive([1, 2, 3])
const click = () => {
  arr.length = 0 // 这里和vue2是正好相反，vue2直接将数组length设为0是无效的
  console.log(arr)
}
</script>

清空对象

// 错误示例
<template>
  <div>{{ obj }}</div>
  <button @click="click">点击</button>
</template>
 
<script setup>
import { reactive } from 'vue'
let obj = reactive({a: 111, b: 222})
const click = () => {
  obj = {}
  console.log(obj) // 这里打印的结果是正常的空对象
}
</script>
// 错误示例
<template>
  <div>
    <div>{{ obj }}</div>
    <button @click="click">点击</button>
  </div>
</template>
 
<script setup>
import { reactive } from 'vue'
let arr = reactive({a: xxx, b: xxx })
const click = () => {
  for (let i in obj) {
    delete obj[i]
  }
  console.log(obj) // 这里打印的结果是正常的空数组
}
</script>

同样的道理直接赋值也不行，数组只能用数组的某些方法，或者直接修改索引，修改索引跟vue2又是相反，vue2只修改索引项没有作用，对象直接使用点语法即可，直接赋一个对象没有作用

这些问题其实只要使用ref就可以解决，但是人官方推荐使用reactive。。。。

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

赞 (0)

相关推荐

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

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

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

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

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

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

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

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

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

  • 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中ref、toRef、toRefs 和 reactive的区别

    目录 一.ref——定义任意类型响应式数据 二.reactive——定义响应式对象 三.toRef——将一个 reactive 转化为一个 ref 四.toRefs——将多个 reactive 自动解构为多个 ref 一.ref——定义任意类型响应式数据 ref 能定义“任何类型”的响应式数据(ref 在 vue3 中指响应式数据). 参数可以传入任意数据类型. 使用 ref 定义的属性必须通过 .value 的形式才能修改其值.属性的值一旦被修改就会触发模板的重新渲染以显示最新的值. 对于在

  • 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响应式原理解析

    目录 1 ref 2 isref判断是不是一个ref对象 3 shallowref创建一个跟踪自身.value变化的 ref,但不会使其值也变成响应式的 4 triggerRef 5 customRef 6 reactive用来绑定复杂的数据类型 7 readonly 8 shallowReactive 9toRef 10toRefs 11toRaw Vue3系列4--ref和reactive响应式 本节主要介绍了响应式变量和对象,以及变量和对象在响应式和非响应式之间的转换. 1 ref 接受一

  • vue3中如何使用ref和reactive定义和修改响应式数据(最新推荐)

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

随机推荐