Vue3.0 笔记
definedProperty 和 Proxy 差别
Object.definedProperty 是劫持对象的属性,新增元素需要再次 definedProperty。
而 Proxy 劫持的是整个对象,不需要做特殊处理
插槽
- 跟 v-on 和 v-bind 一样,v-slot 也有缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header:
1 | <base-layout> |
v
Performance: 性能比vue2.0快1.2~2倍。
Tree Shaking Support: 按需编译,体积更小
Composition Api :组合式Api(类似React Hooks)
Better Typescript Support: 更好的支持TS
Custom Render API : 自定义渲染 API
Fragment、Teleport(portal),Suspense:更先进的组件
setup注意点
setup生命周期
beforeCeate => setup => created
setup 中不能使用 data 和 methods
VUe3.0 为了我们错误的使用
this
,直接把this 设置成了 undefinedsetup 中不能被异步使用,只能被同步使用,否则无法
ref reactive
ref=>>监听简单类型数据变化 ,
ref 如果是传入了多层对象,必须要重新负值
或者在末尾执行 triggerRef()
1 | let person = ref({ |
reactiv=>> 监听复杂类型数据变化(对象、数组)
ref 和 refs用法
1 | <child ref='childVm'/> |
- 这么做 childVm就能拿到child 的实例了
1 | export interface ISingleExpose { |
- 通过
InstanceType
可以拿到 Child 的实例 - 或者给 defineExpose 传入泛型 ISingleExpose,也个 ref 指定泛型
什么是reactive?
reactive 是vue3.0实现响应数据的方法vue
: defineProperty实现vue3.0
: Proxy 实现
reactive 注意点
- reactive 传入的参数必须是对象(JSON/Array)
1 | let oldObj = reactive({ |
本质上是将传入的数据包装成 Proxy 对象
shallowRef shallowReactive (非递归监听)
用于复杂数据类型,比如有多层嵌套,可以减少递归次数,提高性能
在setup中提供的方法
1 | setup( props, ctx) { |
watch
1 | import { ref, watch } from 'vue' |
以下是等效的选项式 API:
1 | export default { |
为何比2.0快?
1.diff方法优化
vue2:
虚拟dom 是进行全量的对比vue3:
增加了静态标记(patchFlag),在与上次虚拟节点进行对比时,只对比带有patch falg的节点。(比较的次数少了,性能也好了)
(模版编译)[https://vue-next-template-explorer.netlify.app/]
2.hoistStatic 静态提升 和 cacheHandles 事件侦听器
vue2:
无论元素是否参与更新,每次都会被重新创建,然后再渲染vue3:
会对不参与更新的元素做变量提升,只会被创建一次,在渲染时复用。
cacheHandles: 默认情况下是动态绑定,由于是同一个函数所以没有追踪变化,所以直接缓存起来使用。(不用进行比较所以提高性能)
生命周期钩子函数
- 直接导入 onXXX 一族的函数来注册生命周期钩子:
与 2.x 版本生命周期相对应的组合式 API
1 | import { onMounted, onUpdated, onUnmounted } from 'vue' |
这些生命周期钩子注册函数只能在 setup() 期间同步使用, 因为它们依赖于内部的全局状态来定位当前组件实例(正在调用 setup() 的组件实例), 不在当前组件下调用这些函数会抛出一个错误。
组件实例上下文也是在生命周期钩子同步执行期间设置的,因此,在卸载组件时,在生命周期钩子内部同步创建的侦听器和计算状态也将自动删除。
与 2.x 版本生命周期相对应的组合式 API
beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
render()函数实用的示例
可以使用render函数简写很多代码
1 | app.component('anchored-heading', { |
新组件
使用
1 | app.component('modal-button', { |
除了和 2.x 生命周期等效项之外,组合式 API 还提供了以下调试钩子函数:
onRenderTracked
onRenderTriggered
两个钩子函数都接收一个 DebuggerEvent,与 watchEffect 参数选项中的 onTrack 和 onTrigger 类似:
export default {
onRenderTriggered(e) {
debugger
// 检查哪个依赖性导致组件重新渲染
},
}
键值用小写
使用In-DOM模板(直接写在HTML文件中的模板)时,还应避免使用大写字母命名键,因为浏览器会将属性名称强制转换为小写字母:
script setup
全局编译器宏
defineProps
、defineEmits
、defineExpose
、withDefaults
在 script-setup 模式下,新增了 4 个全局编译器宏,他们无需 import 就可以直接使用。
script setup 最终还是转换成 setup函数
- script setup 会把所有的变量都在包装再setup 函数里并且 全部return 出来
- 但在 script-setup 模式下,所有数据只是默认隐式 return 给 template 使用,不会暴露到组件外,所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。
- 在 script-setup 模式下,如果要调用子组件的数据,需要先在子组件显示的暴露出来,才能够正确的拿到,这个操作,就是由 defineExpose 来完成。
defineProps
1 | <script setup lang="ts"> |
语法限制
接口或对象字面量类型可以包含对从其他文件导入的类型的引用
,但是,传递给的泛型参数本身defineProps 不能是导入类型
:
1 | import { Props } from './other-file' |
- 本文作者: Littleki
- 本文链接: https:/littleki.gitee.io/2020/08/12/Vue3-0-笔记/Vue3.xApi-笔记/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!