vuejs的render渲染函数

官网文档地址:https://cn.vuejs.org/v2/guide/render-function.html

引入：

vue推荐绝大数情况下实验template创建 html，但是我们时常在vue开发需要动态的生成页面，这就是rendered函数，它比template更接近编译器

前面的博客有介绍过slot，它具备将语句中html显示对应slot的位置，在某些场景中使用render比slot效率更便捷.

我们使用render将上面的myslot动态生成

关于 this.$slots这个是vue实例对象的属性，表示的是 slot插槽的节点数据，如果是具名的slot，获取slot的节点数据,slot= 'myslot',this.$slots.myslot就可以获取到匹配到这个插槽的数据，上面代码中this.$slot.default表示没有匹配到插槽slot的数据，就是hello world

节点、树以及虚拟DOM

在深入了解渲染函数前，需要了解浏览器的工作原理，以下面的html为例：

当浏览器读到这些代码时候，会建立一个DOM节点来保存追踪,HTML的DOM节点数如下图所示:

每个元素都是一个节点，每个文章也是一个节点。高效的更新这个节点比较困难，

不过所幸你不必再手动完成这个工作了。你只需要告诉 Vue 你希望页面上的 HTML 是什么，这可以是在一个模板里：<h1>{{mytest}}</h1> 或者在一个渲染函数 render:function(createElement){return createElement('h1',this.mytext)},这两种情况vue都会自动保持页面的更新

虚拟DOM

Vue通过建立一个虚拟DOM对真实DOM发生的变化保持追踪

上面的createElement 返回的不是一个实际的DOM元素，更准确的名字是createNodeDescription，它包含的信息

会告知vue页面上需要渲染出上面样的节点，这种节点描述为虚拟节点 Virtual Node ,简称 Vcode,

虚拟DOM是我们对有Vue组件建立起来的整个VNode树的称呼

createElement 参数

需要了解在createElement函数中接受的参数

接受两个参数

createElement(A,B,C); A:可以是标签名，组件名 B:就是标签/vue组件里面需要的数据 C :子节点

深入data对象

在vnode数据对象中，下列属性名是级别最高的字段，vnode数据对象中允许绑定普通的HTML特性，就像DOM属性一样，比如innerHTML会取代v-html指令,下面贴出的是数据对象中常用的属性名称

注意到 DOM属性的innerHTML和字节点的创建不能并存，innerHTML会覆盖子节点

但是如果想要去动态渲染自己定义的模板呢，就需要先全局注册这个组件才行.在动态渲染自定义的

组件的时候，创建的子节点是不生效的

VNodes必须唯一

组件树中，所有的VNodes必须是唯一的，例如

var mc = createElement('p','hello world');

return createElement('div',[mc,mc]);//这种写法是无效的

v-if和v-for在render中的替换实现

原来在模板中：

<ul v-if="items.length">
<li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

在render中被JavaScript的if/else 和 map重写

render: function (createElement) {
if (this.items.length) {
return createElement('ul', this.items.map(function (item) {
return createElement('li', item.name)
}))
} else {
return createElement('p', 'No items found.')
}
}

如何在render中实现v-model双向数据绑定的效果

关于vue render 有个很好的文章:https://segmentfault.com/a/1190000010913794

vuejs的render渲染函数相关推荐

iview table 自定义列_基于VueJS的render渲染函数打造一款非常强大的IView 的Table组件...
1.render渲染函数的介绍字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力.该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode. 如果组 ...
vue 渲染函数处理slot_vue render 渲染函数
vue render 渲染函数经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...
【前端基础知识】最基础的render渲染函数知识，一看就会
Vue-Render渲染函数是什么? 如何使用? 1. createElement的第一个参数 1.1 HTML 标签名(可以动态创建标签) 1.2 组件 2. createElement的第二个参 ...
Vue.js 2.x render 渲染函数 JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
【vue3】vue3在setup的render渲染函数中如何使用slots（插槽）？
在setup中使用插槽,需要配合render渲染函数,先上代码. 子组件slotsTest.vue: <script lang="ts"> import { h,ren ...
Vue render渲染函数
这里写自定义目录标题 Vue render渲染函数基础 render渲染函数的作用 render函数讲解 render和template的区别 render举例 Vue render渲染函数基础 ...
vue3.0中使用render渲染函数渲染组件或标签
使用 render 渲染函数是使用了 js 来渲染组件或标签而我们平时使用时是直接在 template 标签中直接书写这两种方法都可以实现组件或标签的创建下面是使用 render 渲染的方法 i ...
二次封装Element Ui的Table中使用render渲染函数
render函数的使用 render在element UI中的使用 render函数是什么具体参数用法 render在element UI中的使用 {prop: 'button',label: '操 ...
vue render 渲染函数属性写法
// 数组映射结构render: (h) => {let renderHtml = [];for (let attr in markLineName) {let itemData = mark ...

vuejs的render渲染函数

vuejs的render渲染函数相关推荐

最新文章

热门文章