面试官：Vue2和3有什么区别

最新推荐文章于 2024-02-06 12:44:04 发布

yyds2026

最新推荐文章于 2024-02-06 12:44:04 发布

阅读量216

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/yyds2026/article/details/127087326

版权

本文对比了Vue2和Vue3的主要区别，包括响应式原理由defineProperty变为proxy，提高了性能；优化的diff算法使Vue3比Vue2快6倍；组件定义方式的变化，Vue3采用函数组合，支持Fragments；生命周期钩子现在需要在setup()中使用；计算属性和接收Props的方式在Vue3中也需要引入相应的方法；Vue3中事件的触发需要通过context对象的emit。

摘要由CSDN通过智能技术生成

响应式原理api的改变
Vue2响应式原理采用的是defineProperty，而vue3选用的是proxy。这两者前者是修改对象属性的权限标签，后者是代理整个对象。性能上proxy会更加优秀。
diff算法，渲染算法的改变
Vue3优化diff算法。不再像vue2那样比对所有dom，而采用了block tree的做法。此外重新渲染的算法里也做了改进，利用了闭包来进行缓存。这使得vue3的速度比vue2快了6倍。
建立数据 data
这里就是Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API） 旧的选项型API在代码里分割了不同的属性（properties）：data，computed属性，methods，等等。新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。

区别于vue2组件写法，我们在定义一个vue2的组件的时候，更多是通过一个对象来表达组件，像这样：

而在vue3中，我们会通过方法的组合调用来完成组件的定义，像这样：、

export default {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  }
}

相关vue实战视频讲解：进入学习

Vue3 使用以下三步来建立反应性数据:

从vue引入reactive
使用reactive()方法来声名我们的数据为反应性数据
使用setup()方法来返回我们的反应性数据，从而我们的template可以获取这些反应性数据

import {
    reactive } from 'vue'

export default {
   
  props: {
   
    title: String
  },
  setup () {
   
    const state = reactive({
   
      username: '',
      password: ''
    })

    return {
    state }
  }
}

创建一个 template
组件来说，大多代码在Vue2和Vue3都非常相似。Vue3支持碎片(Fragments)，就是说在组件可以拥有多个根节点。
这种新特性可以减少很多组件之间的div包裹元素。在开发vue的时候，我们会发现每一个组件都会有个div元素包裹着。就会出现很多层多余的div元素。碎片(Fragments)解决了这个问题。
在Vue3的唯一真正的不同在于数据获取。Vue3中的反应数据（Reactive Data）是包含在一个反应状态（Reactive State）变量中。— 所以我们需要访问这个反应状态来获取数据值。
vue2

<template>
  <div class='form-element'>
    <h2> {
  { title }} </h2>
    <input type='text' v-model='username' placeholder='Username' />
    <input type='password' v-model='password' placeholder='Password' />
    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {
  { username + ' ' + password }}
    </p>
  </div>
</template>