前言

需要原生Javascript + three.js的數(shù)據(jù)標(biāo)注平臺(tái)加入Vue框架.

本來挺順利的, 我直接在mounted周期做了初始化, 然后剩下的操作還是交給JavaScript文件執(zhí)行, 最后發(fā)現(xiàn)里面有很明顯的事件觸發(fā)問題.

一、事件未綁定的原因

找了整一天也沒找著這事件為什么觸發(fā)不了, 在這中間還把代碼簡化掉只留下事件觸發(fā)邏輯執(zhí)行了好幾次.

第二天意識(shí)到原生代碼里的template可能有問題, 在原生環(huán)境中template標(biāo)簽內(nèi)部的東西是不會(huì)渲染出來的, 雖然解析器在加載頁面的時(shí)候確實(shí)會(huì)處理這部分代碼片段.

取自MDN:

將模板視為一個(gè)可存儲(chǔ)在文檔中以便后續(xù)使用的內(nèi)容片段. 
雖然解析器在加載頁面時(shí)確實(shí)會(huì)處理 <template> 元素的內(nèi)容,
但這樣做只是為了確保這些內(nèi)容有效, 元素內(nèi)容不會(huì)被渲染.

但是放到vue里(這里特指Vue2), 如果template標(biāo)簽在Vue實(shí)例綁定的元素內(nèi)部存在(即不是根元素外的那個(gè)template), 那么在DOM中該template的子元素是正常存在并顯示的, 我以前經(jīng)常拿template做v-for容器.

然后聯(lián)想前面幾次結(jié)構(gòu)簡化demo, 大概不是沒綁定而是綁錯(cuò)了目標(biāo).

這個(gè)原生項(xiàng)目的HTML代碼很多, 所以作者做了一些優(yōu)化, 在需要某個(gè)模塊的時(shí)候才將其appendChild加入DOM, 其余的時(shí)候這些模塊都被放在template標(biāo)簽內(nèi), 而vue把這些東西都出來渲染了, 那么初始化的時(shí)候事件大概率就已經(jīng)被綁到了template里面的那些代碼里, 等到這些模塊被appendChild的時(shí)候, 事件綁定已經(jīng)結(jié)束了, 所以appendChild是將沒有事件綁定的DOM加到了正確位置.

我在控制臺(tái)把視口里的DOM都刪掉之后發(fā)現(xiàn)下面還有一層被擠出去的DOM, 那是有事件綁定的DOM.

的確是這樣.

二、如何處理原生template標(biāo)簽

我是想把他appendChild這個(gè)優(yōu)化留下來的, 我覺得在原生環(huán)境里能有這種封裝的思想挺好, 不過看起來不好辦…

我打算把原來那幾個(gè)模塊抽到組件里, 提前把組件寫到后面會(huì)插入到的位置, 然后用這種結(jié)構(gòu)控制顯示隱藏:

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

這樣挺好的其實(shí), 如果這個(gè)項(xiàng)目的結(jié)構(gòu)再簡單一點(diǎn)我絕對(duì)會(huì)用組件方案的, 結(jié)果我發(fā)現(xiàn)我要傳回調(diào)函數(shù), 傳4層干擾到3個(gè)很重要的類, 只是為了在合適的時(shí)機(jī)回調(diào)改變組件的狀態(tài), 我覺得很糟糕.

而且, 如果后面會(huì)有…或者現(xiàn)在就有我沒有察覺到的需求是增加不定數(shù)量個(gè)這種模塊, 我把組件直接注冊(cè)到這里用就算是寫死了, 恐怕會(huì)不好改.

需要這種操作的組件有三個(gè), 我想起來學(xué)后端渲染的時(shí)候給前端發(fā)的html模板, 那…能不能把這些html轉(zhuǎn)成字符串存到一個(gè)單獨(dú)的js文件, 然后在需要的地方導(dǎo)入后appendChild呢? 這樣對(duì)源代碼改動(dòng)最小, 不用改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">自動(dòng)</div>
	  <div class="menu-button" id="auto-annotate-translate-only">自動(dòng)（無旋轉(zhuǎn)）</div>
	  <div class="menu-button" id="interpolate">插值</div>
	  <div class="menu-button" id="reload">重新加載</div>
	  <div class="menu-button" id="finalize">定稿</div>
	</div>
  </div>
`

然后用這個(gè)工具函數(shù)把appendChild替換掉:

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

這樣性能不如之前好, 不過——事件綁定看起來沒什么問題了.

本來想用Document.createDocumentFragment()API的, 所以初版就寫成這樣了:

function analyseDomStr(str, target) { // dom字符串, 目標(biāo)元素
  const fragment = document.createDocumentFragment();
  const template = document.createElement('template');
  template.innerHTML = str;
  fragment.appendChild(template.content); // 此處還是要按照原生template的那套來的, 這個(gè)template不會(huì)被vue特殊解析
  target.appendChild(fragment);
}

很遺憾并不能直接使用innerHTML向DocumentFragment內(nèi)寫入DOM, 仍舊需要appendChild來完成, 所以完全沒有必要?jiǎng)?chuàng)建DocumentFragment, 我認(rèn)為這個(gè)API更加適合用于對(duì)頻繁DOM操作進(jìn)行優(yōu)化, 比如用戶點(diǎn)擊按鈕后就要插入100條tips, 那就更適合先使用這個(gè)API生成一個(gè)文檔內(nèi)容分段, 然后把成品分段加入DOM.

這個(gè)初版和舊版也都是回流一次…

因?yàn)槲臋n片段存在于內(nèi)存中, 并不在 DOM 樹中, 所以將子元素插入到文檔片段時(shí)不會(huì)引起頁面回流(對(duì)元素位置和幾何上的計(jì)算).
因此, 使用文檔片段通常會(huì)帶來更好的性能.

完全可以把:

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

這種會(huì)引起頁面頻繁回流的寫法

改成

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);

這樣頁面只會(huì)在fragment被appendChild后回流一次.

到此這篇關(guān)于Vue中原生template標(biāo)簽失效如何解決的文章就介紹到這了,更多相關(guān)Vue template標(biāo)簽失效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！