笔记大全

面试官突然问 Vue2与Vue3的区别

更新时间：2023-10-05

Vue2和Vue3的主要区别

Vue 2.x是胶水化的框架，它将核心库与插件绑定在一起，而Vue 3.0则采用逐步启用的可配置架构，使得用户可以更好地控制其核心库和插件。

一个显著的变化是，在Vue 3.0中加入了全新的响应式系统，这是因为Vue 2.x的响应式系统中，使用defineProperty作为核心实现，存在一些问题，比如效率低下。

const data = { 
  message: 'Hello World' 
}
const proxy = new Proxy(data, {
  get(target, key) {
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    console.log('Setter Triggered');
    return Reflect.set(target, key, value);
  }
});
proxy.message = 'Changed';
console.log(proxy.message);

这里是一个Vue 3.0版本的代码片段，它展示了Proxy实例作为响应式数据对象的新增特性。通过使用Proxy实例来创建响应式数据对象，实现了更快的数据监听和更高的运行效率。

新的使用方法和代码组织方式

VUE 3.0的唯一目的不仅仅是让代码运行得更快、更高效，而且还使得VUE 3.0更易于使用和学习，增加了一些新的特性和组织方式，构建更好的Vue生态系统。

现在不再需要在Vue实例的属性和方法间切换，所有的选项都在同一个地方，即在Vue生命周期函数中被调用，使得代码的可读性和可维护性大大提高。

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

上述代码片段展示了Vue 3.0的新的应用实例构造和挂载方法。

更加强大的组合式 API

长期以来，Vue 我们编写组件时都使用的是 Options API, 但是对于复杂组件，Options API 经常会导致代码结构复杂，可读性和可维护性降低。此外，很难做到代码的复用。

Vue3.x 中引入了基于函数的更强大的组合式 API，允许您将组件逻辑拆分到更细小的可重用部分。

import { ref, computed } from 'vue'
export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);
    function increment() {
      count.value++;
    }
    return {
      count,
      double,
      increment
    }
  }
}

上述代码定义了一个基于组合式API的组件，它非常容易理解和复用，并且具有更高的可维护性。

打包尺寸优化

在Vue 3.0中，根据官方测试结果，相同的应用在180K bundle下运行流畅，相比Vue 2.x要小得多。VUE 3.0在体积上的优化也是非常重要的特性。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app');

上述代码片段是使用Vue 3.0版本的应用初始化，Vue 3.0运用了Scope Hoisting（作用域提升）和Tree-shaking（摇树），使得打包后的尺寸大为缩小，从而带来更好的性能。

c语言编程笔录