vue3的学习(二)
承接上文,继续记录vue3的新特性
上文:
vue3的学习(一)
Composition (由很多apl组成的vue3代码)
vue3与vue2在代码使用上有了很大的区别,更加趋向于原生js的格式,使用composition可以将界面中重复的部分连同其功能一起提取为可重用的代码段,从而提高应用的可维护性和灵活性
1、setup函数
setup函数是vue3与vue2的一个重要的不同,setup函数在组件被创建之前,props之后进行解析执行,解析完成后,props就作为了组合式apl的入口。
setup函数的调用发生在data、computed和methods等属性之前,这些属性无法在setup中被获取使用,因此setup函数的优先级比这些函数更高,在setup函数被解析暴露之前,其中的数据与外界相互独立
在代码开始执行后,setup函数会返回一个对象,这个对象中有着setup中的数据,我们将这个对象中的内容全部暴露给外界的vue核心属性(data,methods,watch……)以及组件模板来完成一整套代码执行的流程
语法:
export default {// setup函数里面可以放数据 方法 计算属性 侦听器setup(){//要执行的代码return {//数据需要return出去才能使用}}},}
在使用setup函数时,可以发现一个问题,就是数据无法实现实时响应式更新,因此我们需要一些方法来帮助我们解决这个问题,这时就要用到三个属性,ref,reactive,toRefs
2、ref属性
描述:返回一个较为复杂的对象,其中的value值为需要实现响应式的数据,此方法主要用于实现基础数据的响应式
语法:
setup() {// 字符串实现响应式://原方式:// let title2="vue3的形式" //无法实现响应式// 数字实现响应式// let num=0let num=ref(0)return {num//本质上它其实是//num:value值为num的对象,这个对象可以实现页面实时响应}},
3、reactive属性
描述:返回一个较为简单的对象,其中的value值为需要实现响应式的数据,此方法主要用于实现复杂数据的响应式
语法:
let data = reactive({num: 1,str: "abc",
})return {data
}
4、toRefs
描述:数值被解构后会因为被解构的值不是对象,而是原数值的原因无法被解析,因此使用此方法让被解构后的响应式数值仍然可以实现页面实时响应
语法:
setup() { //toRefs 可以让解构过的值仍然是一个响应式的数据let {num,str} = toRefs(reactive({num: 1,str: "abc",}))return {num,str}}
本篇注意点:
1、其实ref也可以实现复杂数据的响应式处理,因为它与reactive都是返回一个对象,它们最大的区别在于后续的侦听器和toRefs的使用
2、toRefs其实就是把解构出来的值进行再次循环处理,由于只有复杂数据类型会用到解构,因此toRefs一般与且只能与reactive进行搭配一起使用,因为ref的返回值是一个较为复杂的对象,而reactive已经够用,因此vue官方并没有把增加ref和toRefs搭配语法的打算
vue3的学习(二)相关推荐
- C#多线程学习(二) 如何操纵一个线程
C#多线程学习(二) 如何操纵一个线程 原文链接:http://kb.cnblogs.com/page/42529/ [1] C#多线程学习(二) 如何操纵一个线程 [2] C#多线程学习(二) 如何 ...
- spring security 学习二
spring security 学习二 doc:https://docs.spring.io/spring-security/site/docs/ 基于表单的认证(个性化认证流程): 一.自定义登录页 ...
- STL源码剖析学习二:空间配置器(allocator)
STL源码剖析学习二:空间配置器(allocator) 标准接口: vlaue_type pointer const_pointer reference const_reference size_ty ...
- mysql用创建的用户登陆并修改表格_MySQL 基础学习二:创建一个用户表,并增删改查...
MySQL 基础学习二:创建一个用户表,并 增删改查 提示:MySQL 命令建议都用大写,因为小写运行时,还是翻译成大写的. 第一步,创建一个用户表 1,打开控制台,进入数据库 C:\Users\Ad ...
- OpenCV学习(二十四 ):角点检测(Corner Detection):cornerHarris(),goodFeatureToTrack()
OpenCV学习(二十四 ):角点检测(Corner Detection):cornerHarris(),goodFeatureToTrack() 参考博客: Harris角点检测原理详解 Harri ...
- OpenCV学习(二十二) :反向投影:calcBackProject(),mixChannels()
OpenCV学习(二十二) :反向投影:calcHist(),minMaxLoc(),compareHist() 参考博客: 反向投影backproject的直观理解 opencv 反向投影 颜色直方 ...
- OpenCV学习(二十一) :计算图像连通分量:connectedComponents(),connectedComponentsWithStats()
OpenCV学习(二十一) :计算图像连通分量:connectedComponents(),connectedComponentsWithStats() 1.connectedComponents() ...
- OpenCV学习(二十) :分水岭算法:watershed()
OpenCV学习(二十) :分水岭算法:watershed() 参考博客: OpenCV-分水岭算法 图像处理--分水岭算法 OpenCV学习(7) 分水岭算法(1) Opencv分水岭算法--wat ...
- OpenCV与图像处理学习二——图像直方图与色彩空间
OpenCV与图像处理学习二--图像直方图与色彩空间 2.4 图像直方图(Image Histogram) 2.4.1 直方图的绘制 2.4.2 三通道直方图绘制 2.5 颜色空间 2.5.1 RGB ...
最新文章
- Win10安装Ubuntu系统
- POJ-2948 Martian Mining 动态规划
- mysql带DISTINCT 关键字的查询
- keras环境搭建 [过程记录]
- python引入redis_使用python向Redis批量导入数据
- ServerSuperIO Designer IDE 发布,打造物联网通讯大脑,随心而联。附:C#驱动源代码。
- CAlayer层的属性
- 小数 ###_C#中的小数关键字
- django-一对多关系
- MySQL 在指定位置新增字段
- Python代码之三级登录
- 帮朋友配置的一台主机,配置发出来看看
- 昂达平板不能开机刷机_常用的昂达平板电脑怎么刷机 常用的昂达平板电脑刷机教程...
- 测控计算机三级有用吗,计算机等级考试教程(三级A 微机在测控领域的应用)...
- 神舟笔记本风扇偏移调多少_神舟战神怎么调节风扇我们该办正事了
- 【云原生监控系列第一篇】一文详解Prometheus普罗米修斯监控系统(山前前后各有风景,有风无风都很自由)
- 【数据结构】之排序算法综合篇
- 如何使用xbrowser图形化连接centos
- 机器学习之线性回归——OLS,岭回归,Lasso回归
- 基于.net的当下传统制造业MES系统的思考(一)