网站建设管理办法_深圳建设局网和住房网_最新国际新闻事件今天_seo查询系统

vue2与vue3对比补充（上）

Vue 2与Vue 3 的区别

1. 代码结构与组织方式

• Vue 2：采用选项式API，将数据、计算属性、方法等分别定义在不同的选项中，如data、computed、methods等，代码结构相对分散。例如：

export default {data() {return {message: 'Hello Vue 2'};},computed: {reversedMessage() {return this.message.split('').reverse().join('');}},methods: {sayHello() {console.log(this.message);}}
};

• Vue 3：主推组合式API，通过setup函数将相关逻辑组合在一起，使代码更集中和可维护，提高了代码的可读性和可复用性。例如：

import { ref, computed } from 'vue';export default {setup() {const message = ref('Hello Vue 3');const reversedMessage = computed(() => message.value.split('').reverse().join(''));const sayHello = () => {console.log(message.value);};return {message,reversedMessage,sayHello};}
};

2. 性能优化

• Vue 2：在组件更新时，会对整个组件实例进行重新渲染，即使只有部分数据发生变化。
• Vue 3：引入了更细粒度的响应式系统，能够更精确地追踪数据变化，只更新受影响的部分，从而提高了性能。例如，当一个对象中的某个属性发生变化时，Vue 3可以只更新使用该属性的地方，而不是整个组件。

3. 事件缓存

• Vue 2：在使用v-on指令绑定事件时，每次组件重新渲染都会创建一个新的事件处理函数实例，这可能导致性能问题，特别是在频繁渲染的组件中。
• Vue 3：对事件处理函数进行了缓存优化，在同一元素上多次绑定相同的事件时，只会创建一个事件处理函数实例，提高了性能。例如，在一个按钮组件中，多次点击按钮时，Vue 3只会创建一个点击事件处理函数实例，而Vue 2会每次都创建新的实例。

4. Teleport组件

• Vue 3：新增了Teleport组件，用于将组件的模板内容渲染到指定的DOM节点，而不是默认的组件所在位置。这对于创建模态框、弹出菜单等需要在特定位置显示的组件非常有用。例如，可以将模态框的内容渲染到页面的根节点下，使其在视觉上覆盖整个页面，而不受组件层级结构的限制。
• Vue 2：没有内置类似的功能，实现类似效果可能需要手动操作DOM或使用第三方库。

5. Suspense组件

• Vue 3：引入了Suspense组件，用于处理异步组件的加载状态。它可以在异步组件加载过程中显示一个备用内容，如加载指示器，直到异步组件加载完成并渲染。这提供了更好的用户体验，避免了页面在异步组件加载时出现空白或闪烁。例如，在加载一个大型图表组件时，可以先显示一个加载动画，直到图表数据加载完成并渲染出来。
• Vue 2：没有原生支持类似的异步组件加载状态处理机制，需要开发者自己实现加载状态的管理和显示。

6. 静态树提升

• Vue 3：在编译模板时，能够识别模板中的静态节点，并将其提升到渲染函数外部，避免在每次渲染时重新创建这些静态节点，从而提高了性能。例如，一个包含大量静态文本和元素的组件模板，Vue 3会将这些静态部分提取出来，只在组件首次渲染时创建一次，后续渲染时直接复用。
• Vue 2：没有这种优化，每次渲染都会重新创建整个模板内容，包括静态部分。

7. 多根节点组件

• Vue 3：允许组件模板有多个根节点，这在一些特定场景下可以简化组件的结构。例如，一个组件可能需要返回两个相关但独立的元素，如一个按钮和一个提示文本，在Vue 3中可以直接在模板中编写这两个根节点。
• Vue 2：组件模板必须有且只有一个根节点，否则会报错。如果需要返回多个元素，通常需要使用一个额外的父元素包裹起来。

8. 全局API的变化

• Vue 2：有一些全局API，如Vue.extend用于创建组件构造函数，Vue.set用于设置响应式对象的属性等。
• Vue 3：对全局API进行了优化和调整，一些全局API被移除或修改。例如，Vue.extend不再推荐使用，而是通过defineComponent函数来定义组件；Vue.set在Vue 3中已被废弃，因为Proxy-based的响应式系统可以自动处理属性的添加和更新。

9. 动态组件的改进

• Vue 2：使用<component :is="componentName"></component>来实现动态组件切换，组件切换时会销毁旧组件并创建新组件。
• Vue 3：动态组件的功能得到增强，支持在组件切换时保留组件状态，通过keep-alive组件结合v-slot指令可以更灵活地控制组件的缓存和更新策略。例如，可以在keep-alive组件中使用v-slot来指定在组件激活和失活时的回调函数，以便在合适的时机进行数据加载和资源清理。

10. 内置组件的变化

• Vue 2：有一些内置组件，如transition用于实现过渡效果，keep-alive用于缓存组件实例等。
• Vue 3：对内置组件进行了改进和扩展。例如，transition组件在Vue 3中支持更多的过渡动画选项和自定义类名，使开发者能够更方便地实现复杂的过渡效果；keep-alive组件在功能和使用方式上也有所优化，如支持在setup函数中通过onActivated和onDeactivated钩子函数来处理组件激活和失活时的逻辑。

11. 构建工具和生态系统

• Vue 2：主要使用vue-cli作为构建工具，生态系统相对成熟，但在一些新特性和优化方面可能不如Vue 3。
• Vue 3：推荐使用vite作为构建工具，它提供了更快的冷启动速度和热模块替换（HMR）性能，能够显著提高开发体验。同时，Vue 3的生态系统也在不断发展和完善，更多的库和工具开始支持Vue 3，为开发者提供了更多的选择。

Teleport 组件 与 Suspense 组件 应用实例

Teleport组件应用实例

• 模态框：

<template><button @click="showModal = true">打开模态框</button><Teleport to="body" v-if="showModal"><div class="modal"><h2>模态框标题</h2><p>这是模态框的内容。</p><button @click="showModal = false">关闭</button></div></Teleport>
</template><script>
export default {data() {return {showModal: false};}
};
</script><style>
.modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: white;padding: 20px;border-radius: 5px;
}
</style>

• 与第三方库集成：

<template><Teleport to="#map-container"><div id="map">这是地图组件</div></Teleport>
</template>

在页面的其他地方，有一个<div>元素作为地图的容器：

<div id="map-container"></div>

• 全局通知组件：

<template><button @click="showNotification = true">显示通知</button><Teleport to="#notification-container" v-if="showNotification"><div class="notification">重要通知！</div></Teleport>
</template><script>
export default {data() {return {showNotification: false};}
};
</script><style>
.notification {position: fixed;top: 20px;right: 20px;background-color: #333;color: white;padding: 10px;border-radius: 5px;
}
</style>

在页面中设置通知容器：

<div id="notification-container"></div>

Suspense组件应用实例

• 异步组件加载：

<template><Suspense><template #default><AsyncComponent /></template><template #fallback><div>加载中...</div></template></Suspense>
</template><script setup>
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() => 
import('./components/AsyncComponent.vue'));
</script>

• 加载多个异步组件：

<template><Suspense><template #default><div><AsyncComponent /><AnotherAsyncComponent /></div></template><template #fallback><div>组件正在加载中...</div></template></Suspense>
</template><script setup>
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() => 
import('./components/AsyncComponent.vue'));
const AnotherAsyncComponent = defineAsyncComponent(() => 
import('./components/AnotherAsyncComponent.vue'));
</script>

• 在路由懒加载中使用：

<RouterView v-slot="{ Component }"><template v-if="Component"><Transition mode="out-in"><KeepAlive><Suspense><component :is="Component"></component><template #fallback><div>路由正在加载中...</div></template></Suspense></KeepAlive></Transition></template>
</RouterView>

技术名词解释（vue中的内置动画）

1. transition组件

   • 功能介绍
     • 过渡效果实现：Vue的transition组件用于在元素插入、更新或移除时应用过渡效果。它会自动嗅探目标元素是否应用了CSS过渡（transition）或动画（animation），并在适当的时候添加/移除CSS类名来触发这些效果。
     • 过渡类名管理：transition组件在过渡的不同阶段会给元素添加不同的类名。这些类名包括v - enter（进入过渡的开始状态）、v - enter - active（进入过渡的生效状态）、v - enter - to（进入过渡的结束状态，在Vue 2.1.8+版本中使用）、v - leave（离开过渡的开始状态）、v - leave - active（离开过渡的生效状态）和v - leave - to（离开过渡的结束状态，在Vue 2.1.8+版本中使用）。
   • 应用实例
     • 简单的淡入淡出效果
       • HTML代码：

         <template><button @click="show =!show">切换显示</button><transition name="fade"><p v - if="show">这是一段需要过渡效果的文字。</p></transition>
         </template>
         <script>
         export default {data() {return {show: true};}
         };
         </script>
         <style>
         

       .fade - enter - active,
       .fade - leave - active {
       transition: opacity 0.5s;
       }
       .fade - enter,
       .fade - leave - to {
       opacity: 0;
       }
       
       • 代码解释：
         • 当show的值改变时，<p>元素会根据transition组件的name属性（这里是fade）添加相应的类名。
         • 在CSS中，fade - enter - active和fade - leave - active类用于定义过渡的持续时间和过渡属性（这里是opacity的过渡，持续时间为0.5秒）。fade - enter和fade - leave - to类用于定义过渡的起始和结束状态的opacity为0，从而实现淡入淡出效果。
     • 列表过渡效果
       • HTML代码：

         <template><button @click="addItem">添加元素</button><transition - group name="list" tag="ul"><li v-for="(item, index) in items" :key="index">{{ item }}</li></transition - group>
         </template>
         <script>
         export default {data() {return {items: ['苹果', '香蕉']};},methods: {addItem() {this.items.push('橙子');}}
         };
         </script>
         <style>
         

       .list - enter - active,
       .list - leave - active {
       transition: all 0.5s;
       }
       .list - enter,
       .list - leave - to {
       opacity: 0;
       transform: translateY(30px);
       }
       
       • 代码解释：
         • 这里使用了transition - group组件来对列表元素进行过渡。tag="ul"属性指定了包裹列表项的标签为<ul>。
         • 当添加新元素时，每个<li>元素会根据list这个name属性添加相应的过渡类名。在CSS中，定义了元素进入和离开时的过渡效果，包括透明度（opacity）和垂直位移（transform: translateY）的变化，持续时间为0.5秒。

2. animation组件（Vue没有名为animation的内置组件）

   • 结合CSS动画实现过渡效果：虽然Vue没有专门的animation组件，但可以利用transition组件和CSS动画来实现复杂的动画效果。
   • 应用实例（结合CSS动画的过渡效果）
     • 旋转动画效果
       • HTML代码：

         <template><button @click="show =!show">切换显示</button><transition name="rotate" appear><div v-if="show" class="box"></div></transition>
         </template>
         <script>
         export default {data() {return {show: true};}
         };
         </script>
         <style>
         

       .rotate - enter - active {
       animation: rotateIn 0.5s;
       }
       .rotate - leave - active {
       animation: rotateOut 0.5s;
       }
       @keyframes rotateIn {
       from {
       transform: rotate(-200deg);
       opacity: 0;
       }
       to {
       transform: rotate(0);
       opacity: 1;
       }
       }
       @keyframes rotateOut {
       from {
       transform: rotate(0);
       opacity: 1;
       }
       to {
       transform: rotate(200deg);
       opacity: 0;
       }
       }
       .box {
       width: 100px;
       height: 100px;
       background - color: blue;
       }
       
       • 代码解释：
         • 当show的值改变时，<div>元素会根据transition组件的name属性（这里是rotate）添加相应的类名。
         • 在CSS中，rotate - enter - active类绑定了rotateIn动画，用于元素进入时的旋转和淡入效果，rotate - leave - active类绑定了rotateOut动画，用于元素离开时的旋转和淡出效果。动画的关键帧（@keyframes）定义了旋转和透明度的变化过程，持续时间为0.5秒。