前端面试之vue2和vue3的区别有哪些

下面是“前端面试之vue2和vue3的区别有哪些”的完整攻略。

1. Vue2与Vue3的区别

Vue3相比于Vue2在性能、API以及组合式API等方面做了很多的优化和改进。

1.1 性能

Vue3在渲染性能方面做出了很多的调整，如通过编译器对hr函数进行内联处理、优化模板中的静态内容、通过Fragments（片段）降低内存使用等。同时，Vue3还引入了响应式系统的新实现，通过Proxy代理对象来实现数据的双向绑定，优化了对数组、Map、Set等数据类型的处理。

1.2 API

Vue3的API也比Vue2更加灵活和易用。比如，Vue3中的refs API可以让我们在组件中获取到DOM节点的引用，而不需要通过$refs来访问，还支持直接访问template里定义的DOM节点；

另外，Vue3中的Composition API(或叫Composition函数)则可以更轻松地管理组件之间的共享逻辑，提高了代码的复用性。而且，跟React类似 Vue3也提供了自己的hooks，比如useEffect，可以使用Composition API代替Options API.

1.3 组合式API

Composition API是Vue3中最为重要的一个新特性，是从Vue2的Options API向更加灵活和组合的Functional API模式转向的重要一步。

Composition API使我们可以让代码更加清晰易懂，同时还可以将代码更加模块化，这里我们可以通过以下示例来了解：

// Vue2 Options API，
export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {
        increment() {
            this.count++;
        },
        decrement() {
            this.count--;
        }
    },
    computed: {
        doubleCount() {
            return this.count * 2;
        }
    }
}

//Vue3 Composition API
import { reactive, computed } from 'vue';

export default {
    setup() {
        const state = reactive({
            count: 0
        })
        const increment = () => {
            state.count++;
        }
        const decrement = () => {
            state.count--;
        }
        const doubleCount = computed(() => state.count * 2)

        return {
            state,
            increment,
            decrement,
            doubleCount
        }
    }
}