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

This article introduces the knowledge of "how to use Vue3 for data binding and displaying list data". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Catalogue

Comparison with Vue2

1. New features of Vue3

2. Comparison of response principles between Vue2 and Vue3.

3. The method of rewriting the array to detect the array change

4. Intuitive feeling

Second, use Vue3 for data binding example

1. Use ref to implement data binding

2. Use reactive to realize data binding

1. Comparison with Vue2 1. New features of Vue3

Data response re-implementation (proxy of ES6 instead of Object.defineProperty of Es5)

The source code is rewritten with ts for better type derivation

New Virtual DOM algorithm (faster, smaller)

Provide composition api for better logic reuse and code organization

Custom renderer (app, Mini Program, game development)

Fragment, templates can have multiple root elements

2. Comparison of response principles between Vue2 and Vue3.

Vue2 uses Object.defineProperty method to implement responsive data

Disadvantages:

Dynamic addition and deletion of object attributes cannot be detected

Unable to detect changes in array subscript and length property

Solution:

Vue2 provides Vue.$set to dynamically add properties to objects.

Vue.$delete dynamically deletes object properties

3. The method of rewriting the array to detect the array change

Vue3 uses proxy to implement responsive data

Advantages:

Dynamic addition and deletion of proxy object properties can be detected

You can see the changes in the subscript of the measurement array and the length attribute

Disadvantages:

Es6's proxy does not support lower-version browser IE11

Back to support a special version of IE11

Quote "[vue2 and vue3 comparison]" (https://www.cnblogs.com/yaxinwang/p/13800734.html) above

4. Intuitive feeling

At present, Vue2 is still the main part in practical work.

Vue3 contains mounted, data and methods, all of which are packaged by a setup ()

Second, use Vue3 for data binding example

In the last Vue3 integration HTTP library axios details, we have implemented the backend to return data, which is shown in the foreground page (although it is in the console), but this only means that 90% of the data is completed.

The next step is how to return the data to the background interface and how to display it to the page.

1. Use ref to implement data binding

We still need to modify it in home. After all, it is shown on the page, so we only need to modify part of the Home code. The example code is as follows:

Subnav 1 option1 option2 option3 option4 subnav 2 option5 option6 option7 option8 Subnav 3 option9 option10 option11 option12 {{ebooks}} {{ebooks}} import {defineComponent OnMounted,ref} from 'vue' Import axios from 'axios';export default defineComponent ({name:' Home', setup () {console.log ('setup'); const ebooks=ref (); onMounted () = > {axios.get ("http://localhost:8888/ebook/list?name=spring").then(response = > {console.log (" onMounted "); const data=response.data; ebooks.value=data.content })}) return {ebooks}})

Knowledge points:

Const ebooks=ref (); this is responsive data, while Vue3 adds ref to define responsive data, that is to say, ebooks is a real-time data presentation.

The corresponding assignment of ref is value.

Use {{variable}} to take a value

Recompile, start the service, and view the results as follows:

2. Use reactive to realize data binding

Again, modify it in home. The sample code is as follows:

Subnav 1 option1 option2 option3 option4 subnav 2 option5 option6 option7 option8 Subnav 3 option9 option10 option11 option12 uses ref for data binding results:

{{ebooks1}}

{{ebooks1}} data binding results using reactivef:

{{ebooks2}}

{{ebooks2}} import {defineComponent,onMounted,ref,reactive,toRef} from 'vue';import axios from' axios';export default defineComponent ({name: 'Home', setup () {console.log (' setup'); / / use ref for data binding const ebooks=ref () / / use reactive for data binding const ebooks1=reactive ({books: []}) onMounted () = > {axios.get ("http://localhost:8888/ebook/list?name=spring").then(response = > {console.log (" onMounted "); const data=response.data; ebooks.value=data.content; ebooks1.books=data.content })}) return {ebooks1: ebooks, ebooks2:toRef (ebooks1, "books")}})

Knowledge points:

Need to import reactive, toRef from vue

Objects must be stored in the () of reactive in reactive ({books: []}). Here I add an empty collection to books.

In toRef (ebooks1, "books"), books is changed into a responsive variable

Obviously, it is troublesome to use reactive. It must be unified in the actual development of the project, and you can't use both reactive and ref.

The trouble with ref is that if you use a variable, you need to add .value to get it or use it.

Recompile, start the service, and view the results as follows:

This is the end of "how to use Vue3 for data binding and displaying list data". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.