当前位置: 首页 > news >正文

vnode 在 Vue 中的作用

vnode就是 Vue 中的 虚拟 dom 。
vnode 是怎么来的?
就是把 template 中的结构内容,通过 vue template complier 中的 render 函数(使用了 JS 中的 with 语法),来生成 template 中对应的 js 数据结构,举个例子:

<div id="div1" class="container"><p>vdom</p><ul style="font-size: 20px"><li>a</li></ul>
</div>

h 函数根据上面的模板内容就会生成下列 vdom:

{tag: 'div',props: {id: 'div1',class: 'container'},children:[{tag: 'p',children: 'vdom'},{tag: 'ul',props: {style: 'fontSize: 20px'},children:[{tag: 'li',children: 'a'}]}]
}

用 JS 模拟 DOM 结构,patch 到真实 DOM。

那么 vnode 的作用是什么呢?

  1. 默认对 模板中的内容 通过render函数,生成vnode; 响应式的 getter 对使用到的变量做监听操作;
  2. 修改data,和初始化的 模板 vnode 通过 diff 算法做对比,计算出最小的变更;
  3. 重新执行 render 函数,生成新的vnode;
  4. 通过 patch 补丁到初始化渲染的 dom 节点中

组件开发可不可以不用 template 呢
答案是可以的,vue 组件中可以使用 render 代替 template ;如下:

Vue.component('heading', {// template: `xxxx`,render: function (createElement) {return createElement('h' + this.level,[createElement('a', {attrs: {name: 'headerId',href: '#' + 'headerId'}}, 'this is a tag')])}
})

记录一下,回顾一下,如有不妥,望指正,thank you!

相关文章:

vnode 在 Vue 中的作用

vnode就是 Vue 中的 虚拟 dom 。 vnode 是怎么来的&#xff1f; 就是把 template 中的结构内容&#xff0c;通过 vue template complier 中的 render 函数&#xff08;使用了 JS 中的 with 语法&#xff09;&#xff0c;来生成 template 中对应的 js 数据结构&#xff0c;举个例…...

SQL语句实现找到一行中数据最大值(greatest)/最小值(least);mysql行转列

今日我在刷题时遇到这样一个题&#xff0c;它提到了以下需求&#xff1a; 有一场节目表演&#xff0c;五名裁判会对节目提供1-10分的打分&#xff0c;节目最终得分为去掉一个最高分和一个最低分后的平均分。 存在以下一张表performence_detail&#xff0c;包含字段有performa…...

记一次以小勃大,紧张刺激的渗透测试(2017年老文)

一、起因 emmm&#xff0c;炎炎夏日到来&#xff0c;这么个桑拿天干什么好呢&#xff1f; 没错&#xff0c;一定要坐在家里&#xff0c;吹着空调&#xff0c;吃着西瓜&#xff0c;然后静静地挖洞。挖洞完叫个外卖&#xff0c;喝着啤酒&#xff0c;撸着烧烤&#xff0c;岂不美…...

LeetCode 61. 旋转链表

原题链接 难度&#xff1a;middle\color{orange}{middle}middle 题目描述 给你一个链表的头节点 headheadhead &#xff0c;旋转链表&#xff0c;将链表每个节点向右移动 kkk 个位置。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], k 2 输出&#xff1a;[4,5,1…...

数据库(4)--视图的定义和使用

一、学习目的 加深对视图的理解&#xff0c;熟练视图的定义、查看、修改等操作 二、实验环境 Windows 11 Sql server2019 三、实验内容 学生&#xff08;学号&#xff0c;年龄&#xff0c;性别&#xff0c;系名&#xff09; 课程&#xff08;课号&#xff0c;课名&#xff0c;…...

pandas表格并表(累加合并)

今天需求是用pandas的两张表格合并起来&#xff0c;其中重复的部分将数据进行相加。 用到的是combine&#xff08;&#xff09;这个函数。 函数详细的使用可以看这个大佬的文章&#xff1a; https://www.cnblogs.com/traditional/p/12727997.html &#xff08;这个文章使用的测…...

汽车直营模式下OTD全流程

概述 随着新能源汽车的蓬勃发展&#xff0c;造车新势力的涌入&#xff0c;许多新能源车企想通过直营的营销模式来解决新能源汽车市场推广速度缓慢问题&#xff0c;而直营模式下OTD&#xff08;Order-To-Delivery&#xff0c;订单-交付&#xff09;全流程的改革创新在这过程中无…...

如何在 Canvas 上实现图形拾取?

图形拾取&#xff0c;指的是用户通过鼠标或手指在图形界面上能选中图形的能力。图形拾取技术是之后的高亮图形、拖拽图形、点击触发事件的基础。 canvas 作为一个过于朴实无华的绘制工具&#xff0c;我们想知道如何让 canvas 能像 HTML 一样&#xff0c;知道鼠标点中了哪个 “…...

适用于媒体行业的管理数据解决方案—— StorageGRID Webscale

主要优势 1、降低媒体存储库的复杂性 • 借助真正的全局命名空间在全球范围内存储数据并在本地进行访问。 • 实施纠删编码和远程复制策略。 • 通过单一管理平台管理策略和监控存储。 2、优化媒体工作流 • 确认内容在合适的时间处于合适的位置。 • 支持应用程序直接通过 A…...

Springboot+ElasticSearch构建博客检索系统-学习笔记01

课程简介&#xff1a;从实际需求分析开始&#xff0c;打造个人博客检索系统。内容涵盖&#xff1a;ES安装、ES基本概念和数据类型、Mysql到ES数据同步、SpringBoot操作ES。通过本课&#xff0c;让学员对ES有一个初步认识&#xff0c;理解ES的一些适用场景&#xff0c;以及如何使…...

vue3+element-plus el-descriptions 详情组件二次封装(vue3项目)

最终效果 一、需求 一般后台管理系统&#xff0c;通常页面都有增删改查&#xff1b;而查不外乎就是渲染新增/修改的数据&#xff08;由输入框变成输入框禁用&#xff09;&#xff0c;因为输入框禁用后颜色透明度会降低&#xff0c;显的颜色偏暗&#xff1b;为解决这个需求于是封…...

No.14新一代信息技术

新一代信息技术产业包括&#xff1a;加快建设宽带、泛在、融合、安全的信息忘了基础设施&#xff0c;推动新一代移动通信、下一代互联网核心设备和智能终端的研发及产业化&#xff0c;加快推进三网融合&#xff0c;促进物联网、云计算的研发和示范应用。 大数据、云计算、互联…...

微信小程序开发(五)小程序代码组成2

微信小程序开发&#xff08;五&#xff09;小程序代码组成2 为了进一步加深我们对小程序基础知识的了解和掌握&#xff0c;需要更进一步的了解小程序的代码组成以及一些简单的代码的编写。 参考小程序官方的的代码组成文档&#xff1a;https://developers.weixin.qq.com/ebook?…...

关于tensorboard --logdir=logs的报错解决办法记录

我在运行tensorboard --logdirlogs时&#xff0c;产生了如下的报错&#xff0c;找遍全网后&#xff0c;解决办法如下 先卸载 pip uninstall tensorboard再安装 pip install tensorboard最后出现如下报错 Traceback (most recent call last): File “d:\newanaconda\envs\imo…...

em,rem,px,rpx,vw,vh的区别与使用

在css中单位长度用的最多的是px、em、rem&#xff0c;这三个的区别是&#xff1a;一、px是固定的像素&#xff0c;一旦设置了就无法因为适应页面大小而改变。二、em和rem相对于px更具有灵活性&#xff0c;他们是相对长度单位&#xff0c;意思是长度不是定死了的&#xff0c;更适…...

Vue+node.js医院预约挂号信息管理系统vscode

网上预约挂号系统将会是今后医院发展的主要趋势。 前端技术&#xff1a;nodejsvueelementui,视图层其实质就是vue页面&#xff0c;通过编写vue页面从而展示在浏览器中&#xff0c;编写完成的vue页面要能够和控制器类进行交互&#xff0c;从而使得用户在点击网页进行操作时能够正…...

Java真的不难(五十四)RabbitMQ的入门及使用

RabbitMQ的入门及使用 一、什么是RabbitMQ&#xff1f; MQ全称为Message Queue&#xff0c;即消息队列。消息队列是在消息的传输过程中保存消息的容器。它是典型的&#xff1a;生产者、消费者模型。生产者不断向消息队列中生产消息&#xff0c;消费者不断的从队列中获取消息。…...

Unity | Script Hot Reload

官网地址&#xff1a;https://hotreload.net/ 一、作用 Unity在运行时&#xff0c;可以直接修改代码&#xff0c;避免等待过长的编译时间。 二、说明 1、支持的平台&#xff1f; Windows、MacOS、Linux 2、支持的Unity版本&#xff1f; 2018.4 (LTS)2019.4 (LTS)2020.3 (L…...

3|射频识别技术|第五讲:数据通信和编码技术|第九章:编码与调制|重点理解掌握传输介质中的有线传输介质

计算机网络部分&#xff1a;https://blog.csdn.net/m0_57656758/article/details/128943949传输介质分为有线传输介质和无线传输介质两大类&#xff1b;有线传输介质通常包含双绞线、同轴电缆和光导纤维&#xff1b;无线传输介质包含微波、红外线等。传输介质的选择和连接是网络…...

【遇见青山】基于Redis的Feed流实现案例

【遇见青山】基于Redis的Feed流实现案例1.关注推送2.具体代码实现1.关注推送 关注推送也叫做Feed流&#xff0c;直译为投喂。为用户持续的提供"沉浸式”的体验&#xff0c;通过无限下拉刷新获取新的信息。 Feed流产品有两种常见模式&#xff1a; 这里我们实现基本的TimeL…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

淘宝扭蛋机小程序系统开发:打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...