Vue3 常见面试题

核心特性

Vue3 有哪些新特性？

• Composition API
• 更好的 TypeScript 支持
• 性能优化（更小的包体积、更快的渲染）
• Fragments（多根节点组件）
• Teleport（传送门）
• Suspense（异步组件）
• 自定义渲染器 API
• 响应式系统重写（Proxy 替代 Object.defineProperty）

生命周期钩子

• vue3.0中可以继续使用vue2.x中的生命周期钩子，但有两个被更名：
  beforeDestroy 改名为 beforeUnmount
  destroyed 改名为 unmounted

• vue3.0也提供了Composition API 形式的生命周期钩子，与vue2.x中钩子对应关系如下：
      beforeCreate   = => setup()
      created        = => setup()
      beforeMount   = => onBeforeMount()
      mounted       = => onMounted()
      beforeUpdate  = => onBeforeUpdate()
      updated        ==> onUpdated()
      beforeUnmount  = => onBeforeUnmount()
      unmounted      = => onUnmounted()

computed

• 与vue2.x中的computed配置功能一致；

<template>
    <h1>个人信息</h1>
    姓: <input type="text" v-modal="person.firstName" />
    名：<input type="text" v-modal="person.lastName" />
    <br/>
    全名：<span>{{ person.fullName }} </span>
</tempalte>
<script>
    import { reactive, computed } from "vue";
    export default {
        setup(){
            let person = reactive({
              firstName: "张",
              lastName: "三",
            })
            //计算属性--简写（没有考虑计算属性被修改的情况）
            // person.fullName = computed( () => {
            //   return person.firstName + person.lastName;
            // })

            //计算属性--完整写法（考虑读和写）
            person.fullName = computed({
              get(){
                return person.firstName + "-" + person.lastName;
              }
              set(value){
                const arr = value.split("-");
                person.firstName = arr[0];
                person.lastName = arr[1];
              }
            })
            return {
              person,
            }
        }
    }  
</script>

watch

• 与vue2.x中watch配置一致

• 监视reactive定义的响应式数据中某个属性时： deep配置有效

<template>
    <h1>求和：{{ sum }}</h1>
    <button @click="sum++">点我+1</button>
</tempalte>
<script>
    
    export default {
        watch: {
            //简写
            // sum(newValue, oldValue){
            //     console.log("sum变化了", newValue, oldValue);
            // }
            // 可配置属性
            sum: {
                immediate: true,    //立即监听
                deep: true,         //深度监听
                handler(newValue, oldValue){
                    console.log("sum变化了", newValue, oldValue);
                }
            }
        }
    }  
</script>

wachtEffect()

• watch的套路是：既要指明监听的属性，也要指明监听的回调
• watchEffect的套路是： 不用指明监听哪个属性，监听的回调中用到哪个属性，那就监视哪个属性。

const todoId = ref(1)
const data = ref(null)

watch(todoId, async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
}, { immediate: true })

拉开序幕的setup

setup

• 理解：vue3.0的新的配置项，值为一个函数
• setup是所有composition API(组合API)的“表演舞台”；
• 组件中所用到的：数据，方法等等，均要配置在setup中；
• setup函数的两种返回值：
   1、若返回一个对象，则对象中的属性，方法，在模板中均可以直接使用。
   2、若返回一个渲染函数：则可以自定义渲染内容
• 注意点：
   1、尽量不要与vue2.x配置混用
    · vue2.x配置（data,methods,computed...）中可以访问到setup中的属性，方法。
    · 但在setup中不能访问到vue2.x配置（data，methods，computed...）。
    · 如有重名，setup优先。
   2、setup不能是一个async函数，因为返回值不再是return对象，而是promise，模板中看不到return对象中的属性