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代码:

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

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

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

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

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

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

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

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

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

// 父组件


// 子组件 

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

// 父组件


// 子组件

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:文档碎片,不再要求组件根节点是单个元素。

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

   
     
   弹窗内容
   

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

四、移除过滤器

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

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

{{ message | capitalize }}
 




// 定义过滤器
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的新特性,并根据项目实际需求进行更新迁移。

        我们改日再会