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:
ref
API read efficiency is improved260%
Writing efficiency is improved50%
- The efficiency of dependent collection has improved
40%
. - Lost about
17%
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-for
The use ofv-memo
Make sure they are used on the same element.v-memo
在 v-for
The 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.attr
To 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!