vue2和vue3在写法上有什么不同？

一、vue2和vue3写法及区别：

1. Vue响应式的底层实现不同

Vue2底层是通过es5的Object.defineProperty，使用Object.defineProperty()进行数据劫持，结合订阅发布的方式实现，有一定的局限性。

缺点：对数组更新的时候无法实现响应式，它内部有一个this.$set去实现
如果响应式定义的数据层级比较深（对象里面有对象，对象里面还有对象）它内部是 通过递归的形式去实现的

Vue3底层是通过es6的Porxy， 使用Proxy代理，使用ref或者reactive将数据转化为响应式数据，能够更好地支持动态添加属性和删除属性。
它解决了Vue2底层实现的缺点，对数组、层级比较深的对象处理都很优秀

缺点：浏览器兼容不是很好

2. 生命周期有一定的区别

对于生命周期来说，Vue3整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）中可以直接调用生命周期钩子。

Vue2------------------------------Vue3

初始化阶段：

beforeCreate ------------------ setup()

created -------------------------- setup()

beforeMount -------------------- onBeforeMount

mounted -------------------------- onMounted

更新阶段：

beforeUpdate ------------------ onBeforeUpdate

updated ------------------------- onUpdated

activated ---------------------- onActivated

deactivated ------------------- onDeactivated

销毁阶段：

beforeDestroy ---------------- onBeforeUnmount

destroyed ---------------------- onUnmounted

3. 模块指令

在vue2或者vue3 中v-if和v-for可以同时存在，但是

在vue2中，v-for 优先级高于 v-if;

在vue3 中，v-if 优先级高于v-for;

4. 写法区别

vue写法共有组合式和选项式两种写法，vue2主要使用选项式写法，vue3主要使用组合式写法;vue2只支持选项式写法 ，vue3同时支持选项式和组合式写法。

• 最基本的 Vue2 写法

<template>
  <div>{{ count }}</div>
  <button @click="onClick">
    增加 1
  </button>
</template>
 
<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    onClick() {
      this.count += 1;
    },
  },
}
</script>

• vue3写法

 // Vue3 的写法
 
<template>
  <div>{{ count }}</div>
  <button @click="onClick">
    增加 1
  </button>
</template>
 
<script setup>
import { ref } from 'vue';
 
 // 用这种方式声明
const count = ref(1);
 
const onClick = () => {
   // 使用的时候记得 .value
  count.value += 1;
};
</script>