温州网站制作建设,做汽车网站开题报告的意义,网站添加锚点,湖南郴州市是几线城市文章目录 vue使用中常见的性能优化1#xff0c; v-for 遍历避免同时使用 v-if2#xff0c; 如果需要使用v-for给每项元素绑定事件时 可以使用事件代理**3#xff0c; 一些数据不做响应式4#xff0c;一些页面采用keep-alive缓存组件5#xff0c;第三方UI库按需导入6#… 文章目录 vue使用中常见的性能优化1 v-for 遍历避免同时使用 v-if2 如果需要使用v-for给每项元素绑定事件时 可以使用事件代理**3 一些数据不做响应式4一些页面采用keep-alive缓存组件5第三方UI库按需导入6列表数据的懒加载 上滑加载分页数据7变量本地化8事件的销毁 vue使用中常见的性能优化 1 v-for 遍历避免同时使用 v-if
在 Vue2 中 v-for 优先级更高所以编译过程中会把列表元素全部遍历生成虚拟 DOM再来通过 v-if 判断符合条件的才渲染就会有多余的逻辑判断和造成性能的浪费因为我们希望的是不符合条件的虚拟 DOM都不要生成
1为了过滤一个列表中的项目 (比如 v-foruser in users v-ifuser.isActive)。在这种情形下可以将 users 替换为一个计算属性或者方法 (比如 activeUsers)让其返回过滤后的列表
ulliv-foruser in activeUsers:keyuser.id{{ user.name }}/li
/ulmethods:{// 方法activeUsers(){//在这里面处理需要显示的数据 然后返回筛选过的列表}
}2为了避免渲染本应该被隐藏的列表 (比如 v-foruser in users v-ifshouldShowUsers)。这种情形下请将 v-if 移动至容器元素上 (比如 ul、ol)。
ul v-ifshouldShowUsersliv-foruser in users:keyuser.id{{ user.name }}/li
/ul在 Vue3 中 v-if 的优先级更高就意味着当判断条件是 v-for 遍历的列表中的属性的话v-if 是拿不到的
注意永远不要把 v-if 和 v-for 同时用在同一个元素上。
2 如果需要使用v-for给每项元素绑定事件时 可以使用事件代理**
事件代理的本质就是利用事件冒泡到父元素的特性。这样就可以不用在循环的节点上每一个都加事件了如下
在父元素ul上面添加点击事件如过需要传参的话 只需要添加自定义属性即可比如下面的 id属性 !-- 使用事件委托进行处理和传参 添加自定义属性id --ul classweekdays clickdebounce($event)li v-for(item, index) in dayList :keyindex :idindex {{ item.day }}/li/ul // 事件委托处理debounce(event) {if (event.target event.target.nodeName LI) {// 现在就可以拿到当前的节点 所以就能拿到里面的属性和数据console.log(我点击的是, event.target);}},事件代理好处有2 个 1将事件处理程序代理到父节点减少内存占用率 2动态生成子节点时能自动绑定事件处理程序到父节点
3 一些数据不做响应式
一些数据不做响应式 比如会员列表、商品列表之类的只是纯粹的数据展示不会有任何动态改变的场景下就不需要对数据做响应化处理可以大大提升渲染速度;
可以使用 Object.freeze() 方法冻结一个对象该方法冻结的对象不能被修改即不能向这个对象添加新属性不能删除已有属性不能修改该对象已有属性的可枚举性、可配置性、可写性以及不能修改已有属性的值以及该对象的原型也不能被修改
export default {data: () ({userList: []}),async created() {const users await axios.get(/api/users);this.userList Object.freeze(users);}
};Vue2 的响应式源码地址src/core/observer/index.js - 144行 是这样的:
export function defineReactive (...){// getOwnPropertyDescriptor 返回指定对象上一个自有属性对应的属性描述符// 也就是直接赋予该对象的属性不需要从原型链上进行查找的属性const property Object.getOwnPropertyDescriptor(obj, key)判断configurable 为 false不做处理if (property property.configurable false) {return}...
}可以看到一开始就判断 configurable 为 false 的直接返回不做响应式处理
configurable 为 false 表示这个属性是不能被修改的而冻结的对象的 configurable 就是为 false这是vue正常定义在data里面的数据会自动把下面的所有属性都添加get和set属性有多少就添加多少 开始冻结对象
freList是请求后端的列表数据 created() {this.dayList Object.freeze(freList)console.log(daylist:,this.dayList);},可以看出已经没有get和set属性了但同时这些数据也不具备响应式了 4一些页面采用keep-alive缓存组件
比如在表单输入页面进入下一步后再返回上一步到表单页时要保留表单输入的内容、比如在列表页详情页列表页这样来回跳转的场景等
基础使用 如果需要缓存整个项目则如下设置(直接包裹根router-view即可)keep-aliverouter-view /router-view/keep-alive缓存部分页面或者组件使用route.meta属性keep-aliverouter-view v-if$route.meta.keepAlive/router-view/keep-aliverouter-view v-if!$route.meta.keepAlive/router-view注keep-alive 包裹动态组件时会缓存不活动的组件实例而不是销毁它们。keep-alivecomponent :isview/component/keep-alive 注意 配置了keepAlive的页面在再次进入时不会重新渲染第一次进来时会触发所有钩子函数该页面内的组件同理不会再次渲染。
而这可能会导致该组件内的相关操作那些每次都需要重新渲染页面的操作如父子组件间的传值不再生效。 这一点可能会导致一些莫名其妙而又无从查证的bug
vue2.1.0 新增了includeexclude俩个属性允许组件有条件的缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。 !-- 逗号分隔字符串 --keep-alive includea,bcomponent :isview/component/keep-alive!-- 正则表达式 (需要 v-bind绑定) --keep-alive :include/a|b/component :isview/component/keep-alive!-- 数组 (需要 v-bind绑定) --keep-alive :include[a, b]component :isview/component/keep-alive注匹配首先检查组件自身的 name 选项如果 name 选项不可用则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
动态判断使用v-bind:include
keep-alive :includeincludedComponentsrouter-view/router-view
/keep-aliveincludedComponents动态设置即可 使用beforeRouteLeave或者afterEach中进行拦截处理
如在项目在Category组件中的设置
beforeRouteLeave(to,from,next){if(to.nameDemoIndex){if(!from.meta.keepAlive){from.meta.keepAlivetrue}next()}else{from.meta.keepAlivefalseto.meta.keepAlivefalsenext()}
},
在beforeRouteLeave中to.name根据具体的路由进行动态缓存设置使用keepAlive后生命周期变化重要
首次进入缓存页面beforeRouteEnter -- created -- mounted -- activated -- deactivated 再次进入缓存页面beforeRouteEnter -- activated -- deactivated
注 1、这里的activated非常有用因为页面被缓存时created,mounted等生命周期均失效你若想进行一些操作那么可以在activated内完成(下面会举个栗子列表页回到上次浏览位置) 2、activated keep-alive组件激活时调用该钩子在服务器端渲染期间不被调用。 3、deactivated keep-alive组件停用时调用该钩子在服务端渲染期间不被调用。
5第三方UI库按需导入
比如 vantUi element-ui库的按需引入见这篇文章
6列表数据的懒加载 上滑加载分页数据
列表数据的懒加载滚动条上划到底时开始请求下一页的数据尽量配合防抖函数使用防止一瞬间请求的次数太多。
如下代码
这边我用的是vue3写的vue2只是获取节点的方式不一样其他都一样的
onMounted(() {// 获取滚动容器的节点let containerEle showContentEl.value;if (!containerEle) return;// 监听滚动条containerEle.addEventListener(scroll, function () {const clientHeight containerEle.clientHeight;const scrollTop parseInt(containerEle.scrollTop);const scrollHeight containerEle.scrollHeight;// 判断是否滚动条是否滚动到底 -1是为了控制误差if (clientHeight scrollTop scrollHeight - 1) {// 开始防抖请求数据debounceLoadMaterialList();}});
});templatediv classcontainerdiv classlist展示的列表数据/div/div
/template设置接口防抖
import * as _ from lodash;
// 设置接口防抖
const debounceLoadMaterialList _.debounce(loadMaterialList, 500);7变量本地化
简单说就是把会多次引用的变量保存起来因为每次访问 this.xx 的时候由于是响应式对象所以每次都会触发 getter然后执行依赖收集的相关代码如果使用变量次数越多性能自然就越差;
从需求上说在一个函数里一个变量执行一次依赖收集就够了可是很多人习惯性的在项目中大量写 this.xx而忽略了 this.xx 背后做的事就会导致性能问题了;
比如下面vue2的例子
templatediv :style{ opacity: number / 100 } {{ result }}/div
/template
script
import { someThing } from /utils
export default {props: [number],computed: {base () { return 100 },result () {let base this.base, number this.number // 保存起来 -- 变量本地化for (let i 0; i 1000; i) {number someThing(base) // 避免频繁引用 this.xx}return number}}
}
/script8事件的销毁
Vue 组件销毁时会自动解绑它的全部指令及事件监听器但是仅限于组件本身的事件;
而对于定时器、 addEventListener 注册的监听器等就需要在组件销毁的生命周期钩子中手动销毁或解绑以避免内存泄露
script
export default {created() {this.timer setInterval(this.refresh, 2000)addEventListener(touchmove, this.touchmove, false)},beforeDestroy() {clearInterval(this.timer)this.timer nullremoveEventListener(touchmove, this.touchmove, false)}
}
/script
