前端天天進步一點點-20190802

Vue使用小技巧

使用 @hook 監聽子組件的生命週期鉤子，好比：

<Child @hook:mounted="childMounted" @hook:created="childCreated" />

學習地址：https://vuedose.tips/tips/listen-to-lifecycle-hooks-on-third-party-vue-js-components

Vue性能優化一

在Vue中，若是雙向數據綁定的屬性數據量比較大時，響應式數據會影響性能，能夠經過 Object.freeze(bigData) 進行優化；

export default {
  data: () => ({list: {}}),
  created() {
    this.fetchData()
  },
  method: {
    fetchData() {
	  fetch('/api/list').then((response) => this.list = Object.freeze(response.json()))
	}
  }
}

學習地址：https://vuedose.tips/tips/improve-performance-on-large-lists-in-vue-js

Vue性能優化二

開發中開啓性能調試

Vue.config.performance = true

學習地址：https://vuedose.tips/tips/measure-runtime-performance-in-vue-js-apps/

css優化

項目中，存在許多聲明的css樣式，可是有不少沒有使用到，這個時候就須要編譯的時候移除未使用到的css樣式，PurgeCSS就能夠作到

學習地址：https://vuedose.tips/tips/remove-unused-css-with-purge-css

小知識

• 一個空白漢字長度：