Life cycle diagram

Trigger order

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate
  6. updated
  7. beforeUnmount
  8. unmounted

The dynamic component keep-alive

Keep-alive can be used when remounting a component after unmounting if you want to preserve the state of the component and avoid performance problems caused by repeated rerendering.

Method of use

We simply wrap the target component with the keep-alive component.

<keep-alive>
  <life-cycle v-if="isShow"></life-cycle>
</keep-alive>
Copy the code

The value of activated is called when the keep-alive cache component is activated. The value of deactivated is called when the keep-alive cache component is uninstalled.

The use of the enclosing $nextTick

Sometimes a remote value that changes the defined variable can be retrieved using this.$nextTick.

  mounted() {
    /* mounted*/
    const oDiv1 = document.querySelector('#msg');
    console.log('1' + oDiv1.innerHTML);
    this.msg = "$nextTick demonstration";
    const oDiv2 = document.querySelector("#msg");
    console.log("2." + oDiv2.innerHTML);

    this.$nextTick(() = > {
      const oDiv3 = document.querySelector("#msg");
      console.log("3.",oDiv3.innerHTML);
    })
    console.log("Template compiled 4");
  }
Copy the code

Output 1 and output 2 above get the data before modification, only nextTick gets the data after modification.

Vue3 uses Axios to request third-party interfaces

  1. Install axios
npm i axios
Copy the code
  1. The introduction of axios
import axios from 'axios'
Copy the code
  1. Send a GET request
getData() {
  const api = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
  axios.get(api).then((response) = > {
    console.log(response);
    this.list = response.data.result;
  }).catch(err= > {
    console.log(err); })}Copy the code

Bind Axios to the global

  1. Comment out this statement in main.js
// First comment out the following sentence
// createApp(App).mount('#app')
Copy the code
  1. The introduction of axios
import Axios from 'axios'
Copy the code
  1. Bind AXIOS to the global
const app = createApp(App);
app.config.globalProperties.Axios = Axios;

app.mount('#app');
Copy the code

Fetch – jSONp requests the JSONP interface

Why do you need fetch- jSONp when you already have AXIOS, because AXIos does not support JSONP requests and this method is useful if the server only provides JSONP calls.

  1. Install the module
npm i fetch-jsonp
Copy the code
  1. The introduction of the module
import fetchJsonp from 'fetch-jsonp';
Copy the code
  1. Bind to the global
app.config.globalProperties.fetchJsonp = fetchJsonp;
Copy the code
  1. Send the request
getData() {
  const api = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=javascript";
  this.fetchJsonp(api, {
    jsonpCallback: "cb",
  })
    .then((response) = > {
      return response.json();
    })
    .then((data) = > {
      console.log(data);
      this.list = data.s;
    })
    .catch((err) = > {
      console.log(err);
    });
}
Copy the code

Input anti – shake implementation

The realization of the last character input 500ms after the request data, the new input will empty the previous input timer.

export default {
  data() {
    return {
      keyword: "".list: [].timer: ""}; },methods: {
    getData() {
      if (this.keyword ! ="") {
        clearTimeout(this.timer);
        this.timer = setTimeout(() = > {
          const api =
            "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" +
            this.keyword;
          this.fetchJsonp(api, {
            jsonpCallback: "cb",
          })
            .then((response) = > {
              return response.json();
            })
            .then((data) = > {
              console.log(data);
              this.list = data.s;
            })
            .catch((err) = > {
              console.log(err);
            });
        }, 500); ,}}}};Copy the code