当前位置:网站首页>render函数与虚拟dom

render函数与虚拟dom

2022-07-04 19:48:00 bug丸

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>

在这里插入图片描述

原网站

版权声明
本文为[bug丸]所创,转载请带上原文链接,感谢
https://blog.csdn.net/weixin_50576800/article/details/125578391