Vue中渲染函数

why?

在绝大多数情况下,Vue 推荐使用模板语法来创建应用。然而在某些使用场景下,我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数就派上用场了。

例如:下方要在多个模型上方设置对话框,如果使用Vue模板语法相对较困难(要确保对话框位置相对正确,要产生多个实例),用渲染函数相对更加简单[JS循环]

Vue模板语法、渲染函数两种方式,选择恰当的一个就行!

 渲染管线

从高层面的视角看,Vue 组件挂载时会发生如下几件事:

  1. 编译:Vue 模板被编译为渲染函数:即用来返回虚拟 DOM 树的函数。这一步骤可以通过构建步骤提前完成,也可以通过使用运行时编译器即时完成。

  2. 挂载:运行时渲染器调用渲染函数,遍历返回的虚拟 DOM 树,并基于它创建实际的 DOM 节点。这一步会作为响应式副作用执行,因此它会追踪其中所用到的所有响应式依赖。

  3. 更新:当一个依赖发生变化后,副作用会重新运行,这时候会创建一个更新后的虚拟 DOM 树。运行时渲染器遍历这棵新树,将它与旧树进行比较,然后将必要的更新应用到真实 DOM 上去。

 渲染函数

Vue3

渲染函数 & JSX | Vue.js

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,};
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/47844.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小技巧:如何在已知PDF密码情况下去掉PDF的密码保护

第一步,用Edge打开你的pdf,输入密码进去 第二步,点击打印 第三步,选择导出PDF,选择彩印 第四步,选择导出位置,导出成功后打开发现没有密码限制了!

什么是长效住宅IP?

长效住宅IP的定义 长效住宅IP,简而言之,是指长期稳定、非动态更换的住宅网络IP地址。这类IP地址通常由互联网服务提供商(ISP)分配给居民家庭用户,用于上网、网络通信等日常网络活动。与传统的动态IP相比,长…

【Flutter 面试题】 使用成熟状态管理库的弊端有哪些?

【Flutter 面试题】 使用成熟状态管理库的弊端有哪些? 文章目录 写在前面口述回答补充说明写在前面 🙋 关于我 ,小雨青年 👉 CSDN博客专家,GitChat专栏作者,阿里云社区专家博主,51CTO专家博主。2023博客之星TOP153。 👏🏻 正在学 Flutter 的同学,你好! 😊 …

数据结构day5

一、思维导图 二、课后练习 1、使用循环链表完成约瑟夫环问题 2、使用栈,完成进制转换(输入:一个整数,进制数,输出:该数的对应的进制数) //头文件 #ifndef DEC_TO_BIN_H #define DEC_TO_BIN_H…

【WAF剖析】10种XSS某狗waf绕过姿势,以及思路分析

原文:【WAF 剖析】10 种 XSS 绕过姿势,以及思路分析 xss基础教程参考:https://mp.weixin.qq.com/s/RJcOZuscU07BEPgK89LSrQ sql注入waf绕过文章参考: https://mp.weixin.qq.com/s/Dhtc-8I2lBp95cqSwr0YQw 复现 网站安全狗最新…

Electron 渲染进程直接调用主进程的API库@electron/remote引用讲解

背景 remote是个老库,早期Electron版本中有个remote对象,这个对象可以横跨所有进程,随意通信,后来官方认为不安全,被干掉了,之后有人利用Electron的IPC通信,底层通过Promise的await能力&#x…

pytorch lightning报错all tensors to be on the same device

RuntimeError: Expected all tensors to be on the same device, but found at least two devices, cuda:0 and cpu! 修改指定为gpu trainer pl.Trainer(max_epochstrain_params.iterations, loggertb_logger,acceleratorgpu, devices1)

Air780EP- AT开发-阿里云应用指南

简介 使用AT方式连接阿里云分为一机一密和一型一密两种方式,其中一机一密又包括HTTP认证二次连接和MQTT直连两种方式 关联文档和使用工具: AT固件获取在线加/解密工具阿里云平台 准备工作 Air780EP_全IO开发板一套,包括天线SIM卡&#xff0…

PHP身份证实名认证接口集成守护电商购物

在这个万物互联的世界里,网购已成为日常生活中不可或缺的一部分。然而,随着线上交易的增加,如何保护消费者和商家免受欺诈,确保每一笔交易的安全,成了亟待解决的难题。这时,身份证实名认证接口应运而生&…

在Windows安装、部署Tomcat的方法

本文介绍在Windows操作系统中,下载、配置Tomcat的方法。 Tomcat是一个开源的Servlet容器,由Apache软件基金会的Jakarta项目开发和维护;其提供了执行Servlet和Java Server Pages(JSP)所需的所有功能。其中,S…

机械学习—零基础学习日志(高数09——函数图形)

零基础为了学人工智能,真的开始复习高数 函数图像,开始新的学习! 幂函数 利用函数的性质,以幂函数为例,因为单调性相同,利用图中的2和3公式,求最值问题,可以直接将式子进行简化。这…

贝叶斯算法理论

目录 贝叶斯贝叶斯要解决的问题:Why贝叶斯贝叶斯公式实例——拼写纠正模型比较理论垃圾邮件过滤实例 贝叶斯 贝叶斯要解决的问题: **正向概率:**假设袋子里面有N个白球,M个黑球,你伸手进去摸一把,摸出黑球…

自监督学习在言语障碍及老年语音识别中的应用

近几十年来针对正常言语的自动语音识别(ASR)技术取得了快速进展,但准确识别言语障碍(dysarthric)和老年言语仍然是一项极具挑战性的任务。言语障碍是一种由多种运动控制疾病引起的常见言语障碍类型,包括脑瘫…

175道Docker面试题(上)

目录 1、什么是docker? 2、Docker与普通虚拟机的对比: 3、Docker常用命令: 4、Docker镜像是什么? 5、Docker容器是什么? 6、Docker容器有几种状态? 7、Dockerfile中最常见的指令是什么? …

DP学习——状态模式

学而时习之,温故而知新。 状态模式 角色 2个角色,引用类,状态行为类。 和策略模式很相似 状态行为封装成很多独立的状态行为类——就是把不同的状态及其要执行的方法单独封装起来。 而策略模式类似,是不同的算法封装成一个个…

php 根据位置的经纬度计算距离

在开发中,我们要经常和位置打交道,要计算附近的位置、距离什么的。如下: 一.sql语句 SELECT houseID,title,location,chamber,room,toward,area,rent,is_verify,look_type,look_time, traffic,block_name,images,tag,create_time,update_time, location->&g…

RKNN执行bash ./build-linux_RK3566_RK3568.sh 报错

目录 错误信息: 原因:如题提示/3rdparty/mpp/Linux/aarch64/librockchip_mpp.so: file format not recognized; treating as linker script是因为librockchip_mpp.so这个文件夹指向了一个空文件夹 解决方法: 错误信息: /usr/lib/gcc-cross/aarch64-linux-gnu/11/../../..…

【人工智能】使用Python的dlib库实现人脸识别技术

🔥 个人主页:空白诗 文章目录 一、引言二、传统人脸识别技术1. 基于几何特征的方法2. 基于模板匹配的方法3. 基于统计学习的方法 三、深度学习在脸识别中的应用1. 卷积神经网络(CNN)2. FaceNet和ArcFace 四、使用Python和dlib库实…

Python @staticmethod、super().__init__()和self

最近在看代码,由于之前没有系统学习过Python,就有些知识点不是很清楚,这里整理一下,方便以后查阅。 Python中的staticmethod\super.init和self Python 装饰器staticmethod和classmethod的作用与区别作用区别代码演示 super() 函数…

【STM32 HAL库】DMA+串口

DMA 直接存储器访问 DMA传输,将数据从一个地址空间复制到另一个地址空间。-----“数据搬运工”。 DMA传输无需CPU直接控制传输,也没有中断处理方式那样保留现场和恢复现场,它是通过硬件为RAM和IO设备开辟一条直接传输数据的通道&#xff0c…