详解vue3.2新增的defineCustomElement底层原理

2024-10-06 23:21:23

Web Components

Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。

相当于是浏览器原生的定义组件的方式，不用通过vue或者react这些框架实现组件的定义

customElements

概述

customElements 是Window对象上的一个只读属性，接口返回一个CustomElementRegistry 对象的引用，可用于注册新的 custom elements，或者获取之前定义过的自定义元素的信息。

HTMLTemplateElement 内容模板元素

概述

HTML内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化。
将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<template>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。

常用属性

content 获取DocumentFragment 元素片段的内容
相当于通过document.createDocumentFragment()创建的元素片段，

  <!-- 定义template片段 -->
  <template id="element-template">
    <div>test-template</div>
  </template>

  <script>
    /* 获取template片段 */
    const ele = document.getElementById('element-template')
    ele.content instanceof DocumentFragment  //true

    /* 通过createDocumentFragment创建html片段*/
    const div = document.createDocumentFragment('div')
    div instanceof DocumentFragment    //true

    /* 结论 */
    // 定义在html上的template获取它的content相当于和通过createDocumentFragment创建的html片段是一个东西
  </script>

ShadowRoot

概述

Shadow DOM API 的 ShadowRoot 接口是一个 DOM 子树的根节点, 它与文档的主 DOM 树分开渲染。
你可以通过使用一个元素的 Element.shadowRoot 属性来检索它的参考,假设它是由 Element.attachShadow() 创建的并使 mode 设置为 open.

通过 Element.attachShadow()挂载影子DOM

完整的演示代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <test-shadow-root></test-shadow-root>

  <template id="temEle">
    <style>
      .main{
        color: #f00;
      }
    </style>
    <div class="main">
      我是template片段
      <!-- 使用插槽 -->
      <slot name="header"></slot>
    </div>
  </template>
  <test-template-ele>
    <!-- 定义插槽 -->
    <style>
      .slot{
        color: rgb(87, 28, 223);
      }
    </style>
    <div class="slot" slot="header">我是slot</div>
  </test-template-ele>

  <!-- 生命周期测试 -->
  <div id="moveDiv">
    <button id="add">添加</button>
    <button id="update">更新</button>
    <button id="move">移动</button>
    <button id="remove">删除</button>
  </div>

  <!-- 通过is挂载 -->
  <div is="test-is-com">
    <div>AAA</div>
  </div>

  <script>
    /* 自定义web-components */
    customElements.define('test-shadow-root', class extends HTMLElement {
      /* 当test-shadow-root组件被挂载到DOM上时，执行构造函数 */
      constructor() {
        super()
        const shadowRoot = this.attachShadow({mode: 'open'}) //给指定的元素挂载影子DOM
        // 当执行 this.attachShadow()方法时，shadowRoot被挂载构造函数中，可以通过this访问
        // mode open shadow root元素可以从js外部访问根节点
        // mode closed  拒绝从js外部访问关闭的shadow root节点
        // console.log('执行', this)
        const div = document.createElement('div')
        div.textContent = '我是div的内容'
        // shadowRoot.appendChild()
        // console.log('this', this.shadowRoot)
        shadowRoot.appendChild(div)
        // this.shadowRoot === shadowRoot  true
      }
    })

    /* 通过template自定义HTMLTemplateElement */
    customElements.define('test-template-ele', class extends HTMLElement {
      constructor() {
        super()
        const temEle = document.querySelector('#temEle')
        const templateContent = temEle.content //获取html片段
        // console.log('AA', templateContent instanceof DocumentFragment) //true
        // templateContent
        // 创建影子DOM，用于挂载template的片段
        const shadowRoot = this.attachShadow({mode: 'open'})
        // console.log('shadowRoot', shadowRoot)
        shadowRoot.appendChild(templateContent)
      }
    })

    /* 通过js创建web-组件，测试生命周期函数 */
      class LifeCycle extends HTMLElement {
        static get observedAttributes() {  //必须添加组件上的属性，才能触发attributeChangedCallback
          return ['c', 'l'];
        }

        constructor() {
          super()
          const shadowRoot = this.attachShadow({mode: 'open'})
          const div = `<div>
            <heaher>我的头</header>
            <div>内容</div>
            <footer>尾部</footer>
          </div>`
          shadowRoot.innerHTML = div
        }

        connectedCallback() {  //添加时，执行
          console.log('添加')
        }
        disconnectedCallback() {//删除时，执行
          console.log('disconnectedCallback')
        }
        adoptedCallback() {
          console.log('adoptedCallback')
        }
        attributeChangedCallback() {  //属性被改变时
          console.log('attributeChangedCallback')
        }
      }

      customElements.define('test-life-cycle', LifeCycle)

      const add = document.querySelector('#add')
      const update = document.querySelector('#update')
      const move = document.querySelector('#move')
      const remove = document.querySelector('#remove')
      const moveDiv = document.querySelector('#moveDiv')
      let testLifeDom = null

      function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
      }

      add.addEventListener('click', () => {
        testLifeDom = document.createElement('test-life-cycle')  //创建上面定义的自定义组件
        // console.log('testLifeDom', testLifeDom)
        document.body.appendChild(testLifeDom);
        testLifeDom.setAttribute('l', '100');
        testLifeDom.setAttribute('c', 'red');
        console.log('add', testLifeDom)
      })

      update.addEventListener('click', () => {
        const div = '<div>更新后</div>'
        // console.log('update', testLifeDom.shadowRoot.innerHTML)
        testLifeDom.shadowRoot.innerHTML = div
        testLifeDom.setAttribute('l', random(50, 200));
        testLifeDom.setAttribute('c', `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`);
      })

      move.addEventListener('click', () => {
        console.log('moveDiv', moveDiv)
        moveDiv.appendChild(testLifeDom)
      })

      remove.addEventListener('click', () => {
        console.log('remove')
        document.body.removeChild(testLifeDom);
      })

      /* 通过is挂载组件 */

      customElements.define('test-is-com', class extends HTMLDivElement {
        constructor() {
          super()
          console.log('挂载', this.innerHTML)
          // 通过挂载，this，就是当前被挂载的元素实例，通过这种方式，可以实现一些操作
        }
      }, {extends: 'div'})

  </script>
</body>
</html>

到此这篇关于详解vue3.2新增的defineCustomElement底层原理的文章就介绍到这了,更多相关vue3.2 defineCustomElement内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

一文带你了解vue3.0响应式

目录使用案例 reactive API相关的流程 reactive createReactiveObject 创建响应式对象 mutableHandlers 处理函数 get函数 get函数的的调用时机 track 收集依赖 set函数 trigger 分发依赖 get和副作用渲染函数关联副作用渲染函数的执行过滤结尾我们知道Vue 2.0是利用Ojbect.defineProperty对对象的已有属性值的读取和修改进行劫持,但是这个API不能监听对象属性的新增和删除,此外为了深度劫持对象
浅谈Vue3 defineComponent有什么作用

目录 defineComponent重载函数开发实践 defineComponent函数,只是对setup函数进行封装,返回options的对象: export function defineComponent(options: unknown) { return isFunction(options) ? { setup: options } : options } defineComponent最重要的是:在TypeScript下,给予了组件正确的参数类型推断 . defineCompo
利用Vue3实现一个可以用js调用的组件

目录前言一.常规Vue组件 1. 组件主要代码: 2. 使用方式 3. 实现效果二.改为js调用组件 1. 实现步骤: 2. 具体实现代码: 3. 实现效果展示总结前言项目开发中基本都会用到组件库,但是设计稿样式和功能不一定和组件库相同,尤其像是消息提示弹窗.确认弹窗,各个项目各个设计师都有自己的一套风格.虽然我们可以使用组件库中的组件对其进行样式覆盖来使用.但是一些定制功能还是不容易修改,这种情况我们就会选择自定义组件,然后通过 components 属性引入页面,显式写入标签调用
关于vue3默认把所有onSomething当作v-on事件绑定的思考

最近在重新看vue3的rfcs,发现一个细节,原话如下: props that start with on are handled as v-on bindings, with everything after on being converted to all-lowercase as the event name (more on this below) 也就是说,以后如果你在传递props的时候,以 on 开头的props,如果在组件上没有做props的声明,那么会被当作事件绑定到组件的根
vue3.0+vant3.0快速搭建项目的实现

目录一.项目的搭建二.vue3体验+vant引入 2020年09月18日,vue.js 3.0正式发布,去网上看了看关于3.0的教程都不够完整,但其实vuecli最新版已经支持了vue3.0项目的快速搭建,这篇文章将带你了解一下vue3.0有哪些新的改变以及如何快速搭建vue3.0项目. 一.项目的搭建 1.首先,nodejs的安装不用我多说了吧,nodejs官网地址. 2.既然vuecli最新版已经可以快速搭建3.0了,那怎么升级到最新版呢?vue-cli官网地址,不知道vue-cli版本
Vue3 之 Vue 事件处理指南

目录一.基本事件处理二.向父组件发出自定义事件三.鼠标修饰符四.键盘修饰符五.系统修饰符六.事件修饰符一.基本事件处理使用v-on指令(简称@),我们可以监听DOM事件并运行处理程序方法或内联Javascript. // v-on 指令 <div v-on:click='handleClick' /> // OR <div @click='handleClick' /> 二.向父组件发出自定义事件任何Web框架中的常见用例都是希望子组件能够向其父组件发出事件,这也
详解vue3.2新增的defineCustomElement底层原理

目录 Web Components customElements 概述 HTMLTemplateElement 内容模板元素概述常用属性 ShadowRoot 概述 Web Components Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们. 相当于是浏览器原生的定义组件的方式,不用通过vue或者react这些框架实现组件的定义 customElements 概述 customElements 是Wi
详解vue3.0 diff算法的使用(超详细)

前言:随之vue3.0beta版本的发布,vue3.0正式版本相信不久就会与我们相遇.尤玉溪在直播中也说了vue3.0的新特性typescript强烈支持,proxy响应式原理,重新虚拟dom,优化diff算法性能提升等等.小编在这里仔细研究了vue3.0beta版本diff算法的源码,并希望把其中的细节和奥妙和大家一起分享. 首先我们来思考一些大中厂面试中,很容易问到的问题: 1 什么时候用到diff算法,diff算法作用域在哪里? 2 diff算法是怎么运作的,到底有什么作用? 3 在v-f
详解Vue3 Teleport 的实践及原理

Vue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了,除了这些比较亮眼的更新,Vue3 还新增了一个内置组件: Teleport.这个组件的作用主要用来将模板内的 DOM 元素移动到其他位置. 使用场景业务开发的过程中,我们经常会封装一些常用的组件,例如 Modal 组件.相信大家在使用 Modal 组件的过程中,经常会遇到一个问题,那就是 Modal 的定位问题. 话不多说,我们先写一个简单的 Modal 组件.  <
一文详解Vue3响应式原理

目录回顾 vue2.x 的响应式 vue3的响应式 Reflect 回顾 vue2.x 的响应式实现原理: 对象类型:通过object.defineProperty()对属性的读取.修改进行拦截(数据劫持) 数组类型:通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行了包裹) Object.defineProperty(data,'count ",{ get(){}, set(){} }) 存在问题: 新增属性.删除属性,界面不会更新直接通过下标修改数组,界面不会自动更新但是
详解vue3.x页面功能拆分方式

目录一. 组件二.混入三.api 四.vuex vue3.x相对比vue2.x主要的应用区别在于setup的使用,这个也是vue3.x的特色,所有的功能都得通过vue钩子引入使用,因为 setup 语法糖环境是不支持 this 的,这种开发方式有点回到原始的感觉,针对小项目还好,但如果页面模块功能复杂,如果都放到一个文件里堆叠,不仅会造成可读性差,而且时间长了难以维护,所以这就需要进行按功能拆分了,方式同vue2.x一样,一个是按照组件拆分,一个是混入处理,还有就是通过vuex或api分离
一文详解Vue3中简单diff算法的实现

目录简单Diff算法减少DOM操作例子结论实现 DOM复用与key的作用例子虚拟节点的key 实现找到需要移动的元素探索节点顺序关系实现如何移动元素例子实现添加新元素例子实现移除不存在的元素例子实现总结简单Diff算法核心Diff只关心新旧虚拟节点都存在一组子节点的情况减少DOM操作例子 // 旧节点 const oldVNode = { type: 'div', children: [ { type: 'p', children: '1' },
详解Vue3中对VDOM的改进

前言 vue-next 对virtual dom的patch更新做了一系列的优化,从编译时加入了 block 以减少 vdom 之间的对比次数,另外还有 hoisted 的操作减少了内存的开销.本文写给自己看,做个知识点记录,如有错误,还请不吝赐教. VDOM VDOM的概念简单来说就是用js对象来模拟真实DOM树.由于MV**的架构,真实DOM树应该随着数据(Vue2.x中的data)的改变而发生改变,这些改变可能是以下几个方面: v-if v-for 动态的props(如:class,@cl
详解Vue3 Composition API中的提取和重用逻辑

Vue3 Composition API可以在大型项目中更好地组织代码.然儿,随着使用几种不同的选项属性切换到单一的setup 方法,许多开发人员面临的问题是-- 这会不会更混乱,因为一切都在一个方法中乍一看可能很容易,但是实际上只需要花一点点时间来编写可重用的模块化代码. 让我们来看看如何做到这一点. 问题 Vue.js 2.x 的 Options API 是一种非常直观的分隔代码的方法 export default { data () { return { articles: [], se
详解Vue3.0 + TypeScript + Vite初体验

项目创建 npm: $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev or yarn: $ yarn create vite-app <project-name> $ cd <project-name> $ yarn $ yarn dev 项目结构 main.js 在个人想法上,我觉得createApp()是vue应用的实例,createApp
详解vue3中组件的非兼容变更

函数式组件 functional attribute 在单文件组件 (SFC) <template> 已被移除 { functional: true } 选项在通过函数创建组件已被移除 // 使用 <dynamic-heading> 组件,负责提供适当的标题 (即:h1,h2,h3,等等),在 2.x 中,这可能是作为单个文件组件编写的: // Vue 2 函数式组件示例 export default { functional: true, props: ['level'], re