vue保姆级教程----深入了解 Vue3与Vue2的区别对比

📢?鸿蒙专栏：想学鸿蒙的，冲

📢 C语言专栏：想学C语言的，冲

📢?VUE专栏：想学VUE的，冲这里

📢?CSS专栏：想学CSS的，冲这里

📢 Krpano专栏：想学VUE的，冲这里

🔔 上述专栏，都在不定期持续更新中！！！！！！！！！！！！！

目录

? 前言

一、性能提升

二、组合式API

三、新增特性

四、移除过滤器

五、移除事件API

六、新增Composition API

七、tree-shaking支持

八、调整部分API命名

九、新的全局API

十、新的组件实现方式

十一、其他改变

? 结语

---

?

? 前言

????????Vue作为当下最热门的前端框架之一,经历过从Vue 1.x到2.x的迭代更新,在2020年9月正式发布了Vue 3的正式版本。Vue3在性能优化、新增特性等各个方面进行了全面的改进。那么Vue3与Vue2在语法和功能上又有哪些区别呢?本文将全面对比两者的不同之处,帮助大家更好地从Vue2迁移到Vue3。

一、性能提升

1、编译优化:Vue3对编译器进行了优化,使得打包大小减少41%。

• 使用标记模板的方式取代虚拟DOM,减少了内存占用。
• 修复了Vue2存在的编译模板时过程中重复生成代码的问题。
• 对AST树进行了标记和静态提升,使得编译过程更高效。

举例来说,下面的Vue2代码:

<template>
  <div>{{message}}</div> 
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello' 
    }
  }
}
</script>

在Vue2中编译时会生成如下render函数:

with(this){
  return _c('div',[_v(_s(message))]) 
}

?而在Vue3中,同样的模板会编译成:

return {
  render() {
    return _c('div',{
      message: ctx.message
    })
  }  
}

这样就避免了无谓的代理操作,提升了性能。?

2、代理:Vue3中的代理可以自动批量代理对象中的所有属性,无需一个一个声明。

3、模板编译优化:引入块级作用域,模板中的变量不会互相污染。

Vue3中的模板编译支持块级作用域,这样模板中的变量就不会互相污染了。

例如在Vue2中,父组件和子组件中使用相同的变量名会互相影响:

// 父组件
<template>
  <div>{{message}}</div>
  <child-component></child-component>
</template>

// 子组件 
<template>
  <div>{{message}}</div>  
</template>

但在Vue3中,引入了块级作用域,不存在这个问题:

// 父组件
<template>
  <div>{{message}}</div>
  <child-component></child-component> 
</template>

// 子组件
<template>
  <div>{{message}}</div> // 不受父组件的影响
</template>

4、源码采用TS重写,运行更高效。Vue3使用TypeScript重写源码,类型检查更严谨,编码时也能获得更好的提示。同时TS运行效率也比纯JavaScript要高,对性能有提升作用。

二、组合式API

Vue3提供了setup方法,我们可以更灵活地组合逻辑代码,不再受以前data、methods等选项的限制。

// Vue2
export default {
  data() {
    return {
      message: 'Hello Vue2'
    }
  },
  methods: {
    onClick() {
      console.log(this.message)
    }
  }
}

// Vue3
import {ref, onMounted} from 'vue'

export default {
  setup() {
    const message = ref('Hello Vue3')
    
    onMounted(() => {
      console.log(message.value)
    })
    
    return {
      message
    }
  }
}

三、新增特性

1. Fragment:文档碎片,不再要求组件根节点是单个元素。

   <!-- Vue2需使用一个根节点 -->
   <template>
     <div>
       <header></header>
       <main></main>
       <footer></footer>
     </div>
   </template>
   
   <!-- Vue3可以不使用根节点 -->
   <template>
     <header></header>
     <main></main>
     <footer></footer>
   </template>

2. Teleport:瞬移组件根节点到指定DOM位置。

   <teleport to="#modal">
     <div>弹窗内容</div>
   </teleport>

3. Suspense:支持异步组件加载时显示加载界面。

   <suspense>
     <async-component></async-component>
     <template #fallback>
       加载中...
     </template>
   </suspense>

四、移除过滤器

过滤器已不被官方推荐,Vue3中移除了过滤器这个概念。

Vue2中我们可以通过过滤器改变数据的展示:

<!-- 在双括号插值中 -->
<div>{{ message | capitalize }}</div> 

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

// 定义过滤器
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

但在Vue3中,过滤器被完全移除了。官方推荐通过方法调用或计算属性去实现数据变换。?

五、移除事件API

Vue3移除了$on、$off、$once方法,改为使用emits属性。

Vue2中我们通过$on,$off,$once管理事件:

// 监听事件
this.$on('test', handle)

// 取消监听
this.$off('test', handle)

// 监听一次
this.$once('test', handle)

Vue3中推荐使用emits属性替代这些事件API:

emits: ['test']

六、新增Composition API

Vue3全新提供了一套更适合功能开发的Composition API 如ref、reactive等,我们可以更灵活地组织组件的逻辑。

例如ref实现响应式数据:

import {ref} from 'vue'

const counter = ref(0)

reactive转换对象为响应式:

import {reactive} from 'vue'

const state = reactive({
  count: 0
})

?computed实现计算属性等,这套API给了我们更多可能性。

七、tree-shaking支持

Vue3支持tree-shaking,也就是打包时只打包实际用到的代码,减少了打包产物体积。

八、调整部分API命名

一些API做了重命名,语义更加明确,例如:

• $listeners 改为 emits
• $attrs 改为 expose

九、新的全局API

Vue3提供了一些新的全局API:

• createApp:用于创建Vue实例

  import {createApp} from 'vue'
  
  const app = createApp(App)

• defineComponent: 定义组件

  import {defineComponent} from 'vue'
  
  const Component = defineComponent({})

• defineAsyncComponent:定义异步组件
• nextTick:在下次DOM更新循环结束之后执行延迟回调
• h:创建虚拟节点

  import {h} from 'vue' 
  
  // 在render函数中: 
  return h('div', {}, [
    h('span', {}, 'VNode') 
  ])

十、新的组件实现方式

Vue3推荐使用组合式API来实现组件逻辑,我们可以使用setup函数并返回响应式状态:

// MyComponent.vue

import {ref, reactive} from 'vue'

export default {
  setup() {
    const message = ref('Hello')
    
    const state = reactive({
      name: 'John'  
    })
    
    return {
      message,
      state 
    }
  }
}

这样使组件逻辑更清晰,也方便测试。

十一、其他改变

• 使用事件名而不是事件处理函数重命名 v-on
• 移除 .sync 修饰符,改为 v-model
• 优化 slots 语法,移除 v-slot:xxx 的写法

? 结语

????????通过上文的对比,我们可以看出Vue3在编译优化、组合式API等方面进行了较大的改进,为开发者提供了更好的性能和更灵活的功能。一些API调用和语法也进行了调整,更贴合实际使用需求。

????????总的来说,Vue3是一个重要的更新,值得每一位Vue开发者认真学习和使用。但从Vue2到Vue3的迁移也需要一定的时间成本投入,需要我们审慎评估后再进行过渡。本文对两者之间的区别进行了全面梳理,希望可以帮助大家更顺利地上手Vue3的新特性,并根据项目实际需求进行更新迁移。

? ? ? ? 我们改日再会