1. Changes created and introduced

-Create vue3 project

Create from scaffold Vue cli

npm install -g @vue/cli or yarn global add @vue/cli
vue create app-name Or through ui Page to create

-Introduce vue3 into the project

vue3 introduction mode

import { createApp } from 'vue'; //Introducing factory functions
import App from './App.vue'; //Import app components
const app = createApp(App)
app.mount('#app')

vue2 introduction mode

import Vue from 'vue'
import App from './app.vue'
new Vue({
  render: h => h(App)
}).$mount('#app')

The components of vue3 can not write the root tag, and vue3 will automatically wrap the elements into a fragment

2. Change of configuration items

-setup configuration item

vue3 adds a setup configuration item. The original data, methods, computed and other configuration items can be written in setup. Setup is executed once before beforeCreate. At this time, this value is undefined. Therefore, this is not recommended in setup. There are the following points to note:

1. Its value is a function that can write properties, methods, etc
2. Two parameters can be passed: props and context
3. You need to return an object to return the attributes or methods required by the template
4. Can't write asynchronous methods (usually)

setup: function(props, context) {
	let name = 'wmh',
	let age = 18
	return {
		name,
		age
	}
}

Parameter problem of setup:

1. Props: the value is an object, which contains the attributes passed from outside the component and received through the props configuration item declaration inside the component,
2. Context: context object, including three contents
   • attrs: the value is an object that contains attributes passed from outside the component but not declared in the props configuration
   • slots: received slot contents
   • emit: a function that distributes custom events. The emits configuration item needs to be configured

3. Composition API

1. ref and reactive: responsive functions

ref and reactive functions: responsiveness base api

import { ref } from 'vue' //Import ref function

setup() {
	let name = ref('wmh') //Receives a value and returns a ref object (reference object) with variable response
	name.value = 'wyz' //The value needs to be manipulated by. Value
	return {
		name
	}
}

import { creative } from 'vue' //Import creative function

setup() {
	let person = creative({ //Returns a reactive object (proxy object)
		name:'wmh',
		age: 18
	}) 
	person.name = 'wyz' //You do not need to manipulate values through. value
	return {
		person
	}
}

Comparison between ref and reactive:

1. In terms of defining data types, ref is used to define basic data types, as well as objects and arrays. It will be automatically converted into proxy objects through reactive; Reactive is used to define objects or arrays
2. From the perspective of the principle of responsiveness: the ref function intercepts data through the set and get of object.defineProperty, so as to realize responsiveness; The reactive function intercepts data through proxy and operates attributes through reflect
3. In terms of usage: ref needs to use. value to operate attributes, but it is not required for template output; reactive does not require. value

2. computed: calculated attribute function

The usage is similar to vue2, but the definition is slightly different. Use code to demonstrate

import { computed } from 'vue' //Import computed function
//The following code is written in the setup configuration item

// Writing method 1: abbreviation
let fullName = computed({
	return firstName + lastName
})

// Writing 2: complete writing
let fullName = computed({
    get(){
		return firstName + lastName    
	}    
	set(){}
})

2. watch: listening function

1. Ordinary watch function

The watch configuration item similar to vue2 is written in the setup configuration item. It should be noted that it listens to a reactive or ref object, which means that. value is not required when listening here,

• Import through import:

import { watch } from 'vue' //Import watch function
let count = ref(0) //Define a ref object
let count1 = ref(18)
let person = reactive({ //Define a proxy object
	name: 'wmh',
	age: 18
})

• Listen for a single attribute:

// Listening to ref objects
watch(count, (count, oldCount) => {
  /* ... */
})

// Listening to proxy objects
watch(person, person => {
  /* ... */
})

oldValue could not be obtained correctly when listening for proxy object of reactive package
When monitoring a property in the data defined by reactive, the deep configuration takes effect (forced to turn on deep monitoring)

• Listen for a specific attribute of the proxy object:

// Listen to the name attribute of person
watch(() => person.name, (value, oldValue) => {
	/* ... */
})

Note that the oldValue can be obtained correctly here

• Listen for some specific properties of the proxy object: wrap with an array

// Listen for the name and age attributes of person
watch([() => person.name,() => person.age], (value, oldValue) => {
	/* ... */
})

• Listen for multiple attributes: wrap with an array

// Listen for multiple properties
watch([count, count1], ([count, count1], [oldCount, oldCount1]) => {
  /* ... */
})

2. watchEffect function

Different from the ordinary watch function, it needs to specify both the listening attribute and the callback. The watchEffect does not need to specify which attribute to listen on. It can listen on which attribute is used in the listening callback

import { watchEffect } from 'vue'
let name = ref('wmh')
let age = ref(18)

// If the following code uses the name and age attributes, it will automatically listen for them
watchEffect(() => {
	const x1 = name.value
	const x2 = age.value
})

Comparison between watchEffect and computed:

• computed focuses on the calculated value (the return value of the callback function), so it must return the value
• watchEffect pays more attention to the process (the function body of the callback function), so it does not need to return a value