Vue 3曾经稳固了相当长一段时间了。许多代码库都在生产环境中应用它，其他人最终都将不得不迁徙到Vue 3。我当初有机会应用它并记录了我的谬误，上面这些谬误你可能想要防止。

应用Reactive申明原始值

数据申明在过来都是十分间接的，然而当初有很多帮忙函数供咱们应用。目前的规定是：

  • 应用reactive申明Object, Array, Map, Set
  • 应用ref申明String, Number, Boolean

为一个原始值应用reactive会返回一个正告，并且该值不会成为可响应式数据。

/* DOES NOT WORK AS EXPECTED */<script setup>import { reactive } from "vue";const count = reactive(0);</script>

矛盾的是，另一种形式是可行的。例如，应用ref来申明一个Array会在外部调用reactive。

解构响应式数据

假如你有一个响应式对象领有count属性，并且有一个按钮来递增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>

上述逻辑相当间接，而且如预期的那样工作，但你可能会利用javascript的解构来做以下事件：

/* DOES NOT WORK AS EXPECTED */<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的响应式跟踪是通过属性拜访进行的。这意味着咱们不能赋值或解构一个响应式对象，因为与第一个援用的响应式连贯曾经断开。这就是应用响应式帮忙函数的局限性之一。

对.value感到困惑

同样的，应用ref的一个怪异模式可能也很难习惯。

Ref接管一个值，并返回响应式对象。该值在对象外部的.value属性下可用。

const count = ref(0)console.log(count) // { value: 0 }console.log(count.value) // 0count.value++console.log(count.value) // 1

然而ref在模板文件中应用时会被解包，并且不须要.value。

<script setup>import { ref } from 'vue'const count = ref(0)function increment() {  count.value++}</script><template>  <button @click="increment">    {{ count }} // no .value needed  </button></template>

然而要小心了！解包只在顶级属性中失效。上面的代码片段会生成[object Object]。

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

正确地应用.value须要工夫。只管某些时候我会遗记如何应用，然而应用它的频率越来越高。

触发事件

自从Vue的最后公布以来，子组件就能够与父组件应用emit来通信。你只须要增加自定义事件监听器来监听一个事件。

// 子组件this.$emit('my-event')// 父组件<my-component @my-event="doSomething" />

当初，emit须要应用defineEmits来进行申明。

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

另一件要记住的事件是，defineEmits和defineProps都不须要被导入。它们在应用script setup时主动可用。

<script setup>const props = defineProps({  foo: String})const emit = defineEmits(['change', 'delete'])// setup code</script>

最初，因为事件当初必须被申明，所以不须要应用.native修饰符，事实上它曾经被移除了。

申明附加选项

Options API办法有几个属性在script setup中是不被反对的。

  • name
  • inheritAttrs
  • 插件或库所需的自定义选项

解决办法是依照script setupRFC的定义，在同一个组件中设置两个不同的脚本。

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

应用响应式转换

Reactivity Transform是Vue 3的一个实验性但有争议的性能，目标是简化组件的申明形式。它的想法是利用编译时的转换来主动解包一个ref，并使.value过期。但当初它被放弃了，并将在Vue 3.3中被删除。它依然能够作为一个包应用，但因为它不是Vue外围的一部分，所以最好不要在它身上投入工夫。

定义异步组件

以前的异步组件是通过将其蕴含在一个函数中来申明的。

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

从 Vue 3开始，异步组件须要应用defineAsyncComponent帮忙函数来显式地定义。

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

在模板中应用多余的包裹元素

在Vue 2中，组件模板须要一个繁多的根元素，这有时会引入不必要的包裹元素。

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

当初不再须要这样了，因为当初反对多个根元素。

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

应用谬误的生命周期

所有的组件生命周期事件都被重新命名，要么增加on前缀，要么齐全扭转名称。你能够在上面的图表中查看所有的变动。

不看文档

最初，官网文档曾经进行了批改以反映新的API，并包含许多有价值的阐明、指南和最佳实际。即便你是一个经验丰富的Vue 2工程师，你也肯定会通过浏览文档学到一些新货色。

总结

每个框架都有一个学习曲线，而Vue 3的学习曲线无疑比Vue 2的更平缓。我依然不置信两个版本之间的迁徙工作是正当的，但组合式API要整洁得多，在你把握了它之后会感觉很天然。

最初，请记住：

犯错比什么都不做要好得多。

Making mistakes is a lot better than not doing anything.

以上就是本文的全部内容。如果对你有所帮忙，欢送点赞、珍藏、转发~