什么是Vue3
用于构建用户界面的渐进式框架
Vue2和Vue3的区别
-
响应式系统的重写：使用Proxy代替defineProperty实现数据响应式。
-
重写虚拟DOM的实现和Tree-Shaking
-
销毁和卸载的改进，销毁前不需要执行额外的操作
-
生命周期的添加
-
新增的API
-
vue3是组合式api，vue2是选项式api
-
setup
- 每一次组件实例化被调用，会初始配置和逻辑处理，类似于Options API中的beforeCreate和Created的钩子函数功能。
-
reactive （reactive取出的数据都是非响应式的）
- 定义引用类型，可将非响应式数据转化为响应式数据
- 深层响应式
- 局限性：
- 不支持基本类型数据
- 性能开销大
- 浏览器限制
-
ref
- 将数据从非响应式转换为响应式
- 在js中使用加上 . value ，页面标签中不需要加value
-
响应式数据和原始数据
- 响应式数据
- 当逻辑层代码发生改变时，会影响视图层
- 原始数据
- 逻辑层代码发生变化不会影响视图层
- 响应式数据
-
nextTick()
- 在状态改变后立即使用，以等待DOM更新完成，监听下一次页面渲染
-
计算属性 computed（）
- computed(()=>{}) 相当于get
- computed ( { get(){},set(){} } )
-
监听属性 watch()
- watch(第一个参数：监听的数据（如果是ref对象，直接指定，如果是reactive对象中的属性，必须通过函数来指定，监听多个数据用数组包起来），第二个参数：回调函数（newVal，oldVal),第三个参数对象{immediate为true，来指定初始时立即执行第一次，deep深度监听})
- watchEffect(()=>{}),浅监听，监听页面中的所有响应式数据，进入页面时立即执行一次。
生命周期
- setup
- 相当于beforeCreate个created
- onbeforMmount
- onMounted
- onBeforeUpdate
- onBeforeUnmount
- onUnmounted
获取元素和组件
- ref在元素或组件中添加ref属性，然后直接声明变量即可
- 获取组件中的数据和方法，需要在组件中暴露出去数据和方法
- defineExpose（{ 数据和方法 }）
reactive 声明响应式对象，深层响应式 只能定义引用类型。reactive（{ }）
Vue2对象直接新添加的属性或者删除已有的属性，界面不会自动更新
直接通过下标替换元素或更新length，页面不会自动更新
toRefs
- 将一个响应式的reactive对象的所有原始属性转换为响应式的ref属性。
hook
- 类似于Vue2中的混入
- 将可复用功能的代码进行封装。
Vue3 路由跳转传参
- 声明式
- router-link t0
- 函数式
- useRoter()
- 接收参数
- useRoute()
- a1
组合式API
-
readonly和shallowReadonly
- readonly 会递归地将所有的属性都转换为只读响应式对象，包括嵌套对象的属性也是只读的（所有只读）。
- shallowReadonly 只会将根级属性设置为只读响应式对象，嵌套对象的属性仍然是可修改的（一层只读）。
-
shallowReactive与shallowRef
- shallowReactive 只会对根属性进行响应式处理，而不会递归到对象的嵌套属性
- shallowRef 对该对象内部属性的修改不会被监听，只有重新赋值整个对象的操作才会引起响应式更新。
-
toRaw和markRaw
- toRaw 将响应式数据转换成原始数据
- markRaw 标记一个对象，使其永远不会被转化为响应式对象
-
toRef和toRefs 用于创建ref对象的函数
- toRef（数据，数据里面的属性）
- toRefs（数据）
-
provide和inject 用于组件间传递参数
- provide必须在setup里面书写，provide（属性名，属性值）传递数据
- inject（属性名）接收数据
新api
-
fragment 片段
- 允许我们在组件中返回多个子元素
-
Teleport 瞬移
- 允许我们将组件的内容最见到任意DOM元素中
Pinia 小菠萝
- defineStore(‘id’,{state:()=>({count:0}), getters:{},actions:{}，persist：true })
- defineStore(‘id’,()=>{ return { } }，{ persist：true})
- pinia本地存储
- 下载插件 persist
- npm install pinia-plugin-persistedstate
- 在main.js目录下添加
父子组件传参
- 父传子
- 在父组件的子标签中自定义一个属性
- 在子组件中用defineProps（）接受
- defineProps（{ }）
- Ts写法 defineProps<{ }>()
- 子传父
- 在父组件的子标签中自定义一个方法，方法里面的参数是子标签的传值
- 使用defineEmits()
- defineEmits([ ])
- ts defineEmits<{ ( e:'事件名’，参数：参数类型 )：void }>（）
keepAlive
- 缓存组件的内置抽象组件。它可以在包含被包裹组件的组件树上，将其所有子组件都缓存起来，而不会销毁它们
- 生命周期
- onActivated：当组件被激活（插入到DOM）时调用。
- onDeacitvated：当组件被停用（从DOM中删掉）时调用。