Vue构建版本编译原理 new Vue中引入template与render的区别(踩坑经历)

最新推荐文章于 2024-06-07 11:23:43 发布
最新推荐文章于 2024-06-07 11:23:43 发布
阅读量1k 收藏
点赞数
分类专栏： Vue.js 文章标签： html css vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WhaleFallljf/article/details/123229176
版权
本文探讨了Vue构建版本的编译原理，重点比较了在`new Vue`中使用`template`与`render`函数的区别。通过分析`main.js`和`webpack`配置，解释了在不同构建版本下，模板编译和直接使用`render`函数对组件渲染的影响，以及在`webpack`打包后可能出现的Vue根节点元素消失问题。
摘要由CSDN通过智能技术生成

Vue构建版本编译原理 new Vue中引入template与render的区别(踩坑经历)

main.js

我之前非常费解的地方是为什么我一定要在webpack中引入('vue$': 'vue/dist/vue.esm.js',)这种导入Vue的方式才可以访问到路由
我一注释掉发现就什么内容都没有了 后来审查元素发现根元素#app都直接消失了  这也是我第二次来思考这个问题是为什么
后面也是不断百度根据根元素消失来查找后来逐渐发现了原因，原来还是不熟悉文档内容，文档也写的挺清楚的，就是根据不同的
渲染方式是需要引入不同版本的vue来操作的后面放了一张图一看便知

区分情况说明 （第一种也是对应webpack中没有引入需要编译器版本的）第二种反之
第一种是当Vue渲染中使用template来渲染组件
第二种是当Vue渲染是直接render来渲染组件

new Vue({
   
  el: '#app',
  router,
  store
最低0.47元/天 解锁文章
一只像咸鱼的小鲸鱼.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于vue编译版本引入的问题的解决
10-18
在开发Vue应用时，我们经常会遇到关于Vue编译版本引入的问题。Vue提供了多种构建版本，以适应不同的开发需求。在本篇文章中，我们将探讨这个问题，以及如何解决由此引发的常见错误。 错误提示“[Vue warn]: You are...
vue 非template模式_Vue完整版与Vue非完整版的区别
weixin_42515364的博客
01-03 287
Vue完整版 Vue完整版文件名为 vue.js 和 vue.min.js , 后者是压缩版，取消了注释和警告，适合在生产环境下使用。Vue非完整版 Vue非完整版文件名为 vue.runtime.js 和 vue.runtime.min.js， 后者是压缩版，取消了注释和警告，适合在生成环境下使用。Vue完整版与Vue非完整版的区别template 和 render 怎么用t...
new Vue () 中的 render 函数与 templete 模板
qq_40792800的博客
07-21 1395
如果我们引入了完整版的 vue.js ，那么在我们webpack 打包编译的时候，生成的包就会变大，就会增加浏览器的加载时间。文档上说的是，可以是 HTML 标签名称，可以是 组件，那也就是说，我的 App 组件，直接放进去当做参数，有问题没，那必须是没问题的啊。在官网上存在这么一个例子，说的比较清楚，按照之前的理解，我使用 templete 模板是没有问题的，但是 因为 脚手架生成的项目，引入的 Vue 文件，是不带 templete 模板编译器的 运行时文件，所以导致出现了这个问题。
vue2 中如何使用 render 函数编写组件
最新发布
JackZhouMine
06-07 2824
vue 提供了声明式编写 UI 的方式，即 vue 提供了对 DOM 进行描述的方式。有两种描述 DOM 的方式：模板和 render 函数。模板在编译阶段会被转成 render 函数，这一过程叫编译模板。模板可读性好，但是有时候模板并不灵活，大型的模板可读性也不好。render 函数可读性不高，但是灵活，使用 render 函数封装组件，使用得当，可提高组件的扩展性和易用性。jsx 可解决 render 函数读写性不高的问题。在 vue 的项目入口文件中，下面的代码新建一个 vue 应用的根组件，并默认命
Vue中 模板template的四种写法
細水、長流√的专栏
12-21 4055
<div id="app"> <h1>我是直接写在构造器里的模板1</h1> </div> <template id="demo3"> <h1 style="color:red">我是选项模板3</h1> </template> <script type="x-template" id="demo4"> <h1 style="color:red">我是sc.
【Vue2.0源码学习】生命周期篇-模板编译阶段(template)
一个前端开发者
09-18 555
前几篇文章中我们介绍了生命周期的初始化阶段，我们知道，在初始化阶段各项工作做完之后调用了vm.$mount方法，该方法的调用标志着初始化阶段的结束和进入下一个阶段，从官方文档给出的生命周期流程图中可以看到，下一个阶段就进入了模板编译阶段，该阶段所做的主要工作是获取到用户传入的模板内容并将其编译成渲染函数。模板编译阶段并不是存在于Vue的所有构建版本中，它只存在于完整版（即vue.js）中。在只包含运行时版本（即）中并不存在该阶段，这是因为当使用vue-loader或vueify时，*.vue。
vue中template的三种写法
菩提本无树的博客
11-23 992
第一种（使用模板字符串）早期字符串拼接年代 <div id="app"></div> new Vue({ el: "#app", template: '<div>\ <h1>{{message}}</h1>\ <div>', data: {
vue渲染方式render和template的区别
10-15
在Vue.js中，有两种主要的渲染方式：template和render函数。了解这两种方式的差异对于前端开发人员来说至关重要，因为这将影响到组件的编写和优化。 首先，我们来看template方式。template是一种声明式的渲染方式，...
基于Vue2的独立构建与运行时构建的差别(详解)
08-28
独立构建是包含完整编译功能的版本，它能处理Vue组件中的`template`选项，将模板编译成渲染函数（render function）。这意味着在开发时，Vue会负责在运行时将模板转换为可执行的JavaScript代码。由于这个特性，独立...
vue使用render函数和template模板的渲染对比
ccattempt的博客
09-26 3157
在vue中我们通常使用template进行模板的设计，但是在某些时候无法使用template进行渲染，此时需要使用render函数。实际在vue源码中，template会被转化成render函数。 目录1、render函数的简单用法2、使用render函数渲染插槽 1、render函数的简单用法 render函数接收1个参数(createElement函数)，返回值是createElement函数的返回值（实际就是一个虚拟DOM）。createElement函数接收3个参数，分别代表HTML标签名（也可.
vue写template的4种形式
anshaobiao6449的博客
01-30 366
1.template标签（非单文件组件） <template id="t1"> <h2>66666666</h2> </template> <script> new Vue({ template: '#t1' }) </script> 2.temp...
vue的render函数
wytccc的博客
12-20 308
vue的render函数。
Vue源码学习之render
Irene1991的博客
03-03 231
Vue源码学习之render
vue2中render函数学习
m0_62823653的博客
07-09 1582
都知道项目入口文件里面有个函数长下面这样，将项目的根组件，挂载到根实例上通过渲染 render函数返回值是一个VNode -> "virtual node"虚拟节点render函数的参数是一个createElement函数第一个 标签名称第二个 属性值第三个 标签子级元素createElement返回值也是一个VNode节点createElement函数的参数有三个 第二部分：全局注册组件写法 第一步：创建js文件默认导出 第二 步：在main.js中全局注册 未完待续。。。..
Vue中render函数原理,以及为何要引入render?
qq_34511096的博客
09-15 143
Vue中render函数原理,以及为何要引入render?
Vue简单项目登录注册页面实现,axios请求方式以及跨越问题的解决
qq_62797382的博客
07-24 1549
和http.js（
Vue-router路由安装配置步骤
Taurus_666
12-19 394
路由安装 npm install --save vue-router 引入 import VueRouter from "vue-router" 创建Router const router = new VueRouter({ routers:[ path: "/index", component: HelloWorld ] }) 注入 router new Vue({ el: ...
Vue渲染：深入理解render与template的区别
"Vue 渲染方式的对比——Render 函数与 Template 模板" 在 Vue.js 开发中，有两种主要的渲染方式：Render 函数和 Template 模板。它们都是用来将 Vue 实例的数据转换为最终的 HTML，但实现方式有所不同，各有优缺点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值