vue学习视频（七）-vue3

vue2是目前的主流版本，vue3是未来的趋势

vue3带来了什么

新的特性

创建vue3的工程（1）

构建工具

vite与webpack对比

创建vue3的工程（2）

vue3与vue2 main.js对比

image.png

CompositionAPI

image.png

setup初始

setup

vue3支持vue2中定义对象，函数等方法，但是不推荐使用，如果vue3中也有同名属性或者方法的时候，以vue3为主。

ref的使用

image.png

ref的使用-响应式数据定义

理论分析，实际情况并非如此

基本数据类型是使用的object.defaultProperty的数据劫持的方法
处理对象使用的是es6中更加高端的对象proxy

ref

reactive函数

reactive.png

把源对象通过reactive加工成代理对象，目的是为了把数据做成响应式。

响应式原理

vue2响应式原理.png

vue3响应式原理

Object.defineProperty(数据源，属性，{get(),set()})
Reflect.defineProperty(数据源，属性，{get(),set()}) // 反射
都可以实现对象代理，但是使用Reflect 代码框架更加健壮。

vue3的响应式原理

reactive与ref对比

setup传参

7、计算属性与监视

难点（需要多刷几次视频）：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=152

计算属性

监听

image.png

总结

为什么ref定义的普通数据类型监视不用value，监视对象需要

watcheffect函数

总结.png

vue2与vue3生命周期钩子函数对比

image.png

组合api形式的钩子 比用配置项写的生命周期钩子执行时机更早。

自定义hook函数

总结

方法实现一

方法实现二，使用hook（一）

方法实现二，使用hook（二）

toRef

image.png

其他组合api（composition api）

image.png

image.png

页面数据不修改的情况：
1、本来数据就没有改变
2、数据修改了，但是vue检测不到，不是相应式数据，所以页面不修改！

image.png

image.png

image.png

customref 自定义ref

函数的调用，可以写在函数定义之前！

customref.png

provide与inject

image.png

响应式数据的判断

响应式数据的判断

Composition API的优势

image.png

传统options api存在的问题

使用传统optionsAPI中，新增或修改一个需求，就需要分别在data，methods，computed等配置项中修改。

compositionAPI的优势

我们可以更加优雅的组织我们的代码，函数，让相关功能的代码更加有序的组织在一起。（使用hook函数，可以更好的编写代码，把功能封装到一起，使用use调用即可！）

vue3中常用的新组件

fragment

teleport

相对于参数to做渲染,不用在组件的层级中操作
弹窗遮罩的实现，先是div做遮罩层，里面div展示数据，
position:absolute;
top:0,bottom:0,left:0;right:0;
background-color: rgba(0,0,0,0.5)
---div样式
position:absolute;
top:50%; // 相对整个父组件
left:50%;
transform：translate(-50%,-50%) // 相对盒子大小偏移

suspense

静态引入与异步引入

image.png

suspense.png

其他

1、全局API的转移

image.png

image.png

2、其他改变

1、data必须使用方法
2、过渡类名的修改
3、移除keycode（因为兼容性不好）
4、移除native修饰符，使用申明区别是否为自定义事件，申明就是自定义，不申明就是原生事件
5、移除过滤器

image.png

image.png

为什么data由原来的对象改写为方法？
防止组件被复用的时候，产生数据的关联关系，从而造成干扰。