复习记录
一、源码优化
代码模块化:提高组件的复用性
css也可以通过less和sass的自定义css变量来减少重复代码
for循环设置key值:
v-for进行数据遍历渲染的时候,为每一项都设置唯一的key值
为了让Vue内部核心代码能更快地找到该条数据
当旧值和新值去对比的时候,可以更快的定位到diff。
Vue路由设置成懒加载:
加快首屏渲染速度(异步组件技术)
使用keep-alive:
keep-alive是Vue提供的一个比较抽象的组件,可以使被包含的组件保留状态,或避免重新渲染
用来对组件进行缓存,从而节省性能。
<keep-alive include='include_components' exclude='exclude_components'>
<component>
<!-- 该组件是否缓存取决于include和exclude属性 -->
</component>
</keep-alive>
二、打包优化
使用cdn的方式外部加载一些资源:
vue-router、axios等Vue的周边插件
在webpack.config.js里面,externals里面设置一些不必要打包的外部引用模块。
然后在入门文件index.html里面通过cdn的方式去引入需要的插件。
减少图片使用,因为对于网页来说,图片会占用很大一部分体积
所以,优化图片的操作可以有效的来加快加载速度。
可以用一些css3的效果来代替图片效果,或者使用雪碧图来减少图片的体积。
按需引入,咱们使用的一些第三方库可以通过按需引入的方式加载。
避免引入不需要使用的部分,无端增加项目体积。
比如在使用element-ui库的时候,可以只引入需要用到的组件。
其他
- this.$refs.input1 减少获取dom节点的消耗
<</span>div id="app">
<</span>input type="text" ref="input1"/>
<</span>button @click="add">添加</</span>button>
</</span>div>
<</span>script>
new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
}
}
})
</</span>script>
- bus总线传值方式
在小项目中使用的非父子组件传值方法,即bus总线机制
//util.js
import Vue from 'vue'
export const Event = new Vue() // 定义一个事件总线
这样一个中央事件总线就定好了
//传递方
import { Event } from '../../utils/bus' // 引入这个事件总线
export default {
data() {
userId: ''
}
watch: {
userId() { // 监听userId改变时触发事件,当然你可以在所有其他事件去触发$emit
Event.$emit('changeUser', userId) // $emit接收参数,一个是触发的事件名,一个是携带的参数
}
}
//接收方
import { Event } from '../../utils/bus' // 依然是把bus总线引进来
export default {
created() {
Event.$on('changeSonRoute',showIndex => { // $on接收发送方传给我们的数据
console.log(showIndex)
})
}
}
后续再补充吧~