Vue3中的几个坑，你都见过吗？

来源 | OSCHINA 社区

作者 | 葡萄城技术团队

原文链接：https://my.oschina.net/powertoolsteam/blog/10109360

Vue3 目前已经趋于稳定，不少代码库都已经开始使用它，很多项目未来也必然要迁移至 Vue3。本文记录我在使用 Vue3 时遇到的一些问题，希望能为其他开发者提供帮助。

1. 使用 reactive 封装基础数据类型

传统开发模式中，数据声明很简单。但是在 Vue 中有多个响应式变量声明方式，整体的使用规则如下：

使用 reactive 来封装 Object，Array，Map，Set 数据类型；

使用 ref 封装 String，Number，Boolean 类型。

如果使用 reactive 来封装基础数据类型，会产生警告，同时封装的值不会成为响应式对象。

<script setup>
import { reactive } from "vue";
const count = reactive(0);
</script>

<template>
  Counter: {{ state.count }}
  <button @click="add">Increase</button>
 </template>


 <script>
 import { reactive } from "vue";
 export default {
  setup() {
   const state = reactive({ count: 0 });


   function add() {
    state.count++;
   }

   return {
    state,
    add,
   };
  },
 };
 </script>

如果需要使用 ES6 结构赋值对 state 进行结构，需要使用如下的代码：

<template>
  <div>Counter: {{ count }}</div>
  <button @click="add">Increase</button>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const state = reactive({ count: 0 });

    function add() {
      state.count++;
    }

    return {
      ...state,
      add,
    };
  },
};
</script>

const count = ref(0)

 console.log(count) // { value: 0 }
 console.log(count.value) // 0

 count.value++
 console.log(count.value) // 1

但是 ref 如果应用在 template 中，不需要对 ref 进行解包，也就是不需要使用.vue。

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }} // 不需要调用.value
  </button>
</template>

需要注意的是，解包只作用于一级属性，下边的代码会返回 [object Object]

<script setup>
import { ref } from 'vue'
const object = { foo: ref(1) }
</script>
<template>
  {{ object.foo + 1 }}  // [object Object]
</template>

this.$emit('my-event')

<my-component @my-event="doSomething" />

const emit = defineEmits(['my-event'])
 emit('my-event')
 </script>

在 setup 语法糖下，defineEmits 和 defineProps 会被自动引入。其它情况下，需要主动引入。

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

• name

• inheritAttrs

• customOptions

<script>
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {}
  }
</script>

<script setup>
  // script setup logic
</script>

const asyncModal = () => import('./Modal.vue')

Vue3 中需要使用 defineAsyncComponent 来声明异步组件。

import { defineAsyncComponent } from 'vue'
 const asyncModal = defineAsyncComponent(() 
=> import('./Modal.vue'))

8. template 中使用不必要的包装元素

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

Vue3 中支持多个根元素，不再需要使用外层 div 元素包裹。

<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

所有组件生命周期函数都通过添加 on 前缀或完全更名实现，下图详细列出了具体的变化： 

点这里 ↓↓↓ 记得 关注✔ 标星⭐ 哦