render函数与虚拟dom

render函数与虚拟dom

虚拟dom

是什么：用来描述dom的js对象

作用：vue在更新真实DOM前，虚拟dom会进行diff运算，比较更新前后虚拟DOM结构中的有差异的部分，然后采用异步更新队列的方式将差异的部分更新到真实DOM中，从而减少了最终要在真实DOM上执行的操作次数，提高了页面渲染的效率

let vDom = {
  tag: "div",
  attributes: {
    id: "vdom",
  },
  children: {},
};

从模板到真实dom：

模板 -> 进行编译 -> 成render函数 -> 虚拟dom -> 真实dom

如果直接使用render函数，就省略了模板的编译过程，vue运行的更快

render函数

render函数就是用于实现虚拟dom的

使用render函数代替模板功能

不再需要使用vue内置指令，也没法使用，我们都可以通过原生js来实现

render函数通过createElement参数来创建虚拟dom;

createElement构成了vue virtual dom的模板，它有三个参数：

第一个参数必选：可以是一个html标签，也可以是一个组件或函数

第二个参数可选：数据对象，该dom节点的配置

第三个参数可选：组节点

<script>
export default {
  render: (createElement) => {
    return createElement(
      // 第一个参数：必选，标签名
      "div",
      //   第二个参数：可选对象，标签相关信息
      {
        // 与 `v-bind:class` 的 API 相同，
        // 接受一个字符串、对象或字符串和对象组成的数组
        class: {
          baseClass: true,
          bar: false,
        },
        // 与 `v-bind:style` 的 API 相同，
        // 接受一个字符串、对象，或对象组成的数组
        style: {
          color: "red",
          fontSize: "16px",
        },
        // 普通的 HTML 特性
        attrs: {
          id: "foo",
        },
        // 组件 prop
        props: {
          myProp: "bar",
        },
        // DOM 属性
        // domProps: {
        //  innerHTML: `爱你`,
        // },
        // 事件监听器在 `on` 属性内，
        // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
        on: {
          click: function() {
            console.log(6688);
          },
        },
      },
      //   第三个参数：可选数组，子节点相关
      ["爱你!", createElement("p", ["么么哒"])]
    );
  },
};
</script>
<style lang="less" scoped>
.baseClass {
  background: #ccc;
}
</style>
.baseClass {
  background: #ccc;
}
</style>