What exactly is updated for VUe3.2?

According to the original content of the update content mainly includes the following five blocks: 1.SSR: server rendering optimization. The @vue/server-renderer package adds an ES module that is decouple from Node.js, making it possible to use @vue/serve-render for server-side rendering in non-Node environments. For example, Workers and Service Workers 2.New SFC Features: New single-file component Features 3.Web Components: custom Web Components. 4.Effect Scope API: Used to directly control the release time of reactive side effects (computed and Watchers). This is an update to the underlying library, which we don't care about, but should know about. This is internal improvement, not developmentCopy the code

A brief introduction to Setup

At first Vue3.0 exposed variables must return to be used in the template; This can cause variables to appear many times on the page. Unkindly, Vue3.2 simply adds setup to the script tag. Can help us solve this problem. 1. Components only need to be imported without registration, properties and methods need not be returned, setup functions need not be written, export default need not be written, and even custom instructions can be automatically obtained in our template.Copy the code

Variables and methods do not need to return

<template> <div class="home"> < {flag}} <button @click="changeHander"> </button> </div> </template> <! <script lang="ts" setup> import {ref} from 'vue'; <! Let flag=ref(" start - first loop ") <! Let changeHander=():void=>{flag.value=' start - second loop '} </script>Copy the code

Components do not need to be registered

<! </h2> </div> </template> <div class="home"> <test-com></test-com> </div> </template> <script lang="ts" setup> TestCom import TestCom from ".. /components/TestCom.vue" </script>Copy the code

Analyze the changes to components since setup was introduced

In Script Setup, imported components can be used directly without having to register with components. There is no way to specify the name of the current component, it will automatically take the filename as the main name, that is, the name property is no longer needed. When we need to use a lot of components on our page, its functionality is immediately apparent.Copy the code

New defineProps

I've been emphasizing that you don't need to use the setup function. The smart guy would say: So how does the child accept the value passed by the parent? Props, how do I get the emit? Don't worry, there's a new API, our main character definePropsCopy the code

The use of defineProps

The parent component passes parameters
<template> <div class="home"> <test-com :info=" MSG "time="42 min "></test-com> </div> </template> <script lang="ts" setup> // The name of the component uses a large hump, which does not need to be registered. import TestCom from ".. /components/ testcom. vue" let MSG =' bus - first loop '</script>Copy the code
The child component accepts parameters
< the template > < div > < h2 > hello - I'm XiaoHeYun < / h2 > < p > information: {{info}} < / p > < p > {{time}} < / p > < / div > < / template > < script lang = "ts" setup > import {defineProps} from 'vue' defineProps({ info:{ type:String, default:'----' }, time:{ type:String, Default :'0 minutes'},}) </script>Copy the code

How does a child component throw an event to a parent? defineEmits is coming!

Use of child components
Don't worry, we use defineEmits. It can throw events like the parent component. </button @click="hander2Click"> </button> </button @click="hander2Click"> </div> </template> <script lang="ts" setup> import {defineEmits} from 'vue' // create name with defineEmits, $myemit=defineEmits(['myAdd','myDel']) let hander1Click=():void=>{$myemit('myAdd',' new data ')} let $myemit=defineEmits(['myAdd','myDel']) let hander1Click=():void=>{$myAdd ('myAdd',' new data ')} let Hander2Click = () : void = > {$myemit (' myDel ', 'delete data')} < / script >Copy the code
The parent component
<template> <div class="home"> <test-com @myAdd="myAddHander" @myDel='myDelHander'></test-com> </div> </template> <script Lang ="ts" setup> // Big hump is used for component naming. TestCom import TestCom from ".. /components/ testcom. vue" let myAddHander=(mess):void=>{console.log(' add ==>',mess); /components/ testcom. vue" let myAddHander=(mess):void=>{console.log(' add ==>',mess); } let myDelHander=(mess):void=>{console.log(' delete ==>', mess); } </script>Copy the code

How do I get property values in child components

Child components
< the template > < div > < h2 > hello - I'm XiaoHeYun < / h2 > < p > gender: {{sex}} < / p > < p > other information: {{info}} < / p > < / div > < / template > < script lang = "ts" setup >  import { reactive, ref,defineExpose } from "vue"; Let sex=ref(' male ') let info=reactive({like:' like ', age:27}) So the parent can get defineExpose({sex, info}) </script>Copy the code
The parent component
<template> <div class="home"> <test-com @myAdd="myAddHander" @myDel='myDelHander' ref="testcomRef"></test-com> <button @click="getSonHander"> </button> </div> </template> <script lang="ts" setup> import TestCom from ".. /components/TestCom.vue" import {ref} from 'vue' const testcomRef = ref() const getSonHander=()=>{ Console. log(' Get gender in child component ', testcomref.value.sex); Console. log(' Get additional information in child component ', testcomref.value.info); } </script>Copy the code

New instruction V-memo
V-memod remembers the subtree of a template that can be used on both elements and components. The instruction accepts a fixed - length array of dependent values for memory alignment. If every value in the array is the same as when it was last rendered, the update of the entire subtree is skipped. Even VNode creation of the virtual DOM will be skipped because the memory copy of the subtree can be reused. So rendering is very fast. Note that it is important to declare the memory array correctly. It is the developer's responsibility to specify the correct dependency array to avoid necessary updates being skipped. <li V-for ="item in listArr" :key="item.id" V-memo ="['valueA', 'valueB']"> {{item.name}} </li> V-memod instructions are used less, It caches a portion of the data in a template. It will only be created once and will never be updated again. In other words, memory in exchange for time.Copy the code

Style V-bind The student has graduated from the lab

Thanks to the efforts of Yudada and his team, v-Bind has graduated from the lab. We can use this property now. Cool pretty darn! We can use variables in style. Doesn't it feel so awesome! <style> v-bindCopy the code

Style V-bind turns span to red

</span> </template> <script setup> import {reactive} from 'vue' const state = reactive({ Color: 'red'}) </script> <style scoped> span {/* V-bind ('state.color'); } </style>Copy the code

The end of the

If you think my writing is good, click on the recommendation. I haven't had a referral for months. I heard that the reward of the little brother have caught up with his girlfriend, hey! If you don't believe me, if you don't believe me, give me a tip! Make sure you catch someone you likeCopy the code