声享正努力加载中...
Vue 3.0 浅尝
王江波 3.12
请选取图片区域
Text
Vue3 One Piece
Vue 3.0
请选取图片区域
2021
唱吧前端团队分享会
- 2020.09月发布，‘One Piece’
- 提供了更好的性能、更小的捆绑包体积
- 更好的 TypeScript 集成
- 用于处理大规模用例的新 API
- 基本支持了Vue 2.0 的语法，但是不建议立即迁移
请选取图片区域
为什么需要Vue 3.0呢
请选取图片区域
2021
唱吧前端团队分享会
- 浏览器支持了ES的新特性Proxy
- 重构，解决体系架构的问题，让代码保持良好的设计
Vue2 遇到的难题，随着功能的增长，复杂组件的代码越来越难以维护，按照逻辑来分隔
- 获得更好的开发体验
Vue 3.0 的新特性
请选取图片区域
2021
唱吧前端团队分享会
- Composition API
- 响应性 API
请选取图片区域
- 全局 API
请选取图片区域
2021
唱吧前端团队分享会
Vue 2 使用 Object.defineProperty()
- 无法监测对象的变化
Vue 无法检测到 property 的添加或删除
- 无法监测数组的变化
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
请选取图片区域
2021
唱吧前端团队分享会
Vue 3 使用 Proxy
Proxy 是一个包含另一个对象或函数并允许你对其进行拦截的对象
new Proxy(target, handler)
响应性 API
请选取图片区域
2021
唱吧前端团队分享会
- reactive 获取对象的响应式副本
- ref 包裹传入的参数，获得一个响应式的引用
toRef，toRefs 将响应式对象的值转为响应式的
Composition API
请选取图片区域
2021
唱吧前端团队分享会
- a set of additive, function-based APIs that allow flexible composition of component logic.
- 与之相对的是Options API
- 提供更好的逻辑复用，
- 以及更好的代码组织性
Composition API
请选取图片区域
2021
唱吧前端团队分享会
请选取图片区域
setup 函数
请选取图片区域
2021
唱吧前端团队分享会
- setup 函数是Composition API 的入口，它本身属于Option API
新的 setup 组件选项在创建组件之前执行，一旦 props 被解析，就作为组合式 API 的入口点
setup 选项应该是一个接受 props 和 context 的函数
生命周期钩子函数
请选取图片区域
2021
唱吧前端团队分享会
你可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子
请选取图片区域
其他新加入的特性
请选取图片区域
2021
唱吧前端团队分享会
- Teleport
异步组件和Suspense
Teleport
请选取图片区域
2021
唱吧前端团队分享会
<teleport to='#modal'>
<div id="center" v-if="dialogVisible">
<h2>this is a modal dialog!</h2>
<button @click="buttonClick">Close</button>
</div>
</teleport>Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建 UI。我们可以将它们嵌套在另一个内部，以构建一个组成应用程序 UI 的树。 然而，有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置。
Suspense
请选取图片区域
2021
唱吧前端团队分享会
<Suspense>
<template #default>
<UserProfile />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>Suspense is a special component that renders a fallback content instead of your component until a condition is met.
请选取图片区域
2021
唱吧前端团队分享会
- 全局API
Vue 2 中全局API拆分为了应用API（通过createApp创建的应用调用）
和Vue 3全局API(独立包，方便Tree-shaking)
- 组件
- 渲染函数
- 模板指令
参考资料
请选取图片区域
2021
唱吧前端团队分享会
- Vue 3.0 官网
Thank You!
CSS从入门到放弃
2020-10-22 38
Shadow DOM
2019-11-01 43
