This is the 11th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

Static node marking

Vue2.0: Static nodes are marked during template compilation, and static nodes are filtered when diff algorithm compares virtual DOM and real DOM.

Vue3.0: Static nodes and dynamic nodes are stored separately during template compilation. When diFF algorithm data is changed, only dynamic nodes need to be compared.

The other:

1. Vue 3’s Template supports multiple root tags, Vue 2 does not

2. Vue 3 has createApp() and Vue 2 has New Vue().\

CreateApp, new Vue({template, render})Copy the code

3. V-model replaces the previous V-Model and.sync\

Use of v-model in vue3:Copy the code
The props property name is arbitrary, assuming x\ 3.2. The event name must be "update:x"\Copy the code

Example:

<Switch :value="y" @update:value="y=$event"/> vue2 <Switch :value.sync="y"/> <Switch V-model :value="y"/>
Copy the code

4. context.emit

Context. emit was added to vue3, which is the same as this.$emit in vue2 (but can only be used with methods in vue3).

import {SetupContext } from ‘vue’ setup(props: Prop, context: SetupContext) { const toggle = () => { context.emit(‘input’, ! props.value) } return {toggle} }

5. Attribute binding in Vue3

By default all attributes are bound to the root element using inheritAttrs: False You can cancel the default binding using attrs or context. Attrs fetch all attributes using v-bing=”$attrs” Batch binding attributes using const {size, level,… Rest} = context.attrs separates the attributes

In VUe2 we bind the click event to the parent component, and the child component must trigger click internally. In VUe3 we bind the parent component to the root element of the child component

  • ButtonDemo. Vues example:
<div> 
    <Button @click="onClick" @focus="onClick" size="small">hello</Button> 
</div> 
setup() {
     const onClick = () = > {
         console.log("aaa")}return {onClick} 
}
Copy the code
  • Button.vue

<template>
  <div>
    <button>
      <slot/>
    </button>
  </div>
</template>

Copy the code

The Button click event is bound to the root div, and we need to use inheritAttrs if we want to specify click’s region as a Button element

  • Button.vue
<template> 
    <div> 
        <button v-bind="$attrs"> 
            <slot/> 
        </button> 
    </div> 
</template> 
<script lang="ts"> 
    export default { 
        inheritAttrs: false 
    } 
</script>
Copy the code

If you want some of the properties to be bound to the button and some to the div you need to do it in setup

  • Button.vue

<template>
    <div :size="size"> <button v-bind="rest"> 
        <slot/> 
        </button> 
    </div> 
</template> 
<script lang="ts"> 
    import {SetupContext} from 'vue' 
    export default { 
        inheritAttrs: false.setup(props: any, context:SetupContext ) {
            const{size, ... rest} = context.attrsreturn {size, rest} } 
        } 
</script>

Copy the code

5.2. props and context.attrs

  • The props must be declared in the props property of the current component. Attrs is not declared first

(1) :

expory default {
    inheritAttrs: false.setup(props:amy, context:SetupContext){
       ** console.log({... props})**const{size,... rest} = context.attrsreturn {size, rest}
    }
}
Copy the code

(2) :

    export default {
        inheritAttrs: false.props:{
           **size: String* *}}Copy the code

In (1), props is not declared. (2), props is declared. (3), props is declared

  • Props does not contain events, attrs does

    There is no way to declare events like click in props
  • Props has no declared attribute and will run to attrs
props:{
    size:String
}
setup(props:any,context:SetupComntext){
    console.log({... props},'props')
    console.log({... context.attrs},'attr')
    const{size,... rest} = context.attrsreturn {size,rest}
}
Copy the code

Above, we declared size in props, so there is no size in attrs

When we write attributes in HTML tags without assigning values, props supports types other than string, and attrs only has string

6. Slot Use of named slots

Usage subcomponent in VUe2

<slot name="title">
Copy the code

The parent component

<template slot="title"> <h1> hahaha </h1> </template>Copy the code

The use of the vue3 neutron component is unchanged. The parent component needs to use v-slot: slot name

The parent component

<template v-slot:title> <h1> hahaha </h1> </template>Copy the code