Vue(Vue2+Vue3)——31.render(渲染)函数

简介: Vue(Vue2+Vue3)——31.render(渲染)函数

31 render(渲染)函数


  •  vue提供给我们render函数去渲染容器,但是这行代码并没有看懂
  •  它只需要在创建vm的main.js里面写一次即可
render: h => h(App)

先把它切换成正常写法

发现浏览器保错了,正在使用一个运行版的vue,并且模板解析器是无效的

通过日志错误发现,引入的vue是有问题的,没有模板解析器

vue默认给我们引用的vue.js就是残缺版本的,它是一个运行版本,缺少模板解析器

既然缺少模板解析器,那么就不能使用模板(template),这时候就要用到rander帮助我们渲染模板解析器了

首先render是一个函数,翻译过来是渲染的意思,这个函数是vue帮助我们自动调用的,它有一个参数(创建元素),我们可以根据这个参数渲染具体的内容,最后需要返回值,也就是我们最终想要的渲染结果

渲染成功

当我们引用残缺版vue的时候,想要渲染页面元素,就要使用render函数去操作,它是可以简写的,格式如下

简写的思路就是,因为不需要用到this,可以写成剪头函数,并且把参数名称写出一个字母,因为只有一行代码所以可以去掉花括号

// 简写格式
    render: h => h(App),
   //  普通格式
    // render(createElement){
    //   return createElement('h1','你好')
    // },

最终就是这个格式,使用render简单清晰明了,直接通过它进行渲染,就算引入vue.js没有模板解析器也没有关系

相关文章
|
2天前
|
JavaScript
|
1天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
10 2
|
4天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
6 0
|
4天前
|
JavaScript
【vue3】vue3中路由hash与History的设置
【vue3】vue3中路由hash与History的设置
9 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1014 0
|
4天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
16 6
|
4天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
15 4
|
4天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
10 1
|
4天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
15 1
|
9天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
19 1