前言

从 Vue2 升到 Vue3 之后,用法上有了很大很大的变化
Vue3可以通过 ref 来声明一些响应式数据,可以是 any 类型的响应式数据 ,在 script 标签中访问和修改这个属性需要用 变量名.value

Vue3 3.1 在 template 模板中使用定义的数据也是需要 变量名.value 的
Vue3 3.2 + 在 template 模板中使用定义的数据是不需要 .value 的,ref 在模板中使用的时候会自动解包

Vue 3.2+ 在模板中可以直接通过变量名进行数据展示就是自动解包

结合代码分析

<template><div><!--在模板中访问 ref 类型的属性,直接访问,无需 .value--><h2>name : {{ name }}</h2><!-- 模板中访问 ref 类型的属性 .value 是没有数据的--><h2>name.value : {{ name.value }}</h2><h2>user : {{ user }}</h2><h2>user.name : {{ user.name }}</h2><!-- 模板中访问 reactive 类型的对象的属性 .value 是没有数据的--><h2>user.name.value : {{ user.name.value }}</h2></div>
</template>

<script setup>
import {ref,reactive} from 'vue'const name = ref('yuzu') // 声明一个 ref 的变量 name
// 直接访问 name 是一个 ref 对象
console.log('----->',name) // RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: 'yuzu', _value: 'yuzu'}
// 通过 name.value 来访问 name 的数据
console.log('----->',name.value) // yuzu
// 直接修改 name 报错
// name='yuzuru' //TypeError: Assignment to constant variable.
console.log(name.value)  // yuzu
// 通过 name.value 修改 name 的数据
name.value = "yuzuru"
console.log(name.value) // yuzuru// 声明一个 reactive 类型的对象 user
const user = reactive({})
// 直接通过 对象.属性 的方式访问赋值
user.name = 'yuzu'
user.age = 27
// 输出整个 user 是一个 Proxy 对象
console.log('----->',user) // Proxy {name: 'yuzu', age: 27}
console.log('----->',user.name) // yuzu
// ractive 类型的对象的属性是直接访问的,不用 .value
console.log('----->',user.name.value) // undefined
</script>

总结

在模板中访问 ref 类型的属性,直接访问,无需 .value
模板中访问 ref 类型的属性 .value 是没有数据的
模板中访问 reactive 类型的对象的属性 .value 是没有数据的

在 js 当中对于 ref 类型的属性的访问和赋值都需要通过 .value 来进行
在 js 当中对于 ractive 类型的对象的属性是直接访问的,可以直接 对象.属性名,不用 .value

以上就是我自己对于解包的理解啦,如果有不正确的地方,欢迎各位指正交流吖 ~ !
晚安 ~

Vue 3 之什么是解包相关推荐

[Python]网络打解包
Python与C.C++交互的时候,如果进行网络消息的收发,需要讲数据打包解包为字节流. 这时候就会用到Struct模块中的pack.unpack函数打包: PKG = ''# '!' means ...
【Python】序列解包 and * 和 ** 的区别
可以使用序列解包功能对多个变量进行赋值. 序列解包也可以用于列表和字典,但对字典使用时,默认是对字典的"键"进行操作: 如果需要对"键:值"进行操作,需要使用字 ...
关于学习Python的一点学习总结（18-＞序列解包）
46.序列解包;将一个序列(或任何可迭代对象)解包,并将得到的值存储到一系列变量中. >>> x,y,z=6,8,9>>> print(x,y,z)6 8 9> ...
linux把文件复制到压缩包里,Linux学习笔记（二十）文件压缩 zip压缩、tar打包、打包、解包...
一.zip压缩首先安装zip与unzip yum install -y zip/unzip zip 1.txt.zip 1.txt 压缩文件1.txt,压缩文件名称为1.txt.zip zip -r ...
Python * ** 打包解包详解
里边出现的英文都来自于python官网的开发者指南本文主要就是介绍*和**对此展开详细介绍. Unpacking is proposed to be allowed inside tuple, li ...
指针的本质是：内存（地址）+ 类型装包解包
指针的本质是:内存(地址)+ 类型指针只是将变量对应的内存装包: *P是解包的操作.
强制解包看 Swift 的设计
不知道大家有没有发现,在一个 Objective-C 和 Swift 混编的 App 中,当把一个 OC 中的参数转到 Swift 时,Swift 会自动把这个变量进行强制解包.举个例子,我在 OC ...
python正确的赋值语句-Python 赋值语句技巧之序列解包
python赋值语句技巧之序列解包sequence unpacking,是python语言赋值语句的一种技巧方法,在给多个python 变量命名同时赋值时是很有效率的一种方法. 赋值语句序列解包概念 ...
python 链式比较 2._特色的Python序列解包、链式赋值、链式比较
一.序列解包序列解包(或可迭代对象解包):解包就是从序列中取出其中的元素的过程,将一个序列(或任何可迭代对象)解包,并将得到的值存储到一系列变量中. 一般情况下要解包的序列包含的元素个数必须与你在等 ...

Vue 3 之什么是解包

Vue 3 之什么是解包

前言

结合代码分析

总结

Vue 3 之什么是解包相关推荐

最新文章

热门文章

Vue 3 之什么是 解包

Vue 3 之什么是 解包

前言

结合代码分析

总结

Vue 3 之什么是 解包相关推荐

最新文章

热门文章

Vue 3 之什么是解包

Vue 3 之什么是解包

Vue 3 之什么是解包相关推荐