Template

In template,Vue3 supports multiple trailing tags while Vue2 supports only one root tag

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

Copy the code

Introduce TypeScript in Vue3 with a Vite build

//src/shim-vue.d.ts
declare module "*.vue" {
    import { ComponentOptions } from "vue";
    const ComponentOptions: ComponentOptions;
    export default ComponentOptions;
}
Copy the code

vue-router

Use vuE-Router4.0 to Router Vue3 vue-Router4.0

$ npm install vue-router@next
Copy the code
//main.ts
import { createWebHistory, createRouter } from "vue-router"

const history = createWebHistory();
const routes = [
    { path: "/".component: Home },
    { path: "/hello".component: Hello }
]
const router = createRouter({
    history,
    routes
})
const app = createApp(App)
app.use(router);
app.mount("#app");
Copy the code

Vue instance

//vue2
import vue from "vue".import App from "./App.vue".new Vue({
	render(h){
    	return h(App);
     }
}).mount('#app')
//vue3
import {createApp} from 'vue';
import App from './App.vue'
createApp(App).mounte('#app');
Copy the code

global

//vue2
import Vue from "vue";
Vue.Component('Hello', {template:` 
      

       {{value}}
      
 `
	props: ['value'];
});
//vue3
const app=createApp(App);
app.component('Hello', {template:` 
      

       {{name}}
      
 `
    data(){
    	return {
        	name:'chen',
        }
    }
})
app.mount('#app');
// Prevent too many global components from making the entire library too large.
Vue3 puts global components in instances.
Copy the code

Canceled the Filters

V – model is different

//vue2
v-model = :value + @input

//vue3
v-model = :value + @input

// Custom components
v-model = :modelValue + @update:modelValue

Copy the code

The way a function component is written

//Vue2
app.component('loading', {render(h){
      return h('div', {title:'hello'},'hello']); }});//Vue3
app.component('loading', {render(){
      return h('div', {title:'hello'},'hello']); }});// the h needs to be imported from the library
// The parameters in render can be props and context
Copy the code

Data unified

data(){
	return{};
}
Copy the code

Asynchronous components (subcontract loading)

// vue2
const component=() = >import('./component');
// vue3
import {defineAsyncComponent} from "vue"
const component=defineAsyncComponent(() = >import('./component'))
Copy the code

Events to simplify

//vue2
this.$emit('name',...). ;this.$on();
this.$off();
this.$once();
//vue3
this.$emit('name',...). ;/ / the remaining $emit
Copy the code

Directive

Congruence with the life cycle

composition API

Write data, methods, computed, and lifecycle functions in one place.

setup()

The execution time is between beforeCreate and Created. Cannot use anything else within the component.

Note: Setup cannot be asynchronous

Setup () takes two arguments

If you use setup(), you might use the props and context parameters

props

//props
<script lang="ts">
export default {
    name: "Home".props: {title: String,},setup(props: any){
      console.log(props.title);
  }
}
</script>
Copy the code

Note here that we are not allowed to deconstruct the title if we want to.This can be deconstructed using toRefs().

<script lang="ts">
import {toRefs} from 'vue'
export default {
    name: "Home".props: {title: String,},setup(props: any){
      const {title}=toRefs(props);
      console.log(title.value);
  }
}
</script>
Copy the code

context

// Expose three composite properties
<script lang="js">
export default {
    setup(props,context){
      console.log(context.attrs);
      console.log(context.slots);
      console.log(context.emit);
    }
  
}
</script>
// Only these three attributes can be obtained
// Data,methods,computed data are not available.
Copy the code

Responsive data

In setup. Common variables are unable to respond to the page. If you want the data to respond to the page. Need to usereactive

reactive

There are a few things to be aware of when using Reactive

1. The elements in parentheses can only be objects and arrays (use ref-number,string, Boolean for simple data types); 2. If you want to change a complex type, you need to create a new value and then modify the new value to make the page respond.Copy the code

ref

Used to encapsulate common types.

<script>
import {ref} from "vue";
export default {
  setup(){
    const a=ref(10);
    return {a};
  }
}
</script>
Copy the code

Ref can passrefProperty to get the DOM element

<template>
  <div id="nav" ref="a">
    {{a}}
  </div>
</template>

<script>
import {ref,onMounted} from "vue";
export default {
  setup(){
    const a=ref(null);
    onMounted(() = >{
      console.log(a);
    })
    return{a}; }}</script>
// We must use the onMounted hook to manipulate elements in onMounted
Copy the code

readonly

//readonly Protects all operations: recursive protection
//const only protects assignments
import {readonly} from "vue";
export default {
  setup(){
    const a=readonly(0);
    returna; }}//readonly Protection Read-only protection is different from const protection
Copy the code

shallowRef,shallowReactive,shallowReadonly

Like ref, Reactive and Readonly, the main difference is deep monitoring and surface monitoring.

  1. Data cannot respond when using shallowRef.
  2. TriggerRef is required

Raw

toRaw

Extract the raw data of Reactive, REF and Readonly.

If you operate on raw data, it will not be listened on.

markRaw

The original object can never be converted to Reactive, REF, or Readonly. The original data is always preserved.

isRef,isReactive,isReadonly

Determine type