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

preface

Hello, everyone. This is the end of TypeScript sharing, which has lasted for nearly half a month. Of course, the previous TypeScript sharing is superficial and basic, and you need to learn more about the source code, so I won’t share too much. From today, I will share some knowledge about Vue3.0 with you. Vue3.0 has a lot of changes compared to VUe2.0. Personally, I feel that the use of VUe3.0 is closer to react. As for some syntax commands that are not changed from 2.0, I won’t share them here. So we are going to learn about some of the changes and new technology points in 3.0. Let’s start with the use of VUe3.0.

The use of vue3.0

Vue3.0 has changed since the initialization of the VUE. We all know that in 2.0 a Vue instance is created with the form new Vue(), while in 3.0 it is created with the method createApp(). The most obvious change in 3.0 is the adoption of functional programming, where almost all operations are function-based. So we import them from Vue before we use them. Let’s start by creating an instance of vue using createApp.

  • The createApp function takes an object parameter that can contain information such as a data model
  • The createApp function returns an instance of vUE. You can then use the instance to perform operations such as registering global components and directives
// main.js
import {createApp} from 'vue';

const app = createApp({
	data(){
		return {
			message:'hello vue3.0'}}}); app.component('xxx',xxx);// Register the global component
app.directive('xxx',xxx);// Register the global directive
app.use(xxx);// Reference other components
app.mount('#app');

// The above is written separately, can also be directly written in the form of dots
createApp().component().directive().use().mount('#app')
Copy the code

Vue3.0 composite API

The concept of a composite API was introduced in VUe3.0, so what is a composite API? Compost API: A less intrusive, functional API that allows us to combine component logic more flexibly and easily, while collecting code related to the same logic concern, so that we do not have to scroll through the next logic to find it. Let’s look at a scenario in Vue2.0: In 2.0, **export default{}** is usually composed of components, props, data(), computed, watch, methods, Mounted, and created(). We all know that some data attributes are written in data(), and some methods are defined in methods, which then use data attributes in data() through this. If a component has a small amount of code that’s fine, but if you have a large component that has tens of thousands of lines of JS code, think about it if you want to see which methods the properties in data are used in, and you have to drag the scrollbar up and down to see, This is especially hard to read and understand for those who have not written these components. Here is a sample diagram of a large component from VUE, where different color blocks represent different logical concerns:

This fragmentation makes it difficult to understand and maintain complex components, so the concept of a composite API was introduced in 3.0. Now that we know what a composite API can do and what it can do, let’s take a look at how to use it

setup

To make it easier to use the composite API, VUe3.0 provides us with a new component option: Setup. The setup option is a function that takes two parameters, props and context. This function will serve as an entry point to the composite API. The Setup option allows you to define reactive data properties, register component lifecycle functions, define calculation properties, listen properties, and so on. This means that most of the code can be written in the Setup option, and then the reactive data can be exposed to external or template use via a return. Here’s a look at some of the features and considerations of the Setup option:

  • Setup is a function that takes two parameters, props and context
    • The props: props is the first parameter of setup, which is reactive and therefore cannot be deconstructed in ES6 because it would eliminate its reactive
    • Context: Context is the second argument to setup. Context is a normal object in JavaScript that is not reactive and can safely use the ES6 structure. Context exposes a number of possible values, such as attrs, slots, emit, expose, and so on
  • You cannot use this in the setup function because this does not find an instance of vue
  • All data properties, calculation properties, methods, lifecycle hook functions, and so on can be defined directly in the Setup function
  • If you want to use the setup data in the rest of the component (such as computed properties, methods, lifecycle hook functions, etc.) or in the component template, you need to expose the used data in the form of a return
  • Members in Data (), methods, and computed cannot be obtained from setup because setup calls occur before those properties are resolved
  • Setup runs around the beforeCreate and Created lifecycle hooks, so in 3.0 these two hook functions were removed, and the code that should have been written in both functions can be written directly in setup
  • None of the data properties defined in the setup function are reactive by default. To declare reactive data properties, use ref or Reactive

Here is the vue code with setup:

import { ref } from 'vue'

export default{
	components: {},props:{title},
	setup(props,context){
		let message = ref('hello world')// Define a reactive variable
		const getTitle = () = >{ console.log('title')}// Define a normal function
		onMounted(getTitle);// Call the lifecycle function
		// Everything needed for templates or other hook functions needs to be exposed here
		return {
			message,
			getTitle
		}
	}
}
Copy the code

ref

As mentioned above, variables declared in Setup are not reactive by default, and we know that vue is very responsive and data-driven, so if you upgrade vue3 it will not be reactive, which is obviously not reasonable. So vue3 provides us with two methods: REF and Reactive to make data responsive. Let’s look at REF first.

  • Ref is a function that needs to be imported into vUE before being used
  • Ref can accept a parameter as a default value for a variable
  • The return value of ref is a reactive object with a value attribute that can then be accessed or modified
  • Variables defined by ref can be directly named if they are used in templates, or accessed or modified by [variable name.value] if they are used in JavaScript
import { ref } from 'vue'

export default{
	setup(){
		let count = ref(0) // Define a reactive variable count with a default value of 0
		onMounted(() = >{
			count.value = 100// Change the value of count in the onMounted hook function.
		});
		
		// Expose the reactive variable count
		return{
			count
		}
	}
}
Copy the code
<! The count variable can be used directly in the template, without passing the. Value form.
<div>{{count}}</div>
Copy the code

reactive

Above we learned that you can create a reactive variable by using the ref function. A ref can only create one responsive variable at a time, so the problem is that a component cannot have only one or several variables. It would be too much trouble to create them all with refs. Wait, the vue guys have thought of this for a long time and have provided us with a super reactive approach that allows us to define as many things as we want, and access and modify them without having to point values. Let’s take a look at this awesome method in action.

import { reactive } from 'vue'
export default {
	setup(){
		const state = reactive({
			name:' '.title:' '.message:' '
		})
		
		return {
			...toRefs(state)
		}
	}
}
Copy the code

In the code above we define a reactive object state and then expose all of its properties. Note that another method, toRefs, is used so that state deconstruction does not lose responsiveness.

conclusion

In this article, we briefly covered some of the disadvantages of optional apis in 2.0, shared some of the new changes in Vue3.0, and the use of composite apis in 3.0 and the development and maintenance benefits of composite apis. Finally, several common methods for composite apis, setup, REF, and Reactive, are shared. That’s it for vue3.0 composite apis. Like the little partner change clothes point like message add attention oh