Vue性能优化

Posted 2022-11-11 星云-

分享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：

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

Object.freeze() 可以将object的 configurable 属性置为false
Vue 在遇到 configurable 为 false 这样被设置为不可配置之后的对象属性时 不会为对象加上 setter getter 等数据劫持的方法

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;
      )
    
 

完