草稿

2020年3月份最新vue面试题汇总一

2020年3月份最新vue面试题汇总二

2021年4月份35道vue面试题

vue的核心

• 组件化
• 数据驱动

虚拟dom

• 本质是一个js对象
• 2.0才有

虚拟Dom做了什么

• 将真实的dom转化为虚拟dom
• 更新的时候做对比

虚拟dom如何提升vue的渲染效率

• 局部更新(节点数据)
• 将直接操作dom的地方拿到两个js对象中做比较，找出差异项去更新

虚拟dom的diff算法中的patch方法

• 初始化: patch(container, vnode)
• 更新： update(vnode, newVode)

const createVnode = function(vnode) {
  let tag = vnode.tag;
  let attrs = vnode.attrs || {};
  let childrens = vnode.children || [];
  
  if (!tag) { return null; }

  // 创建tag元素
  let elem = document.createElement(tag);
  // 给元素添加对应属性
  for (let attrName in attrs) {
    if (attrs.hasOwnProperty(attrName)) {
      elem.setAttribute(attrName, attrs[attrName]);
    }
  }
  // 添加子节点
  childrens.forEach(item => {
    elem.appendChild(createVnode(item));
  });
  return elem;
}

const updateChildren = (vnode, newVnode) => {
  let children = vnode.children || [];
  let newChildren = newVnode.children || [];
  children.forEach((childrenVnode, index) => {
    let newChildrenVnode = newChildren[index];
    if (childrenVnode.tag === newChildrenVnode.tag) {
      updateChildren(childrenVnode, newChildrenVnode);
    } else {
      // vue中的节点替换方法
      replace(childrenVnode, newChildrenVnode);
    }
  });
}

const files = await Promise.all(
          paths.map(async absolutePath => {
            // 读取文件
            const data = await readFile(absolutePath)
            // 获取文件名称
            const relativePath = path.basename(absolutePath)
            // 和to属性结合
            // 没有to ---> reset.css
            // 有to ---> css/reset.css
            const filename = path.join(to, relativePath)
            return {
              // 文件数据
              data,
              // 文件名称
              filename
            }
          })
        )