Vue中渲染函数
why?
在绝大多数情况下，Vue 推荐使用模板语法来创建应用。然而在某些使用场景下，我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数就派上用场了。
例如：下方要在多个模型上方设置对话框，如果使用Vue模板语法相对较困难（要确保对话框位置相对正确，要产生多个实例），用渲染函数相对更加简单[JS循环]
Vue模板语法、渲染函数两种方式，选择恰当的一个就行！
渲染管线
从高层面的视角看，Vue 组件挂载时会发生如下几件事：
-
编译：Vue 模板被编译为渲染函数：即用来返回虚拟 DOM 树的函数。这一步骤可以通过构建步骤提前完成，也可以通过使用运行时编译器即时完成。
-
挂载：运行时渲染器调用渲染函数，遍历返回的虚拟 DOM 树，并基于它创建实际的 DOM 节点。这一步会作为响应式副作用执行，因此它会追踪其中所用到的所有响应式依赖。
-
更新：当一个依赖发生变化后，副作用会重新运行，这时候会创建一个更新后的虚拟 DOM 树。运行时渲染器遍历这棵新树，将它与旧树进行比较，然后将必要的更新应用到真实 DOM 上去。
渲染函数
Vue3
import { h } from 'vue'
const vnode = h(
'div', // type
{ id: 'foo', class: 'bar' }, // props
[
/* children */
]
)h() 是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是 createVnode()，但当你需要多次使用渲染函数时，一个简短的名字会更省力。
h() 函数的使用方式非常的灵活：
// 除了类型必填以外，其他的参数都是可选的
h('div')
h('div', { id: 'foo' })
// attribute 和 property 都能在 prop 中书写
// Vue 会自动将它们分配到正确的位置
h('div', { class: 'bar', innerHTML: 'hello' })
// 像 `.prop` 和 `.attr` 这样的的属性修饰符
// 可以分别通过 `.` 和 `^` 前缀来添加
h('div', { '.name': 'some-name', '^width': '100' })
// 类与样式可以像在模板中一样
// 用数组或对象的形式书写
h('div', { class: [foo, { bar }], style: { color: 'red' } })
// 事件监听器应以 onXxx 的形式书写
h('div', { onClick: () => {} })
// children 可以是一个字符串
h('div', { id: 'foo' }, 'hello')
// 没有 props 时可以省略不写
h('div', 'hello')
h('div', [h('span', 'hello')])
// children 数组可以同时包含 vnodes 与字符串
h('div', ['hello', h('span', 'hello')])Vue模板语法多数可以直接用渲染函数（更底层）直接实现
Vue2
在 Vue 2 中，渲染函数（Render Functions）同样提供了一种比模板（Templates）更底层、更灵活的方式来描述组件的输出。不过，与 Vue 3 稍有不同的是，Vue 2 的渲染函数直接接收一个名为 createElement 的函数作为参数，虽然 Vue 2 的社区中也经常使用 h 作为 createElement 的别名（这需要通过额外的配置或插件来实现，比如 Babel 插件），但 Vue 2 的官方文档和默认配置中并没有直接提供 h 作为 createElement 的别名。
在 Vue 2 的组件中，你可以通过定义一个 render 函数来使用渲染函数，该函数接收一个 createElement 参数，并返回一个虚拟节点（VNode）。这个虚拟节点描述了组件的 DOM 结构。
下面是一个 Vue 2 组件中使用渲染函数的例子：
// 假设没有使用 h 作为 createElement 的别名
export default {
data() {
return {
message: 'Hello, Vue 2!'
};
},
render(createElement) {
// 使用 createElement 创建 VNode
return createElement('div', this.message);
}
}createApp()函数
createApp函数是Vue 3中用于创建一个新的Vue应用实例的API。它是Vue 3的入口点，允许你定义根组件，并挂载这个Vue应用到DOM中的某个元素上
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
//挂载
app.mount('#app')在Vue2中使用new Vue()构建Vue实例
const createDialog = (opts) => {
if (parentNode) {
document.body.removeChild(parentNode);
parentNode = null;
}
const instance=new Vue({
render: (h) => {
// let properties={...opts}
// console.log(properties)
return h(dialog,{
...opts}
)
}
})
parentNode = document.createElement('div');
// 挂载
instance.$mount(parentNode)
document.body.appendChild(parentNode);
// vue3中新建一个vm实例
// const app = createApp({
// // render() {
// // // 这个是属性传递入口
// return h(dialog, {
// ...opts,
// });
// },
// });
// parentNode = document.createElement('div');
// const instance = app.mount(parentNode);
// document.body.appendChild(parentNode);
return {
vmInstance: instance,
};
};原文地址：https://blog.csdn.net/m0_55049655/article/details/140620806
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！