Vue3知识整理

vue3考点概述

面试题

• vue3比vue2有什么优势
• 描述vue3生命周期
• 如何看待composition API 和options API
• 如何理解ref toRef 和 toRefs
• vue 3升级了哪些重要的功能
• Composition API如何实现代码逻辑的复用
• vue3 如何实现响应式
• watch 和 watchEffect 的区别是什么
• setup中如何获取组件实例
• vue3为何比vue2快
• vite是什么
• composition API 和 ReactHooks的对比

思维导图

1.vue3比vue2有什么优势

• 性能更好
• 体积更小
• 更好的TS支持
• 更好的代码支持
• 更好的逻辑抽离
• 更多新功能

2.vue3生命周期

• vue3

<script>
import {
    onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

export default {
   
    name: 'LifeCycles',

    props: {
   
        msg: String
    },

    // 等于 beforeCreate 和 created
    setup() {
   
        console.log('setup')

        onBeforeMount(() => {
   
            console.log('onBeforeMount')
        })
        onMounted(() => {
   
            console.log('onMounted')
        })
        onBeforeUpdate(() => {
   
            console.log('onBeforeUpdate')
        })
        onUpdated(() => {
   
            console.log('onUpdated')
        })
        onBeforeUnmount(() => {
   
            console.log('onBeforeUnmount')
        })
        onUnmounted(() => {
   
            console.log('onUnmounted')
        })
    },

   
}
</script>

• vue2

 beforeCreate() {
   
        console.log('beforeCreate')
    },
     created() {
   
        console.log('created')
     },
     beforeMount() {
   
         console.log('beforeMount')
     },
     mounted() {
   
         console.log('mounted')
     },
    beforeUpdate() {
   
        console.log('beforeUpdate')
     },
     updated() {
   
       console.log('updated')
   },
    // beforeDestroy 改名
     beforeUnmount() {
   
        console.log('beforeUnmount')
     },
   // destroyed 改名
     unmounted() {
   
        console.log('unmounted')
     }

3.composition API 对比options API

composition API 带来了什么

• 更好的代码组织
• 更好的逻辑复用
• 更好的类型推导

options API又叫选项API,以vue为后缀的文件，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑,如下图:

Composition API又叫组合式API,组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合）即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有 API

如何选择？

• 不建议共用，会引起混乱
• 小型项目，业务逻辑简单，用Options API
• 中大型项目，逻辑复杂，用Composition API

4.如何理解ref toRef 和 toRefs

ref

• 生成值类型的响应式数据
• 可用于模板和reactive
• 通过.value修改值
• 获取模板dom元素

<template>
    <p>ref demo {
   {
   ageRef}} {
   {
   state.name}}</p>
</template>

<script>
import {
    ref, reactive } from 'vue'

export default {
   
    name: 'Ref',
    setup() {
   
        const ageRef = ref(20) // 值类型 响应式
        const nameRef = ref('双越')

        const state = reactive({
   
            name: nameRef
        })

        setTimeout(() => {
   
            console.log('ageRef', ageRef.value)

            ageRef.value = 25 // .value 修改值
            nameRef.value = '双越A'
        }, 1500);

        return {
   
            ageRef,
            state
        }
    }
}
</script>

toRef

• 针对一个响应式对象(reactive封装)的属性
• 创建一个ref，具有响应式
• 两者保持引用关系

<template>
  <p>toRef demo - {
   {
   ageRef}} - {
   {
   state.name}} {
   {
   state.age}}</p>
</template