Use Vue3 for data binding and display list data

1. Comparison with Vue2

1. New features of Vue3
2. Comparison of response principles between Vue2 and Vue3
3. Rewrite array methods to detect array changes
4. Intuitive experience

2. Data binding example using Vue3

1. Use ref to implement data binding
2. Use reactive to implement data binding

3. Final Thoughts

1. Comparison with Vue2

1. New features of Vue3

Re-implementation of data response ( ES6 proxy replaces Es5 's Object.defineProperty )
The source code is rewritten using ts , with better type inference
New Virtual DOM algorithm (faster, smaller)
Provides 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

shortcoming:

Unable to detect dynamic addition and removal of object properties
Unable to detect changes to array subscript and length properties

Solution:

Vue2 provides Vue.$set to dynamically add properties to objects
Vue.$delete dynamically deletes object properties

3. Rewrite array methods to detect array changes

Vue3 uses proxy to implement responsive data

advantage:

Can detect dynamic addition and deletion of proxy object attributes
You can see the changes in the subscript and length attributes of the measurement array.

shortcoming:

es6 proxy does not support lower version browser IE11
A special version will be released to support IE11

The above quotes "[Comparison of Vue2 and Vue3]" (https://www.cnblogs.com/yaxinwang/p/13800734.html)

4. Intuitive experience

At present, Vue2 is still the main one in actual work

Vue3 includes mounted , data , methods , all wrapped up in a setup（）

2. Data binding example using Vue3

In the previous article Vue3 integrated HTTP library axios details, we have realized the return of background data and displayed it on the front page (although it is in the console), but this only means that 90% of it has been completed.

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

1. Use ref to implement data binding

We still need to modify it in home , after all, it is displayed on the page, so we only need to modify Home part of the code. The specific sample code is as follows:

<template>
  <a-layout>
    <a-layout-sider width="200" style="background: #fff">
      <a-menu
          mode="inline"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ height: '100%', borderRight: 0 }"
      >
        <a-sub-menu key="sub1">
          <template #title>
                <span>
                  <user-outlined />
                  subnav 1
                </span>
          </template>
          <a-menu-item key="1">option1</a-menu-item>
          <a-menu-item key="2">option2</a-menu-item>
          <a-menu-item key="3">option3</a-menu-item>
          <a-menu-item key="4">option4</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
                <span>
                  <laptop-outlined />
                  subnav 2
                </span>
          </template>
          <a-menu-item key="5">option5</a-menu-item>
          <a-menu-item key="6">option6</a-menu-item>
          <a-menu-item key="7">option7</a-menu-item>
          <a-menu-item key="8">option8</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #title>
                <span>
                  <notification-outlined />
                  subnav 3
                </span>
          </template>
          <a-menu-item key="9">option9</a-menu-item>
          <a-menu-item key="10">option10</a-menu-item>
          <a-menu-item key="11">option11</a-menu-item>
          <a-menu-item key="12">option12</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
      {{ebooks}}
      <pre>
{{ebooks}}
      </pre>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent,onMounted,ref } from 'vue';
import axios from 'axios';

export default defineComponent({
  name: 'Home',
  setup(){
    console.log('set up');
    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
    }

  }
});
</script>

Knowledge points:

const ebooks=ref() ; This is a responsive data, and Vue3 adds ref to define responsive data, which means that ebooks is a real-time data display;
The value assigned to ref is value ;
Use {{variable}} to get the value;

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

2. Use reactive to implement data binding

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

<template>
  <a-layout>
    <a-layout-sider width="200" style="background: #fff">
      <a-menu
          mode="inline"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ height: '100%', borderRight: 0 }"
      >
        <a-sub-menu key="sub1">
          <template #title>
                <span>
                  <user-outlined />
                  subnav 1
                </span>
          </template>
          <a-menu-item key="1">option1</a-menu-item>
          <a-menu-item key="2">option2</a-menu-item>
          <a-menu-item key="3">option3</a-menu-item>
          <a-menu-item key="4">option4</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
                <span>
                  <laptop-outlined />
                  subnav 2
                </span>
          </template>
          <a-menu-item key="5">option5</a-menu-item>
          <a-menu-item key="6">option6</a-menu-item>
          <a-menu-item key="7">option7</a-menu-item>
          <a-menu-item key="8">option8</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #title>
                <span>
                  <notification-outlined />
                  subnav 3
                </span>
          </template>
          <a-menu-item key="9">option9</a-menu-item>
          <a-menu-item key="10">option10</a-menu-item>
          <a-menu-item key="11">option11</a-menu-item>
          <a-menu-item key="12">option12</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
      <strong>Using ref for data binding results:</strong><p></p>
      {{ebooks1}}
      <p></p>
      <pre>
{{ebooks1}}
      </pre>
      <strong>Using ReactiveF for data binding results:</strong><p></p>{{ebooks2}}
      <p></p>
      <pre>
{{ebooks2}}
      </pre>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent,onMounted,ref,reactive,toRef} from 'vue';
import axios from 'axios';

export default defineComponent({
  name: 'Home',
  setup(){
    console.log('set up');
    //Use ref for data binding const ebooks=ref();
    // Use reactive 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")
    }

  }
});
</script>

Knowledge points:

Need to import reactive and toRef from vue ;
In reactive({books:[]}) , reactive （） must store objects. Here I add an empty collection in books .
toRef(ebooks1,"books") converts books into a responsive variable;
Obviously, using reactive is more troublesome. You must use both reactive and ref in actual project development.
The trouble with using ref is that when using a variable, you need to add value whether you are getting it or using it.

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

3. Final Thoughts

The sense of accomplishment that front-end development gives people is more direct, because you can see it intuitively, unlike the business logic code in controller or service , where you have to write a lot and you can't understand the meaning. But this does not affect my love for coding .

This is the end of this article about using Vue3 for data binding and displaying list data. For more relevant Vue3 data binding and displaying list data content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: