1. vue3的优点
1.性能比Vue2.x快1.2~2倍
原因1:
diff方法优化:
vue2中的虚拟dom是全量的对比(每个节点不论写死的还是动态的都会比较)
vue3新增了静态标记(patchflag)与上次虚拟节点对比时,只对比带有patch flag的节点(动态数据所在的节点);可通过flag信息 得知当前节点要对比的具体内容
原因2:静态提升
vue2无论元素是否参与更新,每次都会重新创建然后再渲染
vue3对于不参与更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用即可
原因3:时间侦听器缓存
默认情况下onClick会被视为动态绑定,所以每次都会追踪它的变化
但是因为是同一个函数,所以不用追踪变化,直接缓存起来复用即可
原因4:ssr渲染
2.按需编译,体积比vue2.x更小
3.组合API(类似react hooks)
4.更好的Ts支持
5.暴露了自定义渲染API
6.更先进的组件
7.Fragment:模板可以有多个根元素
简单理解为:
1.性能提升(首次渲染更快,diff算法更快,内存占用更少,打包体积更小,....)
2.更好的TS支持
3.提供新的写代码的方式:Composition API(选项式API)
2. vue3 移除的一些vue2的特性
- 移除了$on方法 (
eventBus
现有实现模式不再支持,可以使用三方插件替代) - 移除过滤器选项 (插值表达式里不能再使用过滤器filter, 可以使用methods替代)
- 移除 .sync语法(v-bind时不能使用.sync修饰符了,现在它v-model语法合并了)
后续的再总结添加
3. 搭建vue3
- 使用脚手架创建
npm create projectName
- Vite 使用链接
通过简单的观察可以发现
- Vue3中,可以在template中写多个根元素
- 创建Vue3项目的一句核心代码是:
createApp(根组件).mount('public/index.html中的div容器')
4. composition vs options
options API 优点: 容易理解, 好上手
缺点:代码横跳
composition API 优点:高内聚, 易维护 ,可以进行逻辑拆分
缺点:学习成本高
5. 组合API-setup函数
5.1 作用
setup 是一个新的组件选项,作为组件中使用组合API的起点。
5.2 特点
- setup 函数是一个新的组件选项,作为组件中组合式API 的起点(入口)
- setup 中不能使用 this, this 指向 undefined
- setup函数只会在组件初始化的时候执行一次
- setup函数在beforeCreate生命周期钩子执行之前执行
5.3 执行时机
从组件生命周期来看,它的执行在组件实例创建之前执行(在beforeCreate前)
5.3 参数
// 第1个参数为props。props为一个对象,内部包含了父组件传递过来的所有prop数据
// 第2个参数为一个对象context。context对象包含了attrs,slots, emit属性,
setup(props, context) {
}
5.4 返回值
这个函数中的返回值是一个对象,在模板中需要使用的数据和函数,在这个对象中声明
在data中定义的变量和这里声明的函数重名 以setup中的变量为准
6. 组合API-生命周期
vue2 的生命周期函数
vue3 的生命周期函数
<template>
子组件
{{stu}}
</template>
<script>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from '@vue/runtime-core'
export default {
props: {
list: {
type: String,
default: '1'
}
},
setup (props) {
const stu = ref(props.list)
onBeforeMount(() => {
console.log('DOM渲染前onBeforeMount', document.querySelector('.container'))
})
onMounted(() => {
console.log('DOM渲染后1onMounted', document.querySelector('.container'))
})
onMounted(() => {
console.log('DOM渲染后2onMounted', document.querySelector('.container'))
})
onBeforeUpdate(() => {
console.log('更新组件前,onBeforeUpdate')
})
onUpdated(() => {
console.log('更新组件后,onUpdated')
})
onBeforeUnmount(() => {
console.log('销毁组件前,onBeforeUnmount')
})
onUnmounted(() => {
console.log('销毁组件后,onUnmounted')
})
return { stu }
},
}
</script>
<style>
</style>
7 ref函数
在setup 中的函数不是响应的
1. ref函数的作用
定义响应式数据
2. 步骤
- 导入
import {ref} from 'vue'
- 调用
const name = ref('小明')
- 返回
return { name }
3. 注意
在setup中使用ref的结果, 需要通过.value调用, 在模板中不需要
8. ref属性
1. 作用
获取ref属性绑定的元素
2. 步骤
- 导入
import { ref } from 'vue'
- 调用
cosnt dom = ref(null)
- 导出
return { dom }
- 使用
<div ref='dom'>文本</div>
9. reactive函数
ref 函数定义的数据要写 .value 用起来不方便
1. 作用
将复杂类型的数据定义为 响应式数据
2. 步骤
- 导入
import { reactive } from 'vue'
- 调用
const sut = reactive({ id: 1, name: '小明'})
- 导出
return { sut }
10. toRefs函数
定义的复杂类型数据的属性过多 使用起来不方便
1. 作用
定义响应式中的所有属性为响应数据, 通常用来结构 | 展开reactive中定义的对象
2. 使用
const { id, name} = toRefs(stu)