Share 3 ways to improve Vue performance

  1. A single property of the listening object
  2. Processing data that does not require responsiveness
  3. Destroy the timer using the hook function

1. Listen for a single attribute of an object

Scenario: Listen to a Person object, the id of the Person object changes, and a network request is made

General writing:

watch: {
    // The function fires when any property of person changes
    'person': function () {
      do something ...
    },
    deep:true
  }
Copy the code

Optimized writing method:

watch: {
    // This function will run if the id property of the person is changed
    // Person's other properties have changed, not triggered
    'person.id.': function () {
      dosomething ... }}Copy the code

2. Process data that does not require responsiveness

Vue uses object.defineProperty to hijack the Object to implement the response, which takes some performance. Performance can be optimized by handling data that does not change after initialization so that Vue does not hijack it

General writing

data: function () {
  return {
  	// No responsive objects are required
  	constantObj: {name:'xixi'.age:12.skill:'singing' }
  	constantArr: [...].// Reactive objects are required
    nomalObj: {name:'haha'.age:24.skill:'skiing'}}}Copy the code

Optimization writing method 1:

data: function () {
	// No responsive objects are required
  	this.constantObj = { name:'xixi'.age:12.skill:'singing' }
  	this.constantArr = [...]
    return {
  	  // Reactive objects are required
      nomalObj: {name:'haha'.age:24.skill:'skiing'}}}Copy the code

Optimization writing method 2:

data: function () {
    return {
  	  // Reactive objects are required
      nomalObj: {name:'haha'.age:24.skill:'skiing' }
      // No responsive objects are required
  	  this.constantObj = Object.freeze({ name:'xixi'.age:12.skill:'singing' })
  	  this.constantArr = Object.freeze([...] )}}Copy the code

Object.freeze() can set the information property of an Object to false

Vue does not add any data hijking methods, such as setters and getters, to an object that is freely set to false and is freely configurable

3. Use the hook function to destroy the timer

Scenario: Time displayGeneral writing

<template>
  <div v-text="currentTime"></div>
</template>

data: function () {
    return {
  	currentTime: moment().format('HH: mm: ss')}}created() {
	// The timer is still running when the component is destroyed
	setInterval(() = > {
      this.currentTime = moment().format('HH: mm: ss')},1000)}Copy the code

Each time a timer is defined, a new queued timer is added to the queue of the timer thread. Even if you jump to another page, the queue still exists. As soon as the timer arrives, it will take the contents of the timer out of the queue and start executing.

Optimization writing method 1:

<template>
  <div v-text="currentTime"></div>
</template>

data: function () {
    return {
    timer:null
  	currentTime: moment().format('HH: mm: ss')}}created() {
	// The timer is still running when the component is destroyed
	this.timer = setInterval(() = > {
      this.currentTime = moment().format('HH: mm: ss')},1000)}beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
}
Copy the code

Optimization writing method 2:

<template>
  <div v-text="currentTime"></div>
</template>

data: function () {
    return {
  	  currentTime: moment().format('HH: mm: ss')}}created() {
	this.startTime()
}
methods: {startTime(){
      let timer = setInterval(() = >{
       this.currentTime = moment().format('HH: mm: ss')},1000);
      / * * * * * * * * * * * * * * * * * * * *
      this.$once('hook:beforeDestroy'.() = >{
        clearInterval(timer);
        timer = null; }}})Copy the code

After the