关于vue3:Vue3中的几个坑你都见过吗

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>

然而，能够应用 ref 来封装 Object、Array 等数据类型，外部会调用 reactive。

2. 解构 reactive 对象

上面代码中，count 封装成了 reactive 对象，点击按钮时，count 会自增。

<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>

构造复制实现之后，点击按钮，成果如下：

代码看起来比拟类似，而且依据以前的体现，逻辑是能够失常执行的。但事实上，Vue 的响应式追踪通过属性获取，这意味着咱们不能去解构响应式对象，会导致援用连贯失落。这是响应式代理的限度之一。

3. 应用.value 造成的困惑

Ref 承受一个值并返回一个响应式对象，该值只有在外部对象.value 属性下可用。

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>

正确应用.value 须要工夫，初学者偶然会遗记它。在应用时，要留神只在适合的场景下应用它。

4. Emitted 事件

从 Vue 公布以来，子组件能够通过 emits 与父组件通信，只须要增加一个自定义的监听器来监听事件即可。

this.$emit('my-event')

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

Vue3 中，须要应用编译器宏 defineEmits 来申明 emits。

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>

最初，因为 Vue3 中，事件必须申明，因而再须要应用.native 修饰符，该修饰符已被移除。

5. 申明组件选项

setup 不反对如下组件选项申明：

• name
• inheritAttrs
• customOptions

如果须要持续应用这些属性，能够申明多个 script 脚本，如下所示：

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

6. 应用 Reactivity Transform

Reactivity Transform 是 Vue3 中一个预览属性，有肯定的争议性，默认是禁用的。它次要用来简化组件的申明形式。这个想法是利用编译时转换来主动解包 ref，从而防止应用.value。从 Vue3.3 中曾经删除该性能，作为一个扩大包提供。因为它不是 Vue 的外围局部，且目前危险还是比拟多，倡议先不要在此方面投入太多事件。感兴趣能够参考文章：Reactivity Transform

7. 定义异步组件

异步组件以前是通过将它们蕴含在办法中来申明的。

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>

9. 生命周期函数

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

10. 产品文档

官网对文档曾经做了更新，补充更新了 API，并蕴含很多有价值的正文、指南和最佳实际。即便你当初应用的是 Vue2，通过浏览新的文档也会学到一些新常识。

总结

每个框架都有学习曲线，Vue3 绝对 Vue2 更加平缓，在框架切换之间也会有肯定的学习老本。但 Vue3 组合式 API 绝对 Vue2 选项式 API 的确更加简洁易用。如果您在应用过程中有什么疑难，也欢送留言交换。

本文翻译自文章：

https://fadamakis.com/10-mistakes-to-avoid-when-starting-with…

扩大链接：

Spring Boot 框架下实现 Excel 服务端导入导出

我的项目实战：在线报价洽购零碎（React +SpreadJS+Echarts）

React + Springboot + Quartz，从 0 实现 Excel 报表自动化