Vue项目创建
vue-cli创建：vue create 项目名称vite创建：npm init vite-app 项目名称 && npm install
组合式API
setup
setup是所有的组合式API的”表演舞台“
组件中用到的所有数据、方法等均需在setup中配置，且其存在两种返回值：
- 返回对象：对象可直接在模板中使用
- 返回渲染函数：可自定义渲染内容
setup在beforeCreate前执行，且只执行一次，此时this为undefined
setup可接收两个参数，props和context：
- props：值为对象，包含组件外传递过来且组件内明确接收的属性；
- context：上下文对象，包含以下元素：
- attr：包含组件外传递归来，但未明确接收的属性；
- emit：包含组件外传递过来分发自定义事件的函数；
- slots：包含组件外传递过来的插槽内容；
vue2可识别vue3中定义的元素
setup无法识别vue2中定义的元素
vue2与vue3不建议混用
ref函数
通过ref函数实现基础数据类型响应式
reactive函数
通过reactive函数实现对象及数组类型响应式
computed函数
watch函数
对于reactive修饰对象，无法获取到正确的oldvalue，且deep选项无效
单独修改reactive修饰对象的某个属性对象时，需开启deep选项；
自定义hook
hookb本质上是一个函数，用来将setup中使用到的组合api进行封装，实现代码的复用；
toRef & toRefs
将对象属性转换为响应式属性
shallowReactive与shallowRef
shallowReactive仅支持对象第一层属性转换为响应式属性
shallowRef仅支持基础类型转换为响应式
toRaw与markRaw
customRef
provide与inject
在父组件中使用provide提供数据，后代组件中使用inject来获取其提供的数据；
Fragment
可以省略根组件，Vue3会自动生成一个虚拟的Fragment元素；可减少便签层级及内存使用；
teleport
suspense
Options API vs Composition API
Option API：功能代码分散，修改相关功能需要分别调整data、methods等各块代码；
Composition API：优雅组织功能代码，让相关功能代码有序组织在一起；
<script>
import {h, ref, reactive} from 'vue'
export default {
name: 'App',
setup() {
// 非响应式数据
let name = 'semon'
// 响应式数据
let sex = ref(18)
// 响应式对象
let hobby = reactive(['sing','football'])
function change() {
sex.value = 20
}
// 返回对象
return {
name,
sex,
change
}
// 返回渲染函数
return () => {'h1', 'returnFunc'}
}
}响应式原理
vue2响应式原理
- 对象类型：通过
Object.defineProperty()对属性读取、修改进行拦截； - 数组类型：通过重写更新数组的方法来实现拦截；
新增、删除属性，页面不会更新；
通过下标修改数组，页面不会更新；
vue3响应式原理
- 通过
Proxy：拦截对象中任意属性的变化； - 通过
Reflect：对源对象属性进行操作；
Vue3变化
Vue全局属性配置变更
Vue过渡类名变更
移除keycode作为v-on修饰符
移除v-on.native修饰符
移除过滤器
常见错误
- Q：无法解析常用模块
- 错误代码：`’vue-router’ or its corresponding type declarations
- 解决方案：调整ts.config.json配置项
"resolveJsonModule": true,支持ts与js混用；
