Vue2和Vue3语法糖差异大揭秘：一文读懂，开发不纠结！

引言

在前端开发的江湖里，Vue.js一直是备受瞩目的大侠，凭借其简洁易用的特性，为我们构建用户界面带来了诸多便利。Vue2曾经风靡一时，帮助无数开发者打造出优秀的项目，而Vue3这位后起之秀，带着众多新特性和改进强势登场，一时间让不少前端工程师在开发选型时陷入纠结。今天，咱就来好好唠唠Vue2和Vue3语法糖的那些差异，让大伙在实际开发中能做出更合适的选择。

基础语法糖差异

模板语法对比

在Vue2的世界里，我们写模板那是轻车熟路。比如说，要在模板里展示一个变量，就像这样：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return {
      message: '这是Vue2的消息'
    }
  }
}
</script>

这里{{ message }}就是Vue2模板语法糖的一种体现，它能轻松地把data里的数据渲染到页面上。

再看看Vue3，同样的功能，代码如下：

<template>
  <div>{{ message }}</div>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('这是Vue3的消息');
</script>

Vue3里多了个<script setup>语法糖，这可大有来头。它让我们的代码更加简洁，<script setup>里定义的变量和函数，在模板里可以直接使用，都不用像Vue2那样通过return暴露出去。而且，引入响应式数据用ref，这也是Vue3的新玩法，后面咱会详细讲讲。

指令差异

Vue2的指令那是我们的老熟人了，像v-if、v-for、v-bind、v-on这些，在项目里频繁出现。就拿v-if来说，用来控制元素的显示和隐藏：

<template>
  <div v-if="isShow">这是通过v-if控制显示的内容</div>
</template>
<script>
export default {
  data() {
    return {
      isShow: true
    }
  }
}
</script>

到了Vue3，v-if的基本用法没什么变化，但在一些场景下，配合新特性使用会更强大。比如说，Vue3支持了多根节点的Fragment，这时候v-if用起来就更灵活了：

<template>
  <Fragment>
    <div v-if="isShow">内容1</div>
    <div v-else>内容2</div>
  </Fragment>
</template>
<script setup>
import { ref } from 'vue';
const isShow = ref(true);
</script>

还有v-for，在Vue2里遍历数组或者对象是这么写的：

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      list: ['苹果', '香蕉', '橘子']
    }
  }
}
</script>

Vue3里v-for的语法基本一致，不过在性能优化方面做了不少工作，遍历大数据集时会更高效。

再看看v-model，这个双向绑定的神器。在Vue2里，在表单元素上使用v-model，能轻松实现数据的双向同步：

<template>
  <input v-model="inputValue" type="text">
  <p>输入的值是：{{ inputValue }}</p>
</template>
<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

Vue3中v-model有了一些升级，它支持了自定义组件上的双向绑定，并且可以通过参数来指定绑定的属性和事件，这在开发复杂组件时非常有用：

<template>
  <CustomInput v-model:value="inputValue"></CustomInput>
  <p>输入的值是：{{ inputValue }}</p>
</template>
<script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';
const inputValue = ref('');
</script>

在CustomInput.vue组件里：

<template>
  <input :value="value" @input="handleInput">
</template>
<script setup>
defineProps(['value']);
const emit = defineEmits(['update:value']);
const handleInput = (e) => {
  emit('update:value', e.target.value);
};
</script>

响应式语法糖差异

Vue2的响应式原理回顾

在Vue2里，响应式数据的实现靠的是Object.defineProperty。我们在data函数里定义的数据，Vue会通过这个方法把它们变成响应式的。比如：

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}

这里的count属性，Vue会在内部使用Object.defineProperty来劫持它的get和set操作，这样当count的值发生变化时，Vue就能检测到，然后自动更新视图。

Vue3的响应式新玩法

Vue3抛弃了Object.defineProperty，改用Proxy来实现响应式。Proxy可是个厉害角色，它能对目标对象进行更全面的拦截。在Vue3里，有两个重要的响应式语法糖：ref和reactive。

ref用来定义一个基本类型或者对象类型的响应式数据。定义基本类型时，像这样：

import { ref } from 'vue';
const count = ref(0);

这里的count就是一个响应式变量，在模板里使用时，直接用{{ count }}就行。但在JavaScript代码里访问或者修改它的值，得通过.value，比如：

count.value++;

如果要定义一个对象类型的响应式数据，也可以用ref：

const user = ref({
  name: '张三',
  age: 20
});

在模板里访问对象属性还是正常的写法{{ user.name }}，在JavaScript里要修改对象属性，同样通过.value：

user.value.name = '李四';

reactive则专门用来定义一个复杂的响应式对象。比如：

import { reactive } from 'vue';
const user = reactive({
  name: '张三',
  age: 20
});

使用reactive定义的对象，在JavaScript里访问和修改属性就不需要.value了，直接操作就行：

user.name = '李四';

不过要注意，reactive定义的对象，它的属性必须是在初始化时就存在的，后面动态添加的属性不会自动变成响应式。如果要添加响应式属性，可以借助Vue.set的替代品set方法（在Vue3里从@vue/reactivity中导入）：

import { reactive, set } from 'vue';
const user = reactive({
  name: '张三'
});
set(user, 'age', 20);

另外，Vue3还提供了toRef和toRefs这两个语法糖，它们在处理响应式数据的解构时非常有用。比如说，有一个用reactive定义的对象：

const user = reactive({
  name: '张三',
  age: 20
});

如果直接解构这个对象：

const { name, age } = user;

这样解构出来的name和age就不是响应式的了。这时候就可以用toRefs：

import { reactive, toRefs } from 'vue';
const user = reactive({
  name: '张三',
  age: 20
});
const { name, age } = toRefs(user);

这样解构出来的name和age依然保持响应式。toRef则是针对单个属性，比如：

import { reactive, toRef } from 'vue';
const user = reactive({
  name: '张三'
});
const nameRef = toRef(user, 'name');

nameRef就是一个响应式引用，修改nameRef.value会同步修改user.name。

生命周期语法糖差异

Vue2的生命周期

Vue2的生命周期那是一套完整的流程，从组件的创建到销毁，每个阶段都有对应的钩子函数。比如beforeCreate，在实例刚刚被创建，数据观测和事件配置之前调用；created，在实例创建完成后调用，这时候数据已经绑定好了，可以进行一些初始数据的获取等操作：

export default {
  beforeCreate() {
    console.log('beforeCreate钩子被调用');
  },
  created() {
    console.log('created钩子被调用');
  }
}

还有beforeMount，在挂载开始之前被调用，相关的render函数首次被调用；mounted，在挂载完成后调用，这时候组件已经在页面上渲染出来了：

export default {
  beforeMount() {
    console.log('beforeMount钩子被调用');
  },
  mounted() {
    console.log('mounted钩子被调用');
  }
}

数据更新阶段有beforeUpdate和updated，组件销毁阶段有beforeDestroy和destroyed。

Vue3的生命周期变化

Vue3的生命周期在Vue2的基础上有了一些调整和变化。首先，在<script setup>语法糖下，生命周期钩子函数的写法变了。比如mounted钩子，在Vue3里是这样：

import { onMounted } from 'vue';
onMounted(() => {
  console.log('Vue3的mounted钩子被调用');
});

这里通过onMounted函数来注册mounted生命周期钩子。类似的，created钩子在Vue3里没有直接对应的钩子了，因为<script setup>里的代码执行时机就类似于created阶段。

Vue3的生命周期钩子函数还有一些其他变化，比如beforeDestroy变成了beforeUnmount，destroyed变成了unmounted。这些变化主要是为了让命名更加语义化，和组件的卸载过程对应得更好。

再比如beforeUpdate变成了beforeUpdate，updated变成了updated，使用方式和onMounted类似：

import { beforeUpdate, updated } from 'vue';
beforeUpdate(() => {
  console.log('beforeUpdate钩子被调用');
});
updated(() => {
  console.log('updated钩子被调用');
});

另外，Vue3还新增了一些生命周期钩子，比如onActivated和onDeactivated，这两个钩子在组件被缓存激活和失活时会被调用，在使用keep - alive组件时非常有用。比如说，有一个被keep - alive包裹的组件：

<template>
  <keep - alive>
    <MyComponent />
  </keep - alive>
</template>

在MyComponent.vue组件里：

import { onActivated, onDeactivated } from 'vue';
export default {
  setup() {
    onActivated(() => {
      console.log('组件被激活');
    });
    onDeactivated(() => {
      console.log('组件失活');
    });
    return {};
  }
}

计算属性和监听器语法糖差异

Vue2的计算属性和监听器

在Vue2里，计算属性是通过computed选项来定义的。比如说，有两个数据a和b，要得到它们的和：

export default {
  data() {
    return {
      a: 1,
      b: 2
    }
  },
  computed: {
    sum() {
      return this.a + this.b;
    }
  }
}

在模板里就可以直接使用{{ sum }}，而且当a或者b的值发生变化时，sum会自动重新计算。

监听器则是通过watch选项来实现的。比如要监听a的变化：

export default {
  data() {
    return {
      a: 1
    }
  },
  watch: {
    a(newValue, oldValue) {
      console.log('a的值从', oldValue, '变成了', newValue);
    }
  }
}

当a的值改变时，watch里定义的回调函数就会被触发。

Vue3的计算属性和监听器

Vue3里计算属性和监听器的基本功能没变，但是在<script setup>语法糖下，写法有了变化。计算属性可以通过computed函数来定义：

import { ref, computed } from 'vue';
const a = ref(1);
const b = ref(2);
const sum = computed(() => {
  return a.value + b.value;
});

这里sum就是一个计算属性，在模板里同样可以直接使用{{ sum }}。

监听器在Vue3里可以通过watch函数来实现。监听一个简单的响应式变量，比如a：

import { ref, watch } from 'vue';
const a = ref(1);
watch(a, (newValue, oldValue) => {
  console.log('a的值从', oldValue, '变成了', newValue);
});

如果要监听多个响应式变量，或者监听一个对象的多个属性变化，可以把要监听的源数据放在一个数组里：

import { ref, watch } from 'vue';
const a = ref(1);
const b = ref(2);
watch([a, b], (newValues, oldValues) => {
  console.log('a或者b的值发生了变化');
});

另外，Vue3还新增了一个watchEffect函数，它和watch有点不一样。watchEffect会立即执行传入的函数，并且自动追踪函数内部用到的响应式数据的变化，当这些数据变化时，函数会重新执行。比如：

import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {
  console.log('count的值是', count.value);
});
count.value++;

这里watchEffect里的函数会先执行一次，打印出count的初始值，然后当count的值改变时，函数会再次执行，打印出新的值。

组件通信语法糖差异

Vue2的组件通信

在Vue2里，父子组件通信是很常见的。父组件向子组件传数据，通过属性绑定： 父组件Parent.vue：

<template>
  <Child :message="parentMessage"></Child>
</template>
<script>
import Child from './Child.vue';
export default {
  components: {
    Child
  },
  data() {
    return {
      parentMessage: '这是父组件传给子组件的消息'
    }
  }
}
</script>

子组件Child.vue：

<template>
  <p>{{ message }}</p>
</template>
<script>
export default {
  props: ['message']
}
</script>

子组件向父组件传数据，则通过事件触发。子组件里：

<template>
  <button @click="sendMessageToParent">点击传消息给父组件</button>
</template>
<script>
export default {
  methods: {
    sendMessageToParent() {
      this.$emit('childEvent', '这是子组件传给父组件的消息');
    }
  }
}
</script>

父组件里监听这个事件：

<template>
  <Child @childEvent="handleChildEvent"></Child>
</template>
<script>
import Child from './Child.vue';
export default {
  components: {
    Child
  },
  methods: {
    handleChildEvent(message) {
      console.log('收到子组件的消息：', message);
    }
  }
}
</script>

对于非父子组件通信，Vue2常用的方式是通过事件总线或者Vuex状态管理。事件总线就是创建一个空的Vue实例，作为事件中心，各个组件都可以通过它来触发和监听事件。而Vuex则是一个专门用于管理应用状态的工具，适用于大型项目中复杂状态的共享和管理。

我将延续上文的风格，继续深入探讨Vue3组件通信的方式，以及在实际开发中如何根据项目需求选择Vue2和Vue3，让文章内容更加完整。

Vue3的组件通信

Vue3里父子组件通信和Vue2基本思路一致，但在<script setup>语法糖加持下，代码更加简洁。父组件向子组件传值，例如父组件Parent.vue：

<template>
  <Child :message="parentMessage"></Child>
</template>
<script setup>
import { ref } from 'vue';
import Child from './Child.vue';
const parentMessage = ref('这是Vue3父组件传给子组件的消息');
</script>

子组件Child.vue接收数据：

<template>
  <p>{{ message }}</p>
</template>
<script setup>
defineProps(['message']);
</script>

子组件向父组件传数据时，通过defineEmits定义事件：

<template>
  <button @click="sendMessageToParent">点击传消息给父组件</button>
</template>
<script setup>
defineProps([]);
const emit = defineEmits(['childEvent']);
const sendMessageToParent = () => {
  emit('childEvent', '这是Vue3子组件传给父组件的消息');
};
</script>

父组件监听事件：

<template>
  <Child @childEvent="handleChildEvent"></Child>
</template>
<script setup>
import { ref } from 'vue';
import Child from './Child.vue';
const handleChildEvent = (message) => {
  console.log('收到子组件的消息：', message);
};
</script>

对于非父子组件通信，Vue3除了可以使用Vuex，还可以借助mitt或eventBus这类第三方库。以mitt为例，首先安装mitt：

npm install mitt

然后在项目中创建一个eventBus.js文件：

import mitt from'mitt';
const emitter = mitt();
export default emitter;

在组件A中触发事件：

<template>
  <button @click="sendMessage">发送消息</button>
</template>
<script setup>
import emitter from './eventBus.js';
const sendMessage = () => {
  emitter.emit('customEvent', '这是来自组件A的消息');
};
</script>

在组件B中监听事件：

<template>
  <div>等待接收消息...</div>
</template>
<script setup>
import emitter from './eventBus.js';
const handleMessage = (msg) => {
  console.log('收到消息：', msg);
};
emitter.on('customEvent', handleMessage);
</script>

实际开发中如何选择Vue2和Vue3

项目规模与复杂度

如果是小型项目，开发周期短，对性能要求不是特别严苛，Vue2是个不错的选择。Vue2的语法相对简单直观，团队成员上手快，社区资源丰富，遇到问题很容易找到解决方案。比如开发一个简单的企业官网展示项目，Vue2足以轻松应对，使用它能快速搭建起页面，实现基本的交互功能。

而对于中大型项目，特别是需要处理复杂业务逻辑、大数据量渲染以及频繁状态更新的场景，Vue3更具优势。Vue3采用Proxy实现响应式，性能上有很大提升，在处理大数据集时能明显减少卡顿。其组合式API和<script setup>语法糖，让代码的组织和维护更加方便，在多人协作开发大型项目时，能有效提高开发效率，降低代码的耦合度。例如开发一个大型电商平台，涉及商品展示、购物车、订单处理等复杂功能，Vue3就能更好地发挥其性能和架构优势。

团队技术栈与学习成本

如果团队成员对Vue2已经非常熟悉，并且项目时间紧，没有足够时间学习新技术，继续使用Vue2可以保证项目的顺利推进，避免因学习Vue3带来的时间成本和潜在风险。但如果团队有一定的技术储备和学习能力，且希望引入新特性、提升项目质量，那么Vue3是值得尝试的。虽然Vue3有一些新的语法和概念，但官方文档详细，社区教程丰富，只要投入一定时间学习，就能快速掌握。

兼容性需求

有些项目需要兼容一些老旧的浏览器环境，Vue2在这方面有一定的优势，它的兼容性相对较好。而Vue3由于采用了一些新特性，在一些老旧浏览器上可能需要额外的polyfill来支持。如果项目对浏览器兼容性要求很高，必须支持IE等老旧浏览器，那么在选择时就需要谨慎考虑Vue3的使用。

生态与插件支持

Vue2经过多年的发展，拥有丰富的插件和生态系统，很多成熟的第三方库和插件都能很好地与Vue2配合使用。而Vue3虽然生态也在不断发展壮大，但在某些特定插件的支持上可能还不如Vue2完善。如果项目依赖一些特定的插件，就需要查看这些插件是否支持Vue3，再决定使用哪个版本。

综上所述，Vue2和Vue3各有优劣，没有绝对的好坏之分。作为前端工程师，要根据项目的具体需求、团队情况以及技术发展趋势，综合考虑后做出最合适的选择。无论选择哪一个版本，掌握它们的语法糖差异和特性，都能帮助我们在开发过程中更加得心应手，打造出优秀的前端项目。