Vue性能优化写法

Posted 2021-08-15 星云-

分享3个提升Vue性能的写法

1. 监听对象的单个属性
2. 处理不需要响应式的数据
3. 利用钩子函数销毁定时器

1.监听对象的单个属性

场景：监听一个person对象，person对象的id发生变化，发起网络请求

一般写法：

watch: {
    // person的任意属性发生改变， 都会触发函数
    'person': function () {
      do something ...
    },
    deep:true
  }

优化写法：

watch: {
    // 如果person的id属性发生改变，这个函数就会运行
    // person的其他属性发生改变， 不触发
    'person.id.': function () {
      do something ...
    }
  }

2.处理不需要响应式的数据

Vue通过Object.defineProperty劫持对象实现响应式，这个过程将耗费一定性能。
特殊处理一些初始化后就不变的数据，让Vue不对它们进行劫持，可以优化性能

一般写法

data: function () {
  return {
  	// 不需要响应式的对象
  	constantObj:{ name:'xixi', age:12, skill:'singing' }
  	constantArr:[...]
  	// 需要响应式的对象
    nomalObj:{ name:'haha', age:24, skill:'skiing' }
  }
}

优化写法1：

data: function () {
	// 不需要响应式的对象
  	this.constantObj = { name:'xixi', age:12, skill:'singing' }
  	this.constantArr = [...]
    return {
  	  // 需要响应式的对象
      nomalObj:{ name:'haha', age:24, skill:'skiing' }
  }
}

优化写法2：

// Object.freeze() 可以将object的 configurable 属性置为false
// Vue 在遇到 configurable 为 false 这样被设置为不可配置之后的对象属性时 不会为对象加上 setter getter 等数据劫持的方法
data: function () {
    return {
  	  // 需要响应式的对象
      nomalObj:{ name:'haha', age:24, skill:'skiing' }
      // 不需要响应式的对象
  	this.constantObj = Object.freeze({ name:'xixi', age:12, skill:'singing' })
  	this.constantArr = Object.freeze([...])
  }
}

3. 利用钩子函数销毁定时器

场景：时间显示

一般写法

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

data: function () {
    return {
  	currentTime: moment().format('HH: mm: ss')
  }
}
created() {
	// 这样写组件销毁了定时器依然在运行
	setInterval(() => {
      this.currentTime = moment().format('HH: mm: ss')
    }, 1000)
}

每定义一个计时器，就会在计时器线程的队列里面新加入一个排队的计时器。即使这个你跳转到另外一个页面，这个队列仍然存在。等计时器的一到，就会把这个计时器要执行的内容从队列拿出来开始执行。

优化写法1 :

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

data: function () {
    return {
    timer:null
  	currentTime: moment().format('HH: mm: ss')
  }
}
created() {
	// 这样写组件销毁了定时器依然在运行
	this.timer = setInterval(() => {
      this.currentTime = moment().format('HH: mm: ss')
    }, 1000)
}
beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
}

优化写法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);
      // hook函数优化写法清除定时器 相比第一种不用在打他里定义timer，更简洁
      this.$once('hook:beforeDestroy',()=>{
        clearInterval(timer);
        timer = null;
      })
    }
 }