zoukankan      html  css  js  c++  java
  • vue组件异步渲染

    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 会在本轮数据更新后,再去异步更新视图。

  • 相关阅读:
    发光二极管
    续流二极管作用及工作原理
    python backtrace注意事项
    docker tips
    direct stdin and stdout
    python skill
    mysql comments
    python dict
    python list and tuple
    Python library
  • 原文地址:https://www.cnblogs.com/fsg6/p/14473819.html
Copyright © 2011-2022 走看看