Vue 3.2 tips

Vue3.2.0 was released on August 5, 2021. Currently, the latest version is 3.2.23. The biggest highlight of vue 3.2.x is that it improves responsiveness.

The new compiler skips many runtime checks and modifies and optimizes the responsiveness of the Composition API to improve responsiveness:

• refAPI read efficiency is improved260%Writing efficiency is improved50%
• The efficiency of dependent collection has improved40%.
• Lost about17%Memory usage.

Let’s take a look at some of the little features

v-memo

Remember the subtree of a template. Can be used on elements and components. The instruction takes a fixed length array of dependent values for memory comparison. If every value in the array is the same as when it was last rendered, the update of the entire subtree is skipped. Such as:

<ul v-for="member of members" :key="member.id" v-memo="[member.username]">
  <li>{{ member.username }}</li>
</ul>
Copy the code

When the component is re-rendered, updates to this

and all of its children will be skipped if the member.username value remains the same. In fact, even VNode creation of the virtual DOM will be skipped because the memory copy of the subtree can be reused. Doesn’t that sound cool?

It is important to declare the memory array correctly, otherwise some updates that actually need to be applied may be skipped. V-memo with an empty dependent array (V-Memo =”[]”) is functionally equivalent to V-once.

The V-Memo is only optimized for performance-sensitive scenarios and should be used in very few scenarios. Render the V-for long list (length > 1000) is probably its most useful scene:

<ul v-for="member of members" :key="member.id"
    v-memo="[member.name, member.id == selectedUser]">
  <li>
    <span :class="{ selected: selectedUser == member.id }">{{ user.name }}</span>
  </li>
</ul>
Copy the code

The v-Demo array can also receive conditional statements. As shown in the code above, when a component’s selectedUser status changes, a large number of VNodes will be created even though most members have not changed at all. The V-memo used here essentially stands for “only update a member if it is unselected and becomes selected, and vice versa.”

inv-forThe use ofv-memoMake sure they are used on the same element.v-memo 在 v-forThe interior is invalid.

effectScope API

Typically, reactive side effects are bound to mounted VUE instances, and dependencies are cleaned up automatically when components are unmounted without manual modification. However, when we use or write a separate package outside of the component, this becomes very cumbersome. How do we stop responsive dependency on computed & Watch when in a separate file? A new API, the —–Effect Scope API, has emerged specifically to solve this problem

Using the effectScope API, create an Effect scoped object to capture the reactive effects created within it (such as computed property computed or listener Watch, watchEffect) so that these effects can be processed together.

EffectScope is a function that returns an object containing run (a function) and stop (a function).

import { effectScope, watchEffect, computed, ref, watch } from 'vue'
export default {
  setup () {
    const scope = effectScope()
    const counter = ref(0)

    // Change every 2 seconds
    setInterval(() = > {
      counter.value++
    }, 2000)

    // Create an effect scope object
    scope.run(() = > {
      const doubled = computed(() = > counter.value * 2)

      watch(doubled, () = > console.log('doubled:', doubled.value))

      watchEffect(() = > console.log('Count: ', counter.value))
    })

    scope.run(() = > {
      watchEffect(() = > console.log(`counter: ${counter.value}`))})// Process all effects in this scope
    // scope.stop()}}Copy the code

If not calledscope.stop()The browser always outputs results

When stop is called, the browser prints only once.

Effect:

v-bind

Abbreviation: : or. (when using the.prop modifier)

Decorator:

• .prop: Enforces a binding to a DOM property
• .attrTo force a binding to be a DOM attribute, the new shortcut is:^

Dynamically bind one or more attributes, or a component prop, to an expression.

Support other types of values, such as groups of numbers or objects, when binding class or style attributes. See the tutorial link below for details.

When binding a prop, the prop must be declared in a child component. Modifiers can be used to specify different binding types.

With no arguments, you can bind to an object that contains key-value pairs. Note that the class and style bindings do not support arrays and objects at this time.

<! <img v-bind: SRC ="imageSrc" /> <! Dynamic attribute name - - - > < button v - bind: [key] = "value" > < / button > <! <img: SRC ="imageSrc" /> <! Dynamic attribute name abbreviations -- - > < button: [key] = "value" > < / button > <! Inline string concatenation - - - > < img: SRC = "'/path/to/images / + fileName" / > <! --> <div :class="{red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"></div> <! <div :style="{fontSize: size + 'px'}"></div> <div :style="[styleObjectA, styleObjectB]"></div> <! <div v-bind="{id: someProp, 'other-attr': otherProp}"></div> <! -- prop binding. Prop "must be declared in my-Component --> < my-Component :prop="someThing"></my-component> <! <child-component v-bind="$props"></child-component> <! -- XLink --> <svg><a :xlink:special="foo"></a></svg>Copy the code

V-bind can also be used in the style tag:

<script setup> import { ref } from 'vue'; const color = ref('blue') const changeColorToRed = () => { color.value = 'red' } </script> <template> <p class="colored">{{ color }} colored text! </p> <button @click="changeColorToRed"> Change color to red! (once and for all) </button> </template> <style scoped> .colored { color: v-bind(color); } </style>Copy the code

Async Setup

Important: In Vue 3.0, lifecycle hooks cannot be await. Here’s how to do it right

async setup() {
  onCreated(() = > console.log('Server side created, let\'s get data.'));
  const data = await fetchData();
  onMounted(() = > console.log(`We have the data -{$data.metaInformation}`)); // can now be called
}
Copy the code

Script Setup

<script setup lang="ts">
  import { ref } from 'vue';
  
  const welcome = ref('Hello Tailiang') as string | undefined;
  const count = ref(0) as number;
  const increaseCount = () = > {
    count.value++;
  }
  increaseCount()
</script>

<template>
  {{ welcome }} I have a counter on my website!
  Counter: {{ counter }}
</template>
Copy the code

reference

Vue3.2 New official Property Effect Scope API — Vue

Vue3.2 change

Vue 3.2 Released!