vue2和vue3

一.vue分为选项式和组合式

1.选项式就是一般vue2 的写法，包含多个选项来描述组件的逻辑，例如data，methods和生命周期函数。选项式多定义的属性会暴露在函数内部的this上，他会指向组件实例

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

2.组合式就是一般vue3 的写法，单个文件中组合式一般和<script setup>搭配使用

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

二.其他不同

1、双向数据绑定原理不同

在Vue 3中，使用Proxy来实现数据监听和响应式更新的优势在于以下几点：
1.监听整个对象：Vue 2.中使用Object.defineProperty只能监听对象的某个属性，而Proxy可以直接监听整个对象，无论是对象属性的新增、修改还是删除，都能够被监听到。这样就省去了在Vue 2中通过递归遍历对象的属性来实现监听的复杂逻辑。
2.性能提升：使用Proxy不需要通过闭包和循环来遍历对象属性，在访问对象属性时直接拦截并触发相应的操作。这样可以避免了在Vue 2.中由于遍历对象属性导致的性能损耗。
3.监听数组：Vue3中的Proxy可以直接监听数组的变化，无需像Vue 2.x中那样使用特殊的数组方法（如push、pop等）进行特殊的操作来实现监听。当对数组进行操作时，Proxy可以捕获到数组的变化并进行响应式更新。
举个例子，假设有以下代码：
const obj = new Proxy({}, {
set(target, key, value) {
console.log('设置属性', key, '为', value);
target[key] = value;
return true;
}
});
obj.name = 'ChatAI';
// 输出：设置属性 name 为 ChatAI
在上面的例子中，当给obj对象设置属性时，Proxy会捕获到属性的变化，并在控制台输出相应的信息。这样就实现了属性的监听和响应式更新。
总之，使用Proxy API替代了Object.defineProperty，使得Vue 3的双向数据绑定更加高效和灵活，而不仅限于属性级别的监听。

2、是否支持碎片

vue2：vue2不支持碎片。
vue3：vue3支持碎片（Fragments），就是说可以拥有多个根节点。

3、定义数据变量和方法不同

vue2：vue2是把数据放入data中，在vue2中定义数据变量是data(){}，创建的方法要在methods:{}中。

vue3：，vue3就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：

从vue引入reactive；
使用reactive() 方法来声明数据为响应性数据；
使用setup()方法来返回我们的响应性数据，从而template可以获取这些响应性数据。

4、生命周期钩子函数不同

vue2：vue2中的生命周期：

beforeCreate 组件创建之前
created 组件创建之后
beforeMount 组价挂载到页面之前执行
mounted 组件挂载到页面之后执行
beforeUpdate 组件更新之前
updated 组件更新之后

vue3：vue3中的生命周期：

setup 开始创建组件
onBeforeMount 组价挂载到页面之前执行
onMounted 组件挂载到页面之后执行
onBeforeUpdate 组件更新之前
onUpdated 组件更新之后

5、父子传参不同

vue2：父传子，用props,子传父用事件 Emitting Events。在vue2中，会调用this$emit然后传入事件名和对象。

vue3：父传子，用props,子传父用事件 Emitting Events。在vue3中的setup()中的第二个参数content对象中就有emit，那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

6、指令与插槽不同

vue2：vue2中使用slot可以直接使用slot；v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用。

vue3：vue3中必须使用v-slot的形式；vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句，不会相互冲突；vue3中移除keyCode作为v-on的修饰符，当然也不支持config.keyCodes；vue3中移除v-on.native修饰符；vue3中移除过滤器filter。

7、main.js文件不同

vue2：vue2中我们可以使用pototype(原型)的形式去进行操作，引入的是构造函数。

vue3：vue3中需要使用结构的形式进行操作，引入的是工厂函数；vue3中app组件中可以没有根标签。