VUE框架Vue3是怎么优化实现去除组件嵌套的根组件实现性能优化的------VUE框架

旧约Alatus

已于 2023-12-29 11:41:07 修改

阅读量396

点赞数 10

分类专栏： # VUE框架前端文章标签：前端 javascript vue.js vue 前端框架 ecmascript js

于 2023-12-28 15:43:47 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/135271241

版权

前端同时被 2 个专栏收录

332 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<template>
    不需要提供根元素了
    fragment包括了,这是一个虚幻的虚拟的根标签
    优化掉了我们的根节点
    在VUE2的时候,每个组件必须要有一个跟标签,这样性能会略微收到影响
    如果每个组件都必须有跟标签,组件之间嵌套的时候就会有很多无用的跟标签
    在Vue3中每个组件不需要有跟标签,实际上内部实现的时候,会将所有组件嵌套好,最外层添加
    一个fragment,用这个fragment做跟标签,这是一种性能优化策略
</template>

<script>
export default {
    name : "User"
}
</script>

<style>

</style>
<template>

不需要提供根元素了

fragment包括了,这是一个虚幻的虚拟的根标签

优化掉了我们的根节点

在VUE2的时候,每个组件必须要有一个跟标签,这样性能会略微收到影响

如果每个组件都必须有跟标签,组件之间嵌套的时候就会有很多无用的跟标签

在Vue3中每个组件不需要有跟标签,实际上内部实现的时候,会将所有组件嵌套好,最外层添加

一个fragment,用这个fragment做跟标签,这是一种性能优化策略

</template>

<script>

export default {

name : "User"

}

</script>

<style>

</style>

import mitt from 'mitt';
// 这个会创建一个对象emitter
// 把它当作全局事件总线对象即可
export default mitt();
import mitt from 'mitt';

// 这个会创建一个对象emitter

// 把它当作全局事件总线对象即可

export default mitt();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    
    
    
    
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<link rel="icon" href="/favicon.ico">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Vite App</title>

</head>

<body>









<div id="app"></div>

<script type="module" src="/src/main.js"></script>

</body>

</html>