vue渲染render

最新推荐文章于 2024-01-29 16:22:44 发布

原创最新推荐文章于 2024-01-29 16:22:44 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

22 篇文章

订阅专栏

博客主要介绍了Vue中render函数相关内容。宏观上，它为固定HTML模板提供动态生成操作，比模板语法更接近编译器，可使用js构建DOM。还说明了使用render函数描述虚拟DOM时，vue提供createElement函数，有约定简写h和别名_c，并给出普通vue使用render的示例。

一、宏观上展现了Vue整体流程：

Vue推荐在绝大多数情况下使用template来创建你的HTML。然而在一些场景中，需要使用JavaScript的编程能力和创建HTML，这就是render函数，它比template更接近编译器。

其实就是为固定的HTML模板提供了动态生成的操作。简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM。

二、如何使用render

当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h，vm中有一个方法_c,也是这个函数的别名。

createElement({String-HTML 标签字符串 | Object-组件选项对象 | Function-异步函数})

三、普通vue使用render示例

<script>
    //模板
    var login = {
      template: '<h1>这是登录组件</h1>'
    }

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
     //createElements 是一个 方法，调用它，能够把 指定的 组件模板，渲染为 html 结构
      render: function (createElements) { 
        // 注意：这里 return 的结果，会 替换页面中 el 指定的那个 容器
        return createElements(login)
      }
    });
 </script>

注：通过这种方式，实现了通过js来创建HTML。尤其是有组件时候，这种方式会很方便。

注：在webpack中，需要使用渲染方式。