vue组件异步渲染
2023-09-11 14:20:08 时间
vue组件是异步渲染的
汇总data的修改,一次性更新视图
减少dom的操作次数,提高性能
<template> <div id="app"> <ul ref="ul1"> <li v-for="(item, index) in list" :key="index"> {{item}} </li> </ul> <button @click="addItem">添加一项</button> </div> </template> <script> export default { name: 'app', data() { return { list: ['a', 'b', 'c'] } }, methods: { addItem() { this.list.push(`${Date.now()}`) this.list.push(`${Date.now()}`) this.list.push(`${Date.now()}`) // 1. 异步渲染,$nextTick 待 DOM 渲染完再回调 // 3. 页面渲染时会将 data 的修改做整合,多次 data 修改只会渲染一次 this.$nextTick(() => { // 获取 DOM 元素 const ulElem = this.$refs.ul1 // 如果没加$nextTick,点击第一次,li的节点是3个(为何不是6个),因为dom是异步渲染,data数据改变不会立刻渲染 console.log( ulElem.childNodes.length ) }) } } } </script>
因为不采用异步更新,在每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑,vue 会在本轮数据更新后,再去异步更新视图。
相关文章
- (尚030)Vue_案例_存储数据(localStorage本地存储技术)
- (尚029)Vue_案例_交互footer组件功能
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- 【Vue】单文件的组件(.vue)代码实例
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- Vue - 在纯 JS 文件中调用自定义组件 / 类似 ElementUI 弹框组件 Message、Modal(在纯 js 文件中通过 import 方式引入并调用弹框模态框组件显示出来,)
- [转]Vue 中 强制组件重新渲染的正确方法
- 关于Vue中main.js,App.vue,index.html之间关系进行总结
- vue 3.0 项目搭建移动端 (二) Vue-router: router-link 与 router-view keep-alive
- Vue Provide / Inject 详细介绍(跨组件通信、响应式变化、版本变化)
- vue设置height:100%无效
- Vue--路由的基本使用(组件之间的跳转)new VueRouter---配置path和子组件---跳转路径带#<a href="#/register">---显示区域用<router-view>
- vue组件---边界处理情况
- vue组件---动态组件&异步组件
- vue中.sync修饰符,实现子组件实时更新父组件的值
- 浅析Vue数据更新了但页面不更新的7种情况及vue异步更新带来的数据响应的误解
- Vue脚手架(vue-cli)搭建和目录结构详解
- vue中异步组件实现按需加载
- vue使用axios发送post请求时的坑及解决原理
- vue 自定义封装组件 使用 model 选项
- [Vue-Treeselect Warning] Are you meant to dynamically load options? You need to use "loadOptions" prop.