Vue3.0
-
源码组织方式的变化
-
全部采取 TypeScript 的方式编写代码
-
使用 Monorepo 管理项目结构
-
功能模块全部拆分为单独的包来进行开发，可以单独开发，测试，发布
-
-
Composition API
90%的新 API 兼容 2.X
-
性能提升
大幅度提升，重写响应式，运用 proxy，服务端渲染的性能提高 2-3 倍
-
Vite
不需要打包直接运行项目的解决方案
不同的构建版本
-
cjs
扫描二维码关注公众号，回复： 12396742 查看本文章
-
vue.cjs.js
-
vue.cjs.prod.js
-
-
global
-
vue.global.js
-
vue.global.prod.js
-
vue.runtime.global.js
-
vue.runtime.global.prod.js
-
-
browser
-
vue.esm-browser.js
-
vue.esm-browser.prod.js
-
vue.runtime.esm-browser.js
-
vue.runtime.esm-browser.prod.js
-
-
bundler
-
vue.esm-bundler.js
-
vue.runtime.esm-bundler.js
-
性能提升
-
响应式系统升级
-
编译优化
-
源码体积的优化
-
Vue.js 2.x 中响应式系统的核心 defineProperty
-
Vue.js 3.0 中使用 Proxy 对象重写响应式系统
-
可以监听动态新增的属性
-
可以监听删除的属性
-
可以监听数组的索引和 length 属性
-
-
Vue.js 2.x 中通过标记静态根节点，优化 diff 的过程
-
Vue.js 3.0 中标记和提升所有的静态根节点，diff 的时候只需要对比动态节点内容
-
Fragments(升级 vetur 插件)
-
静态提升
-
Patch flag
-
缓存事件处理函数
-
-
优化打包体积
-
Vue.js 3.0 中移除了一些不常用的 API
- 例如:inline-template、filter 等
-
支持 Tree-shaking
-
Vue.3.0js 响应式回顾
-
Proxy 对象实现属性监听
-
多层属性嵌套，在访问属性过程中处理下一级属性默认监听动态添加的属性
-
默认监听属性的删除操作
-
默认监听数组索引和 length 属性
-
可以作为单独的模块使用
-
核心方法：
- 主要依赖于 Proxy 对象，创建拦截器 handler， 设置 get/set/deleteProperty 实现属性监听 - reactive 实现对象的监听 - ref 实现基础数据类型的监听 - toRefs 实现对象属性的监听 - computed 实现计算属性 - effect 定义副作用函数 - track 实现依赖收集 - trigger 触发响应式 - receiver 为当前的 proxy 对象 或者 继承 proxy 的对象 - 响应式的过程中会将 监听的对象 存储在一个 targetMap(weakMap) 中,他的值是对应的响应式的集合，存放在 depsMap(Map) 中, dep 的值是一个 Set 集合， 存储了对应的 effect，触发时只需要遍历 dep 即可。
Composition API
-
RFC(Request For Comments)
- https://github.com/vuejs/rfcs·Composition
-
API RFC
- https://composition-api.vuejs.org
-
设计动机
-
Options API
-
包含一个描述组件选项(data、methods、props 等)的对象
-
Options API 开发复杂组件，同一个功能逻辑的代码被拆分到不同选项
-
-
Composition API
-
Vue.js 3.0 新增的一组 API
-
一组基于函数的 API
-
可以更灵活的组织组件的逻辑
-
-
createApp
- 用于创建 Vue 对象
setup
- Composition API 的入口
reactive
- 创建响应式对象
toRefs
- 遍历代理对象，让代理对象的属性都变成响应式的
ref
- 创建一个基础数据类型的响应式对象
watch
-
Watch 的三个参数
-
第一个参数：要监听的数据
-
第二个参数：监听到数据变化后执行的函数，这个函数有两个参数分别是新值和旧值
-
第三个参数：选项对象，deep 和 immediate
-
-
watch 的返回值
- 取消监听的函数
watchEffect
-
是 watch 函数的简化版本，也用来监视数据的变化
-
接收一个函数作为参数，监听函数内响应式数据的变化
自定义指令
- Vue 2.x
Vue.directive("editingFocus", {
bind(el, binding, vnode, prevVnode) {
},
inserted() {
},
update() {
},
componentUpdated() {
},
unbind() {
},
});
Vue.directive("editingFocus", (el, binding) => {
binding.value && el.focus();
});
- Vue 3.0
app.directive("editingFocus", {
beforeMount(el, binding, vnode, prevVnode) {
},
mounted() {
},
beforeUpdate() {
},
updated() {
},
beforeUnmount() {
},
unmounted() {
},
});
app.directive("editingFocus", (el, binding) => {
binding.value && el.focus();
});