reactive和ref返回的都是一个原始对象的 Proxy，它和原始对象是不相等的

一、定义数据方面：

reactive：仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的原始类型无效

ref：允许我们创建可以使用任何值类型的响应式ref

二、使用方面：

// reactive的使用
import { reactive } from 'vue';let msg = reactive({ a: 0 })
let msg1 = reactive([{ a: 0 }])// ref的使用
import { ref } from 'vue';let msg = ref({ a: 0 })
let msg1 = ref([{ a: 0 }])
let msg2 = ref(0)
let msg3 = ref(true)
let msg4 = ref('aaa')
let msg5 = ref(null)

三、修改值的注意点

import { reactive, ref } from 'vue';// ref : ref修改值需要通过 .value 来修改，但是通过 {{}} 读取值的时候是不需要加.value的
let msg = ref(0)
msg.value = 1
console.log(msg)// reactive ：reactive修改值不需要通过 .value 可直接修改
let play = reactive({ a: 0 })
play.a = 1
console.log(play)

四、reactive响应注意点

很多人在获取数据以后会直接赋值，这时候会发现reactive失去响应，这是为什么呢，看完下面你就了解

import { reactive, ref } from 'vue';// 这个时候你就会发现当前数据不会具有响应：原因是因为当前的 proxy对象 已经被替换为 原始对象
let play = reactive({ a: 0 })
play = { a: 1 }
console.log(play);  //{a: 1}// 解决1 ：在重新替换的时候给新的值也加上 reactive()
let play = reactive({ a: 0 })
play = reactive({ a: 1 })
console.log(play);  //Proxy {a: 1}// 解决2 ：使用 ref 代替 reactive
// 原因：ref 的 .value 属性也是响应式的。同时，当值为对象类型时，会用 reactive() 自动转换它的 .value
let play = ref({ a: 0 })
play.value = { a: 1 }
console.log(play);// 以下的解构也不会具有响应式let n = play.a
n++  //不影响原始的 playlet { a } = play
a++  // 不会影响原始的 play

reactive和ref的特性和区别相关推荐

reactive和ref区别
reactive与ref区别 1. 从定义数据方面: ref通常用来定义基本类型数据 reactive用来定义:对象(或者数组)类型数据 ref也可以用来定义对象或者数组类型的数据,内部会通过reac ...
vue3.0语法糖及ref、reactive、toRef、toRefs的区别
vue3.0语法糖前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. 1.什么是setup语法糖起初 ...
ref、reactive、toRef、toRefs的区别
vue3.0里给数据添加响应式有很多api可用,有时傻傻分不清,分享一下个人的理解. 一.reactive reactive 用于为对象添加响应式状态. 接收一个js对象作为参数,返回一个具有响应式状 ...
reactive、ref、toRef、toRefs
reactive和ref 1.reactive 接收的数据类型:对象类型使用: const data1 = reactive({value: "1",name: "2& ...
ref和out的区别
ref和out的区别在C# 中,既可以通过值也可以通过引用传递参数.通过引用传递参数允许函数成员更改参数的值,并保持该更改.若要通过引用传递参数, 可使用ref或out关键字.ref和out这两个关键 ...
CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...
C#中关键字ref与out的区别（转）
C#中关键字ref与out的区别(转) 在C#中,ref与out是很特殊的两个关键字.使用它们,可以使参数按照引用来传递. 总的来说,通常我们向方法中传递的是值.方法获得的是这些值的一个拷贝,然后使用 ...
C# 中 ref 和out 的区别
out 参数前必须先为其赋值,即必须由被调用方为其赋值. class TestOut {static void FillArray(out int[] arr){// Initialize the a ...
C、C++、C#、Java、php、python语言的内在特性及区别
C.C++.C#.Java.PHP.Python语言的内在特性及区别: C语言,它既有高级语言的特点,又具有汇编语言的特点,它是结构式语言.C语言应用指针:可以直接进行靠近硬件的操作,但是C的指针操作 ...

reactive和ref的特性和区别

一、定义数据方面：

二、使用方面：

三、修改值的注意点

四、reactive响应注意点

reactive和ref的特性和区别相关推荐

最新文章

热门文章