关于vue.js:使用-Vue-3-时应避免的-10-个错误

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

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

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

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

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

const count = ref(0)

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

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

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

应用 Reactive 申明原始值

解构响应式数据

对.value 感到困惑

触发事件

申明附加选项

应用响应式转换

定义异步组件

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

应用谬误的生命周期

不看文档

总结