Vue3知识点

什么是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中删掉）时调用。