Vue component rendering/updating process (notes for personal use)

Table of contents

1. Review what you have learned

2. Component rendering/updating process

2.1 Initial rendering process

2.2 Update process

2.3 Asynchronous rendering

 3. Summary

---

1. Review what you have learned

• Responsive: listen data attribute getter setter (including array)
• Template compilation: template to render function, then to vnode
• vdom：patch(elem, vnode) 和 patch(vnode, newVnode)

2. Component rendering/updating process

• initial rendering pass
• update process
• asynchronous rendering 

2.1 Initial rendering process

• Parse the template as a render function (or it has been completed in the development environment, such as: vue-loader)
• Trigger responsive, listen data attribute getter setter
• Execute the render function to generate vnode, patch(elem, vnode)

Executing the render function will trigger the getter

<p>{
   
   { message }}</p>
<script>
  export default {
    data() {
      return {
        message: 'hello', // 会触发 getter
        city: '北京' // 不会触发 getter，因为模板没用到，即和视图没关系，改变时，也不会触发setter
      }
    }
  }
</script>

2.2 Update process

• Modify data, trigger setter (previously monitored in getter)
• Re-execute the render function to generate newVnode
• patch(vnode, newVnode)

2.3 Asynchronous rendering

•  Review $nextTick
• Summarize the modification of data and update the view at one time
• Reduce the number of DOM operations and improve performance

<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 渲染完再回调
        // 2. 页面渲染时会将 data 的修改做整合，多次 data 修改只会渲染一次
        this.$nextTick(() => {
          // 获取 DOM 元素
          const ulElem = this.$refs.ul1
          // eslint-disable-next-line
          console.log( ulElem.childNodes.length )
        })
    }
  }
}
</script>

 3. Summary

• The relationship between rendering and responsiveness
• The relationship between rendering and template compilation
• The relationship between rendering and vdom