Vue.js设计与实现总结 - vue框架设计概述

学习vue的小伙伴，我们一起来探索vue框架的奥秘吧！

vue中虚拟DOM渲染性能

Vue更新页面的性能消耗：

	虚拟DOM	innerHTML
纯JavaScript层面的计算	创建新的JavaScript对象 +Diff	渲染HTML字符串
DOM层面的计算	必要的DOM更新	销毁所有的DOM ，新建所有新的DOM
性能因素	与数据量变化有关	与模版大小有关

Vue采用运行时(render)+编译时(compiler)的设计模式

什么是虚拟dom?

虚拟dom就是使用javascript对象来描述dom结构。 示例：

const vnode = {
  tag:'div',
  props:{
    onClick:() => alert('hello')
  },
  children:'click me'
}

渲染器render(）函数的工作步骤？

1. 创建元素
2. 为元素添加属性和事件
3. 挂载子元素

function render(vnode,container) {
  //1.创建元素
  const el = document.createElement(vnode.tag);
  
  //2.遍历属性和事件，绑定到元素上
  for(let key in vnode.props) {
    if(key.startsWith('on')) {
      el.addEventListener(key.slice(2).toLowerCase(),vnode.props[key])
    }else {
      el[key] = vnode.props[key]
    }
  }
  
  // 3.挂载子元素
  if(vnode.children) {
    if(typeof vnode.children === 'string') {
      el.appendChild(document.createTextNode(vnode.children))
    }else if(Array.isArray(vnode.children)){
      vnode.children.forEach(child => {
        render(child,el)
      })
    }
  }
  
  container.appendChild(el)
}

什么是组件？

组件就是一组DOM元素的封装，这组DOM元素就是组件要渲染的内容。

模版是如何渲染为真实DOM的？

编译器将模版编译为渲染函数，然后通过渲染器将渲染函数返回的虚拟DOM渲染为真实DOM。

模版：

<template>
  <div @click="handler">click me</div>
</template>

<script>
export default {
  data() {
    return {

    };
  },
  methods: {
    handler(){
      console.log('click')
    }
  },
}
</script>

转为为渲染函数：

<script>
import { h } from 'vue';

export default {
  name:'Temp',
  data() {
    return {

    };
  },
  render(){
    return h('div', { onClick: this.handler }, 'click me')
  },
  methods: {
    handler(){
      alert('hello')
    }
  },
}
</script>

关注公众号前端龙仔，让我们一起来学前端！