前端天天进步一点点-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

小知识

• 一个空白汉字长度：