vueのパフォーマンス向上 - 非レスポンシブデータ

データソースのVUEは、データ、計算、インスタンスの外、カスタムオプションが含まれ、より多くのデータの開発は、データオプションで定義されますデータのデータが応答されますが、ガチョウは、いくつかのデータは、タイマーや定数など、応答する必要はありません持っているVUEを避けるために、次のオプションを合計データアクセッサの属性を変更します。

vueインスタンス外のデータ

const test = ['1', '2', '3']
export default {
// options
}

欠点：vueテンプレートでデータにアクセスできない

created, mountedフック関数の定義

created() {
 // 変数名をdataで宣言しないように注意する。
 this.testData = 'testData'
}

カスタムオプション

<template>
 <div>{{ $options.myOptions.test }}</div>
</template>

export default {
 data() {
 },
 // カスタムオプションはデータと同じレベルである
 //  : this.$options.myOptions.test
 myOptions: {
 test: '111'
 }
}

Object.freeze()

オブジェクトをフリーズし、オブジェクトのプロパティの変更を禁止します。このメソッドは、渡されたオブジェクトの凍結コピーを作成する代わりに、渡されたオブジェクトを返します。

let a = { prop: 1, prop2: 2 } // undefined
Object.freeze(a) // {prop: 1, prop2: 2}
a.prop = 3 // 3
a // {prop: 1, prop2: 2}
// Object.freeze()凍結された値は、変数への参照で置き換えることができる。
a = {prop44: 44} // {prop44: 44}
a // {prop44: 44}
// constとobjectの区別に注意すること。.freeze
// const宣言された定数は再割り当てできず、宣言時に初期化されなければならない。
const TEST = 1
TEST = 2 //  :TypeError: Assignment to constant variable.

• Object.freezeは、ネストされたオブジェクトがある場合は、深いオブジェクトはまだ変更することができ、浅いフリーズのみ1つのレイヤですが、深いフリーズ関数の再帰的な実装の

  function deepFreeze (obj) {
   let names = Object.getOwnPropertyNames(obj)
   names.forEach(name => {
   var property = obj[name]
   if (typeof(property) === 'object' && property !== null) {
   deepFreeze(property)
   }
   return Object.freeze(property)
   })
  }
  

拡張機能

Object.seal()はオブジェクトを密封し、密封されたオブジェクトは新しいプロパティを追加できません。

ゲッターとセッターを追加すると、パフォーマンスに影響します。サードパーティのライブラリ、タイマー、定数など。