Vue3命令式代码和声明式代码,碎片化

命令式代码和声明式代码

声明式代码的性能不优于命令式代码，因为声明式代码比命令式代码要多出找出差异的性能消耗。

最后结论为：

声明式代码的更新性能消耗=找出差异的性能消耗+直接修改的性能消耗

即原生JS操作（声明式代码） =和DOM diff算法+ 命令式代码作比较

	虚拟DOM	innerHTML
纯JavaScript运算	创建新的JavaScript对象+diff	渲染HTML字符串
DOM运算，性能因素	必要的DOM更新，与数据变化量有关	销毁所有旧DOM，创建所有新DOM，与模板

框架要做到良好的Tree-Shaking

简单来说，Tree-Shaking指的是消除那些永远不会被执行的代码。选择的打包工具webpack

或rollup.js都支持Tree-Shaking。使用前提是结构必须满足ES Moudle模块。

Vue3设计思路

h函数只是一个辅助创建虚拟DOM的工具函数

那么什么是组建的渲染函数？

​ 一个组件要渲染的内容是通过渲染函数来描述的，也就是render函数，Vue.js会根据组件的render函数的返回值拿到虚拟DOM，从而把组件通过 渲染器 渲染出来。

扁平数据转Tree递归思想

/**
 * 递归查找，获取children
 */
const getChildren = (data, result, pid) => {
  for (const item of data) {
    if (item.pid === pid) {
      const newItem = {...item, children: []};
      result.push(newItem);
      getChildren(data, newItem.children, item.id);
    }
  }
}

/**
* 转换方法
*/
const arrayToTree = (data, pid) => {
  const result = [];
  getChildren(data, result, pid)
  return result;
}