vue2.x的深入学习 - 关于h函数的说明

最新推荐文章于 2024-01-25 17:14:31 发布

公孙元二

最新推荐文章于 2024-01-25 17:14:31 发布

阅读量2.4k

点赞数

分类专栏： Vue2.x 文章标签： vue

本文链接：https://blog.csdn.net/Amnesiac666/article/details/119812092

版权

Vue2.x 专栏收录该内容

166 篇文章 8 订阅

订阅专栏

Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，

vue项目中。写在.vue文件的template里的代码需要借助webpack的模板解析器插件才能解析。单个.html文件引入vue文件时，该vue文件顺便把模板解析器引入进来了(缺点是体积大)。

所以我们使用工程化开发项目时候，需要在package.json文件引入vue-template-compile，用于进行模板解析在这里插入图片描述如果没有模板解析器，就解析不了，但是vue-template-compile只能解析.vue文件里的模板，没办法解析.js文件里的模板：

所以当我们这么写的时候会解析不了

在这里插入图片描述

在这里插入图片描述
为什么解析不了？因为main.js文件引入的vue文件没有带模板解析器

vue.runtime.common.js是不带模板解析器的.vue文件，vue.js是带模板解析器的vue文件

如果我们在main.js引入带有模板解析器的vue.js文件，则可以解析template
在这里插入图片描述

为什么默认引入的是不带模板解析器的vue.js文件？
因为体积问题：
在这里插入图片描述
解决方案，
使用官方提供的render函数。他能够通过h函数去调用引入的vue-template-compile，也就是第九行代码↓相当于第十一行和第十二行加上loader模板解析器。

在这里插入图片描述
总结：

扩展：

将render: h => h(App) 根据es6语法分解为：
等价于

render: function(h) { return h(App);}

等价于

render: function(createElement) { return createElement(App); }

h 函数就是 Vue中的createElement方法，函数作用为创建虚拟DOM，追踪 DOM 变化。

写一个createElement函数的demo
创建一个组件，使用createElement函数调用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>createElement方法应用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <p>下面会使用createElement方法创建DOM结点</p>
    <div id="vue-app"></div>
    <script type="text/javascript">
        var app=Vue.component('app',{
            template:'<h1>test</h1>'
        })
        new Vue({
            el: '#vue-app',
            render: function (createElement) {
                // return createElement('h1', '一则头条');//这个方式也可以
                return createElement(app);//使用调用组件
            },

        });
    </script>
</body>

</html>

运行结果是：

在这里插入图片描述

createElement参数（也就是 h函数）
createElement 函数接受三个参数，分别是：

tag(标签名)、组件的选项对象、函数（必选）
一个对象，标签的属性对应的数据（可选）
子级虚拟节点，字符串形式或数组形式，子级虚拟节点也需要使用createElement构建。

例子 ：
// 真实DOM 
    <div id="app">
        {{name}}
        <p>{{age}}</p>
    </div>

// 在 render 函数中渲染
    render: function(createElement){
        return createElement("div",{id:"app",[this.name,createElement("p",this.age)]})
    }
//  注意 ： 如果父元素有文本内容，在render函数中写的时候，内容写在参数三——数组的第一个参数中。

公孙元二

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue2.x的深入学习 - 关于h函数的说明

vue项目中。写在.vue文件的template里的代码需要借助webpack的模板解析器插件才能解析。单个.html文件引入vue文件时，该vue文件顺便把模板解析器引入进来了(缺点是体积大)。所以我们使用工程化开发项目时候，需要在package.json文件引入vue-template-compile，用于进行模板解析如果没有模板解析器，就解析不了，但是vue-template-compile只能解析.vue文件里的模板，没办法解析.js文件里的模板：所以当我们这么写的时候会解析不了为什么解析
复制链接

扫一扫