Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to build the same components in Vue2 and Vue3". The content in the article is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "how to build the same components in Vue2 and Vue3".

Create a template

For most components, the code in Vue2 and Vue3 is very similar, if not exactly the same. However, Vue3 supports fragments, which means that a component can have multiple root nodes.

This is especially useful when rendering components in the list to remove unnecessary wrapper div elements. In this case, however, both versions of the form component will retain only one root node.

{{title}} Submit

Values: {{username +'+ password}}

The only real difference is how to access the data. In Vue3, responsive data is encapsulated in a response state variable, so you need to access this state variable to get the value.

{{state.title}} Submit

Values: {{state.username +'+ state.password}}

Set up data

This is the main difference-the Vue2 option API vs. the Vue3 combination API.

The option API divides the code into different properties: data, calculation properties, methods, and so on. At the same time, the combined API allows code to be grouped by function rather than attribute type.

For the form component, there are only two data properties: a username and a password.

The Vue2 code looks like this-- just put two values in the data property.

Exportdefault {props: {title: String}, data () {return {username:'', password:''}}

In Vue3.0, more effort must be put into using a new setup () method, where all component initialization should take place.

In addition, to give developers more control over the response, you can access Vue's response API directly.

Creating responsive data requires three steps:

Import reactive from vue

Declare data using a responsive approach

Use the setup method to return responsive data so that the template can access

The code looks a bit like this.

Import {reactive} from 'vue' export default {props: {title: String}, setup () {const state = reactive ({username:', password:'}) return {state}}

Then in the template, you can use things such as state.username and state.password to access the

Create methods in Vue2 and Vue3

The Vue2 option API has a separate method section. This section defines all the methods and organizes them in any way you want.

Exportdefault {props: {title: String}, data () {return {username:', password:''}}, methods: {login () {/ / login method}

The setup method in the Vue3 composite API can also be handled. It works a bit like declaring data-- you must declare the method and then return it so that the rest of the component can access it.

Exportdefault {props: {title: String}, setup () {const state = reactive ({username:', password:''}) const login = () = > {/ / login method} return {login, state}

Life cycle hook

Vue2 can access lifecycle hooks directly from component options. The following sample code waits for the mounted event.

Exportdefault {props: {title: String}, data () {return {username:', password:''}}, mounted () {console.log ('component mounted')}, methods: {login () {/ / login method}

Now that you have the Vue3 composite API, almost everything is in the setup () method, including mounted lifecycle hooks.

However, lifecycle hooks are not included by default, so you must import a method called onmount in Vue3. This looks the same as importing reactive before.

Then, in the setup method, the onmount method is used by passing the function.

Import {reactive, onMounted} from 'vue' export default {props: {title: String}, setup () {/ /.. OnMounted (() = > {console.log ('component mounted')}) / /...}}

Computed attribute

Add a computed attribute to convert the user name to lowercase letters.

To do this in Vue2, add a computed field to the option object. From here, attributes can be defined like this.

Exportdefault {/ /.. Computed: {lowerCaseUsername () {return this.username.toLowerCase ()}

The design of Vue3 allows developers to import what they use, and there are no unnecessary packages in the project. In essence, they don't want developers to include things they've never used before, which has become a growing problem in Vue2.

Therefore, to use the computed attribute in Vue3, you must first import the computed into the component.

Then, similar to the way you created responsive data before, turn a piece of responsive data into a calculated value, as follows:

Import {reactive, onMounted, computed} from 'vue' export default {props: {title: String}, setup () {const state = reactive ({username:', password:', lowerCaseUsername: computed (() = > state.username.toLowerCase ())}) / /.}

Visit Props

Visiting props brings an important difference between Vue2 and Vue3-this means something completely different.

In Vue2, this almost always points to components rather than specific properties. While this makes things seemingly easy, it makes type support painful.

However, you can easily access props-- by adding a small example, such as printing out title prop during hook mounting:

Mounted () {console.log ('title:' + this.title)}

But it is no longer used in Vue3 to access props, trigger events, and get properties. In contrast, the setup () method takes two parameters:

Props-immutable access to component props

Context selection properties exposed by context-Vue3 (emit, slot, attrs)

Using the props parameter, the above code will look like this.

Mounted () {console.log ('title:' + this.title)}

Trigger event

Similarly, triggering events in Vue2 is simple, but Vue3 provides more control over how to access properties / methods.

This example wants to trigger a login event for the parent component when the "Submit" button is pressed.

The Vue2 code simply calls this.$emit and passes in the payload object.

Login () {this.$emit ('login', {username: this.username, password: this.password})}

In Vue3, however, this now has a different meaning and has to be changed a little.

Fortunately, the text object exposes emit, providing the same thing as this.$emit

All you have to do is add context as the second parameter of the setup method. The c text object is destructed to make the code more concise.

Then, simply call emit to trigger the event. As before, the emit method has two parameters:

Event name

The payload object passed with the event

Setup (props, {emit}) {/ /. Const login = () = > {emit ('login', {username: state.username, password: state.password})} / /.}

The final code for Vue2 and Vue3

great! It has reached the final stage.

All the concepts in Vue2 and Vue3 are the same, but some of the ways to access properties have changed a little.

Overall, the author believes that Vue3 will help developers write more organized code-- especially in large code bases. This is mainly because composite API allows code to be grouped according to specific features, and even functions can be extracted into their own files and imported into components as needed.

Here is the form component code in Vue2.

{{title}} Submit

Values: {{username +'+ password}}

Export default {props: {title: String}, data () {return {username:', password:''}}, mounted () {console.log ('title:' + this.title)}, computed: {lowerCaseUsername () {return this.username.toLowerCase ()}}, methods: {login () {this.$emit ('login') {username: this.username, password: this.password})}

Next is Vue3's.

{{state.title}} Submit

Values: {{state.username +'+ state.password}}

Import {reactive, onMounted, computed} from 'vue' export default {props: {title: String}, setup (props, {emit}) {const state = reactive ({username:', password:'' LowerCaseUsername: computed (() = > state.username.toLowerCase ()}) onMounted (() = > {console.log ('title:' + props.title)}) const login = () = > {emit ('login', {username: state.username, password: state.password})} return {login State}} Thank you for your reading The above is the content of "how to build the same components in Vue2 and Vue3". After the study of this article, I believe you have a deeper understanding of how to build the same components in Vue2 and Vue3. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.