What are the mistakes to avoid in Vue3

Declaring primitive values ​​using Reactive

Data declaration has been very straightforward in the past, but now there are many helper functions for us to use. The current rules are:

• Use reactive to declare Object, Array, Map, Set

• Use ref to declare String, Number, Boolean

Using reactive for a primitive value will return a warning, And the value will not become reactive data.

/* DOES NOT WORK AS EXPECTED */
<script setup>
import { reactive } from "vue";

const count = reactive(0);
</script>

Paradoxically, another way is possible. For example, using ref to declare an Array will internally call reactive.

Deconstructing reactive data

Suppose you have a reactive object with a count property, and a button to increment 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>

The above logic is fairly straightforward and works as expected, but you might be able to take advantage of JavaScript's destructuring to do the following:

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

The code looks the same, and based on what we've seen before The experience should be feasible, but in fact, Vue's reactive tracking is through property access. This means that we cannot assign or destructure a reactive object because the reactive connection to the first reference has been broken. This is one of the limitations of using reactive helper functions.

Confused about .value

Similarly, using a weird pattern of ref can be hard to get used to.

RefReceives a value and returns a reactive object. The value is available inside the object under the .value property.

const count = ref(0)

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

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

But ref will be unpacked when used in a template file, and .value is not required.

<script setup>
import { ref } from &#39;vue&#39;

const count = ref(0)

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

<template>
  <button @click="increment">
    {{ count }} // no .value needed
  </button>
</template>

But be careful! Unwrapping only works in top-level properties. The following code snippet generates [object Object].

// DON'T DO THIS
<script setup>
import { ref } from &#39;vue&#39;

const object = { foo: ref(1) }

</script>

<template>
  {{ object.foo + 1 }}  // [object Object]
</template>

Using .value correctly takes time. Even though I sometimes forget how to use it, I use it more and more often.

Triggering events

Since the initial release of Vue, child components can communicate with parent components using emit. You just need to add a custom event listener to listen for an event.

// 子组件
this.$emit('my-event')

// 父组件
<my-component @my-event="doSomething" />

Now, emit needs to be declared using defineEmits.

<script setup>
const emit = defineEmits([&#39;my-event&#39;])
emit(&#39;my-event&#39;)
</script>

Another thing to remember is that neither defineEmits nor defineProps need to be imported. They are automatically available when using script setup.

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

const emit = defineEmits([&#39;change&#39;, &#39;delete&#39;])
// setup code
</script>

Finally, since the event must now be declared, there is no need to use the .native modifier, in fact it has been removed.

Declare additional options

Options API methods have several properties that are not supported in script setup.

• name

• inheritAttrs

• Custom options required for plugins or libraries

The solution is to set up two different scripts in the same component as defined by the script setupRFC.

<script>
  export default {
    name: &#39;CustomName&#39;,
    inheritAttrs: false,
    customOptions: {}
  }
</script>

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

Using Reactive Transform

Reactivity Transform is an experimental but controversial feature of Vue 3 that aims to simplify the way components are declared. The idea is to utilize compile-time transformations to automatically unpack a ref and render .value obsolete. But now it is abandoned and will be removed in Vue 3.3. It's still available as a package, but since it's not part of Vue core, it's best not to invest time in it.

Define asynchronous components

Previously, asynchronous components were declared by wrapping them in a function.

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

Starting from Vue 3, asynchronous components need to be explicitly defined using the defineAsyncComponent helper function.

import { defineAsyncComponent } from 'vue'

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

Using redundant wrapped elements in templates

In Vue 2, component templates require a single root element, which sometimes introduces unnecessary wrapped elements.

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

This is no longer necessary as multiple root elements are now supported. ????

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

Using wrong lifecycle

All component lifecycle events have been renamed, either by adding the on prefix, or by changing the name entirely. You can see all the changes in the chart below.

The above is the detailed content of What are the mistakes to avoid in Vue3. For more information, please follow other related articles on the PHP Chinese website!