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

解决原生template标签在Vue中失效的问题

文章目录

  • 前言
  • 一、事件未绑定的原因
  • 二、如何处理原生template标签
  • 总结


前言

需要原生Javascript + three.js的数据标注平台加入Vue框架.
本来挺顺利的, 我直接在mounted周期做了初始化, 然后剩下的操作还是交给JavaScript文件执行, 最后发现里面有很明显的事件触发问题.


一、事件未绑定的原因

找了整一天也没找着这事件为什么触发不了, 在这中间还把代码简化掉只留下事件触发逻辑执行了好几次.

第二天意识到原生代码里的template可能有问题, 在原生环境中template标签内部的东西是不会渲染出来的, 虽然解析器在加载页面的时候确实会处理这部分代码片段.

取自MDN:

将模板视为一个可存储在文档中以便后续使用的内容片段. 
虽然解析器在加载页面时确实会处理 <template> 元素的内容,
但这样做只是为了确保这些内容有效, 元素内容不会被渲染.

但是放到vue里(这里特指Vue2), 如果template标签在Vue实例绑定的元素内部存在(即不是根元素外的那个template), 那么在DOM中该template的子元素是正常存在并显示的, 我以前经常拿templatev-for容器.

然后联想前面几次结构简化demo, 大概不是没绑定而是绑错了目标.

这个原生项目的HTML代码很多, 所以作者做了一些优化, 在需要某个模块的时候才将其appendChild加入DOM, 其余的时候这些模块都被放在template标签内, 而vue把这些东西都出来渲染了, 那么初始化的时候事件大概率就已经被绑到了template里面的那些代码里, 等到这些模块被appendChild的时候, 事件绑定已经结束了, 所以appendChild是将没有事件绑定的DOM加到了正确位置.

我在控制台把视口里的DOM都删掉之后发现下面还有一层被挤出去的DOM, 那是有事件绑定的DOM.
的确是这样.


二、如何处理原生template标签

我是想把他appendChild这个优化留下来的, 我觉得在原生环境里能有这种封装的思想挺好, 不过看起来不好办…
我打算把原来那几个模块抽到组件里, 提前把组件写到后面会插入到的位置, 然后用这种结构控制显示隐藏:

<template v-if="isShow"><aaa></aaa>
</template>

这样挺好的其实, 如果这个项目的结构再简单一点我绝对会用组件方案的, 结果我发现我要传回调函数, 传4层干扰到3个很重要的类, 只是为了在合适的时机回调改变组件的状态, 我觉得很糟糕.
而且, 如果后面会有…或者现在就有我没有察觉到的需求是增加不定数量个这种模块, 我把组件直接注册到这里用就算是写死了, 恐怕会不好改.

需要这种操作的组件有三个, 我想起来学后端渲染的时候给前端发的html模板, 那…能不能把这些html转成字符串存到一个单独的js文件, 然后在需要的地方导入后appendChild呢? 这样对源代码改动最小, 不用改appendChild, 也让html文档那边更简洁一些.

export const batchEditorToolsTemplate = `<div id="batch-editor-tools-wrapper" class="non-selectable"><div id="batch-editor-tools"><div class="menu-button" id="exit">退出</div><div class="menu-button" id="prev">上一页</div><div class="menu-button" id="next">下一页</div><div class="menu-button" id="trajectory">轨迹</div><div class="menu-button" id="auto-annotate">自动</div><div class="menu-button" id="auto-annotate-translate-only">自动(无旋转)</div><div class="menu-button" id="interpolate">插值</div><div class="menu-button" id="reload">重新加载</div><div class="menu-button" id="finalize">定稿</div></div></div>
`

然后用这个工具函数把appendChild替换掉:

function analyseDomStr(str, target) { // dom字符串, 目标元素const template = document.createElement('template');template.innerHTML = str;target.appendChild(template.content);
}

这样性能不如之前好, 不过——事件绑定看起来没什么问题了.

本来想用Document.createDocumentFragment()API的, 所以初版就写成这样了:

function analyseDomStr(str, target) { // dom字符串, 目标元素const fragment = document.createDocumentFragment();const template = document.createElement('template');template.innerHTML = str;fragment.appendChild(template.content); // 此处还是要按照原生template的那套来的, 这个template不会被vue特殊解析target.appendChild(fragment);
}

很遗憾并不能直接使用innerHTMLDocumentFragment内写入DOM, 仍旧需要appendChild来完成, 所以完全没有必要创建DocumentFragment, 我认为这个API更加适合用于对频繁DOM操作进行优化, 比如用户点击按钮后就要插入100条tips, 那就更适合先使用这个API生成一个文档内容分段, 然后把成品分段加入DOM.
这个初版和旧版也都是回流一次…

因为文档片段存在于内存中, 并不在 DOM 树中, 所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算).
因此, 使用文档片段通常会带来更好的性能.

完全可以把:

const ul = document.querySelector('ul');
const li = document.createElement('li');for (let i = 0; i < 100; i++) {ul.appendChild('li');
}

这种会引起页面频繁回流的写法
改成

const ul = document.querySelector('ul');
const li = document.createElement('li');
const fragment = document.createDocumentFragment();for (let i = 0; i < 100; i++) {fragment.appendChild('li');
}
ul.appendChild(fragment);

这样页面只会在fragmentappendChild后回流一次.


总结

相关文章:

解决原生template标签在Vue中失效的问题

文章目录前言一、事件未绑定的原因二、如何处理原生template标签总结前言 需要原生Javascript three.js的数据标注平台加入Vue框架. 本来挺顺利的, 我直接在mounted周期做了初始化, 然后剩下的操作还是交给JavaScript文件执行, 最后发现里面有很明显的事件触发问题. 一、事件…...

节能降耗方案-医院能源管理系统平台的研究与应用分析

摘要&#xff1a;综合性医院作为大型公共机构&#xff0c;能耗高的问题日益突出&#xff0c;构建能耗监控平台对医院能耗量化管理以及效果评估已经成为迫切需要。建立智能能耗监控平台&#xff0c;对采集的能耗数据进行分析&#xff0c;实现对医院能耗平台监控&#xff0c;为医…...

Redis学习【7】之发布_订阅命令和事务

文章目录一 发布/订阅命令1.1 消息系统1.2 subscribe1.3 psubscribe1.4 publish1.5 unsubscribe1.6 punsubscribe1.7 pubsub1.7.1 pubsub channels1.7.2 pubsub numsub1.7.3 pubsub numpat二 Redis 事务2.1 Redis 事务特性Redis 事务实现2.1.1 三个命令2.1.2 基本使用2.2. Redi…...

MySQL8.0 optimizer_switch变化

Optimizer_switch变量是支持对优化器行为的控制。是一组值标志&#xff0c;每个标志都有一个on或off的值&#xff0c;以指示是否启用或禁用相应的行为。 MySQL8.0里除了熟悉的hash join重大变化之外&#xff0c;其他方面也有优化。 mysql> SHOW VARIABLES LIKE OPTIMIZER_…...

Web--Maven

1.maven管理项目的区别 2. 安装后&#xff0c;conf目录下的setting文件中&#xff0c;对本地仓库的配置 此处可替换成自定义的本地仓库地址&#xff0c;默认为c:/user/17860/.m2/repository(我的电脑上的&#xff09; 3.maven项目的标准目录结构 4.项目的生命周期 5.Maven概…...

深入理解MySQLⅢ -- 锁与InnoDB引擎

文章目录锁概述全局锁表级锁表锁元数据锁意向锁行级锁行锁间隙锁&临键锁InnoDB引擎逻辑存储结构架构内存结构磁盘结构后台线程事务原理redo logundo logMVCC锁 概述 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中&#xff0c;除传统的计算资源&#x…...

Win11电脑速度慢、延迟高怎么办?

作为新版的系统&#xff0c;Windows 11还需要更多的时间完善。不少用户反映升级了Win11后反而感觉速度慢&#xff0c;还有延迟或死机现象。 如果你使用Win11系统时也有这种感觉&#xff0c;那这篇文章就是为你提供的。 问题可能出在系统存储容量低、驱动程序已过时&#xff0…...

【双指针问题】977. 有序数组的平方

Halo&#xff0c;这里是Ppeua。平时主要更新C语言&#xff0c;C&#xff0c;数据结构算法......感兴趣就关注我吧&#xff01;你定不会失望。 &#x1f308;个人主页&#xff1a;主页链接 &#x1f308;算法专栏&#xff1a;专栏链接 我会一直往里填充内容哒&#xff01; &…...

Meta AR眼镜主管:正开发史无前例的AR,但要解决很多困难

前不久&#xff0c;Meta CTO Andrew Bosworth在个人博客上“怒斥”公司内部不够专注&#xff0c;应该将资源投入在有核心竞争力、高投资回报率的业务上&#xff0c;而不是开发取悦用户却不赚钱的产品。尽管删除一些小众功能后&#xff0c;用户可能会不满&#xff0c;但为了让Me…...

Docker 搭建KingbaseES主备流复制

author: aming email: jikcheng163.com title: Docker 安装KingbaseES读写分离集群 creation_date: 2023-02-16 13:59 Last modified date: 2023-02-16 19:18 tags: Docker 安装KingbaseES读写分离集群 File Folder with relative path: reading notes/doc/Docker技术入门与实战…...

java易错题锦集四

effective java 不要再构造方法中启动任何线程 g new GameServer(); g.start();构造器无返回值&#xff0c;但是不能void修饰 字符串 String是包装类型吗&#xff1f;答案&#xff1a; 不是 对应的基本类型和包装类如下表&#xff1a; 基本数据类型 包装类 byte Byte bool…...

每天10个前端小知识 【Day 17】

前端面试基础知识题 1.使用原生js实现以下效果&#xff1a;点击容器内的图标&#xff0c;图标边框变成border:1px solid red&#xff0c;点击空白处重置 const box document.getElementById(box); function isIcon(target) { return target.className.includes(icon); } b…...

Python语言零基础入门教程(二十三)

16、Python os.fpathconf() 方法 概述 os.fpathconf() 方法用于返回一个打开的文件的系统配置信息。 Unix上可用。 语法 fpathconf()方法语法格式如下&#xff1a; os.fpathconf(fd, name)参数 fd – 打开的文件的描述符。 name – 可选&#xff0c;和buffersize参数和Pyt…...

[ansible系列]ansible使用扩展

目录 一. 本地执行 二. 任务委托 三. 任务暂停 四. 滚动执行 五. 只执行一次 六. 设置环境变量 七. 交互提示 一. 本地执行 我们知道ansible的是操作被控端的&#xff0c;所有执行的动作都是在被控端上完成的&#xff0c;当然在某些特定的时候我们想要有些tas…...

Java工具类(时间格式转换)

import java.util.Date; import java.text.DateFormat; /** * 格式化时间类 * DateFormat.FULL 0 * DateFormat.DEFAULT 2 * DateFormat.LONG 1 * DateFormat.MEDIUM 2 * DateFormat.SHORT 3 * author Michael * version 1.0&#xff0c; 2007/03/09 */ public c…...

数据库(第五次作业)

1.1 Redis概述 1.1.1 什么是Redis 2008年&#xff0c;意大利的一家创业公司Merzia推出了一款基于MySQL的网站实时统计系统LLOOGG&#xff0c;然而没过多久该公司的创始人 Salvatore Sanfilippo便开始对MySQL的性能感到失望&#xff0c;于是他决定亲自为LLOOGG量身定做一个数据…...

代码随想录【Day16】| 110. 平衡二叉树、257. 二叉树的所有路径、404. 左叶子之和

110. 平衡二叉树 题目链接 题目描述&#xff1a; 给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&#xff1a;一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过1。 示例 1: 给定二叉树 [3,9,20,null,nul…...

套娃式工具!用 AI 识别 AI ?#AI classifier

2022年以来&#xff0c;市面上就出现了不少 AI 生成文本的工具&#xff0c;尤其是 OpenAI 推出的 ChatGPT &#xff0c;不仅能够协助完成撰写邮件、视频脚本、文案、翻译、代码等任务&#xff0c;还能通过学习和理解人类的语言来进行对话&#xff0c;并根据聊天的上下文进行互动…...

CURL error 60: SSL certificate problem: certificate has expired

项目使用guzzleHttp做的一个接口&#xff0c;报错&#xff1a;certificate has expired 因为在linux centos环境与window环境有所不同&#xff0c;在此记录一下解决过程。 目录 报错提示 原因 解决方式 1.去掉guzzlehttp的验证 2.更新CA证书 总结 报错提示 cURL error 60…...

接口自动化:requests

引言&#xff1a;目前软件测试对测试人员的能力要求 业务测试能力&#xff1a;占比5-6成接口、自动化、性能测试能力&#xff1a;占比4-5成流程规范&#xff1a;1成&#xff08;需要综合型的测试人才&#xff09;&#xff1a;业务能力、代码能力、开发思维&#xff08;封装&…...

极简TypeScript教程--数据类型

TypeScript最大的特点就是有类型检测&#xff0c;格式为let/const 标识符: 数据类型 赋值;例子:let msg: string Hello World这样msg这个变量就有了字符串类型,如果再给他赋值为数字类型&#xff0c;就会在编译期报错。变量的类型推导在开发中&#xff0c;有时候为了方便起见…...

JAVA开发测试(jmeter如何测试性能与估算)

对C的业务网站或应用&#xff0c;进行性能测试来评估使用服务器情况是必不可少的一项工作。 一、测试工具&#xff1a; Apache JMeter 可以用于对服务器、网络或对象模拟巨大的负载&#xff0c;来自不同压力类别下测试它们的强度和分析整体性能&#xff0c;是Apache组织开发的…...

【新解法】华为OD机试 - 求解连续数列 | 备考思路,刷题要点,答疑,od Base 提供

华为 OD 清单查看地址:blog.csdn.net/hihell/category_12199275.html 求解连续数列 | 备考思路,刷题要点,答疑,od Base 提供 题目 已知连续正整数数列{K}=K1,K2,K3… Ki的各个数相加之和为S, i = N (0 < S < 100000, 0 < N < 100000), 求此数列K。 输入 输…...

Python3 File(文件) 方法

Python3 File(文件) 方法 open() 方法 Python open() 方法用于打开一个文件&#xff0c;并返回文件对象。 在对文件进行处理过程都需要使用到这个函数&#xff0c;如果该文件无法被打开&#xff0c;会抛出 OSError。 注意&#xff1a;使用 open() 方法一定要保证关闭文件对…...

APP渗透抓包

APP渗透抓包1.APP渗透测试原理2.安装安卓模拟器抓包2.1.安装模拟器2.2.设置代理下载证书2.2.1.burp suite设置代理2.2.2.浏览器设置代理2.2.3.下载证书2.3.模拟器安装证书2.3.1.移动证书2.3.2.证书设置2.4.设置代理2.4.1.设置burp suite代理2.4.2.夜神模拟器代理2.5.抓包测试2.…...

力扣(LeetCode)414. 第三大的数(2023.02.16)

给你一个非空数组&#xff0c;返回此数组中 第三大的数 。如果不存在&#xff0c;则返回数组中最大的数。 示例 1&#xff1a; 输入&#xff1a;[3, 2, 1] 输出&#xff1a;1 解释&#xff1a;第三大的数是 1 。 示例 2&#xff1a; 输入&#xff1a;[1, 2] 输出&#xff1a;2…...

Spring底层

一、什么是Spring&#xff1f;谈谈你对IOC和AOP的理解。Spring&#xff1a; 是一个企业级java应用框架&#xff0c;他的作用主要是 简化软件的开发以及配置过程&#xff0c;简化项目部署环境。Spring的有点&#xff1a;1、Spring低侵入设计&#xff0c;对业务代码的污染非常低。…...

Cache-Control 常见字段

Cache-Control 常见字段 参考&#xff1a;https://blog.csdn.net/qq_41996454/article/details/108644436 Cache-Control 可以在请求头或者响应头中设置&#xff0c;并且可以组合使用多种指令 no-cache 和 no-store 用作控制缓存&#xff0c;被服务器通过响应头 Cache-Contro…...

Flink Checkpoint 中的通用增量Checkpoint

文章目录知识点状态Flink容错恢复周期性的 Checkpoint错误检测 Failure Detected重新调度 Re-scheduling状态恢复 State Recovery通用增量Checkpoint知识点 状态 算子需要记录之前数据处理的中间结果&#xff0c;把中间结果暂时缓存在算子的内部&#xff0c;这就是算子的状态…...

金三银四必看的软件测试面试题宝典,背完offer随便拿

怎么来设计测试方案根据测试需求&#xff08;包括功能需求和非功能性需求&#xff09;&#xff0c;识别测试要点&#xff0c;识别测试环境要求&#xff0c;安排测试轮次&#xff0c;根据项目计划和开发计划做整体的测试安排。 被测试的特性&#xff1a;通过对需求规格说明书进行…...

建网站视频教程/站长网站推广

杜洪亮摘 要&#xff1a;通过对济南轨道交通3号线王舍人站~裴家营站区间盾构长距离侧穿高架桥桩施工控制情况进行总结分析&#xff0c;重点论述了辅助措施的重要性&#xff0c;分析了粉质黏土地层中盾构长距离侧穿构筑物不可避免的施工风险&#xff0c;并探讨了盾构穿越该段掘…...

怎样让网站的排名靠前/宁波公司做网站

今天先说个题外话 就现在科学的年代 大家已经不太谈所谓的命了 就命运的那个命 而UP主呢 现在其实主要是讲程序相关的东西 这些东西 其实是UP主很久以前喜欢研究的东西 那今天说个题外话拿来讲一讲 就命如果我们从科学的角度看 你看它是个什么东西 也就是说命中注定 也就是说一…...

黄浦网站设计/网络营销公司哪家可靠

PoPo数据可视化 聚焦于Web数据可视化与可视化交互领域&#xff0c;发现可视化领域有意思的内容。不想错过可视化领域的精彩内容, 就快快关注我们吧 :) 本期可视化精彩视频请关注公众号浏览 全天智能获Pre-A轮千万融资 助力开启全天候实时大数据可视化模式 腾讯AI加速器二期项目…...

手机网站开发哪个好/江苏seo排名

iOS 4开始引入的multitask&#xff0c;我们可以实现像ipod程序那样在后台播放音频了。如果音频操作是用苹果官方的AVFoundation.framework实现&#xff0c;像用AvAudioPlayer&#xff0c;AvPlayer播放的话&#xff0c;要实现完美的后台音频播放&#xff0c;依据app的功能需要&a…...

做网站什么主题比较好/浏览器广告投放

1.抽象类 为什么会有抽象类&#xff1a; 抽象类的写法&#xff1a;abstract关键字 Animal定义为抽象类后&#xff0c;Animal animal new Animal();会报错&#xff1b;但&#xff0c;Animal one new Cat()依旧是可以的。 抽象类或是&#xff0c;保证“逻辑意义”完美、提高ja…...

dreamweaver可以做手机网站吗/百度贴吧广告投放

努力 奋斗 人生总要有这么一段时光 纯粹而简单 疯狂而热烈 拼搏而勇敢 若干年后 回忆起来 让自己感动 惊艳了时光 温柔了岁月 丰富了记忆 成为你人生宝贵的一笔财富...