源码组织方式的变化
Composition API
性能提升
Vite
源码组织方式
packages
│ compiler-core ------ 与平台无关的编译器
│ compiler-dom ------ 浏览器平台下的编译器
│ compiler-sfc ------ 单文件组件的编译器 依赖于 core dom
| compiler-ssr ------ 服务端渲染的编译器 依赖于 dom
| reactivity ------ 响应式系统可以单独使用
| runtime-core ------ 和平台无关的运行时
| runtime-dom ------ 浏览器的运行时 处理原生dom的api事件等
| runtime-test ------ 专门为测试编写的轻量级的运行时 渲染出来的dom数是js对象 可以运行在所有的js环 境里 用来测试渲染是否正确
| server-renderer ----- 服务端渲染
| shared ------ vue内部使用的公共的api
| size-check ------ 私有的包不会发布npm 检查包的大小
| template-explorer --- 浏览器运行的实时编译组件 输出render函数
| vue ------ 构建完整版的vue 依赖于 compiler rentime
global.d.ts
不再构建 umd 模块的方式 因为umd代码冗余
在packags/vue/dist 文件夹中存放了vue3的所有构建版本
commonjs 方式 完整版的vue
都可以在浏览器中通过script直接引入使用 引入之后会创建一个全局的vue对象
都包含esm，浏览器原生模块化方式 script type="module" 方式引入
没有打包所有代码 配合打包工具使用 esm 方式
相比 options api ， composition api 把功能整合到一个函数 只需要在 setup 时直接获取 只需要关注功能函数
同一色块代表同一功能
options api 相同的功能代码被拆分到不同位置 不方便提取复用代码
composition api 相同的功能代码在同一位置 方便代码提取复用代码
composition api 提供了基于函数的api 可以更灵活的组织组件逻辑
vue3 中 options api 和 composition api 都可以使用
ES Module
现代浏览器都支持 es module
通过下面方式加载
<script type ="module" src="..."></script>支持模块的script 默认延迟加载
vite 在开发模式下不需要打包可以直接运行
vue-cli 开发模式下必须对项目打包才可以运行
Vite 在生产环境下使用Rollup打包
vue-cli 使用webpack打包
vite 特点
npm init vite-app <项目名>npm init vite-app --template react vite 拦截.vue 的请求 转换为js文件 把响应头改为 Content-Type: application/javascript; charset=UTF-8
import { createApp } from ‘vue‘
const app = createApp({
.....
})
setup() composition API 入口
import { createApp } from ‘vue‘
const app = createApp({
setup () {
return {
....
}
}
.....
})
import { createApp, reactive } from ‘vue‘
const app = createApp({
setup () {
return {
....
}
}
})
setup中调用生命周期狗子函数 需要在函数前面加 on 并且首字母大写
import { createApp, reactive, onMounted, onUnmounted} from ‘vue‘
const app = createApp({
setup () {
onMounted(() => {
......
})
onUnmounted(() => {
......
})
return {
......
}
}
})
都是创建响应式
reactive 创建的响应式的对象 代理对象解构的时候 相当于复制一份值 重新赋值的时候不会触发代理对象的get set 所以不能解构
把对象的每一个属性都转换成响应式对象 ， toRefs 要求传入的对象必须是一个响应式对象，内部会创建一个新的对象遍历传入对象的所有属性，把所有的属性值都转换为响应式对象，挂载到新创建的对象上 返回这个新对象，她内部会为代理对象的每一个属性创建一个带有value的对象 该对象是响应式的 value具有get set ，get获取代理对象的值 set设置代理对象的值
把基本数据类型转换为响应式对象
ref返回一个响应式对象 具有value属性 value属性为设置的值
基本数据类型保存的是一个值
import { createApp, ref } from ‘./node_modules/vue/dist/vue.esm-browser.js‘
function useCount () {
const count = ref(0)
return {
count,
increase: () => {
count.value++
}
}
}
createApp({
setup () {
return {
...useCount()
}
}
}).mount(‘#app‘)
watch(() => count.value + 1)import { createApp, reactive, computed } from ‘./node_modules/vue/dist/vue.esm-browser.js‘
const data = [
{ text: ‘看书‘, completed: false },
{ text: ‘敲代码‘, completed: false },
{ text: ‘约会‘, completed: true }
]
createApp({
setup () {
const todos = reactive(data)
const activeCount = computed(() => {
return todos.filter(item => !item.completed).length
})
return {
activeCount,
push: () => {
todos.push({
text: ‘开会‘,
completed: false
})
}
}
}
}).mount(‘#app‘)
watch的三个函数
watch的返回值
import { createApp, ref, watch } from ‘./node_modules/vue/dist/vue.esm-browser.js‘
createApp({
setup () {
const question = ref(‘‘)
const answer = ref(‘‘)
watch(question, async (newValue, oldValue) => {
const response = await fetch(‘https://www.yesno.wtf/api‘)
const data = await response.json()
answer.value = data.answer
})
return {
question,
answer
}
}
}).mount(‘#app‘)
import { createApp, ref, watchEffect } from ‘./node_modules/vue/dist/vue.esm-browser.js‘
createApp({
setup () {
const count = ref(0)
const stop = watchEffect(() => {
console.log(count.value)
})
return {
count,
stop,
increase: () => {
count.value++
}
}
}
}).mount(‘#app‘)
原文：https://www.cnblogs.com/fengbaba/p/14409304.html