一文搞懂Vue2和Vue3都有哪些区别

2022-08-09 80 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

前言

Vue3已经出来2年了，在今年早些时候也已经成为了官方默认版本，目前很多小伙伴还在用Vue2，本文从多个角度讲一下Vue3与Vue2有哪些区别，打消大家的顾虑。

源码层面比较大的变动

响应式对象由Object.defineProperty()到proxy，基于Proxy的观察者机制，节省了内存开销
diff算法优化
更好的typescript支持
重写了虚拟DOM，更多的编译时提示来减少运行时的开销

语法层面

在原有选项式API上，支持了组合式，使用起来更加灵活。（options api -> composition api）

// 原
export default {
    data() {},
    watch: {},
    computed: {},
    mounted() {},
    methods: {},
}

// 新
// data
const name = ref('a')
// watch
watch(
  () => name,
  (val) => {
    console.log('val', val)
  }
);
// mounted
onMounted(() => {})
// computed
const newName = computed(() => name + '123');
// methods
const fn = () => {}

模板语法99%保持不变
原生支持基于class的组件，并且无需借助任何编译及各种stage阶段的特性
优化插槽生成，可以单独渲染父组件和子组件（可以直接在跟template标签下写多个组件）

// 原
<template>
    <div>
        <componentA/>
        <componentB/>
    </div>
</template>

// 新
<template>
    <componentA/>
    <componentB/>
</template>

生命周期的变化

destory -> unmounted
renderTracked 新增调试钩子，响应式依赖被收集时调用
renderTriggered 新增调试钩子，响应式依赖被触发时调用
serverPrefetch ssr only，组件实例在服务器上被渲染前调用

性能方面

更小巧、更快速支持自定义渲染器
支持摇树优化：一种在打包时去除无用代码的优化手段
支持Fragments和跨组件渲染
静态树提升，降低渲染成本
不兼容IE11，检测机制更加全面、精准、高效,更具可调试式的响应跟踪

结语

可以看到有点还是挺明显的，还没用Vue3的小伙伴还是尽快用起来，尤其是Vue3.2版本以后，可以直接使用<script setup>，帮助我们节省了很多代码。composition也有很多优点，高内聚、低耦合，逻辑组织和复用也更优，并且没有this，也避免了this指向不明的问题。