Vue2.x与Vue3.x异同

最近在学习vue的框架，将vue2.x的所有基本使用都刷过一遍了，学完vue2.x版本后接着去学习vue3.x，可能我看的是一个比较旧的版本（2020年的教学视频），虽然课程是基于vite创建的vue3.x项目，但是写法大多数都是vue2.x的学法，所以我发现不对劲后就去查看了相关的vue3.x，发现vue3.x是向下兼容的，所以在vue3上也能运用vue2的语法，后来得到朋友提示后，了解到了setup（）语法糖的用法，于是我写一遍文章来对比二者一些基本使用的差异，用以记作笔记，以便以后的复习。

1. 数据项的引用

在vue2.x中，使用的是选项类型的option API，也是就说，我们需要在script里定义每个属性节点，data节点是我们经常引用的一个数据项，需要引用的时候直接使用“插值表达式”或者“v-text”就能引用到相应的data数据

在vue3.x上，使用的是合成型Composition API ，vue2.x上需要把数据放在data项中，vue3.x则需要一个新的setup（）方法，按需导入“ref”和“reactive”，ref是用来接收数据的，它会将数据转化成具有响应式属性的ref对象，ref对象里存在一个.value属性，指向数据真实的值；reactive同样用来接收数据（但于ref不一样的是，它不能传入基本类型的值），它会将数据转化成具有响应式的proxy对象，因为是proxy对象，所以可以直接用访问对象属性的方法来访问数据。

2. Setup的生命周期

在vue2.x的生命周期运行有三个阶段，分别是：

1.实列创建阶段（ beforeCreate，created，beforeMount，mounted）

2.运行阶段（beforeUpdate，updated）

3.销毁阶段（beforeDestory，destoryed ）

在vue3.x新增的setup（）函数，有特有的生命周期函数，而且对vue2.x的生命周期函数进行了更新，而且在vue3.x中，因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

• beforeCreate -> use setup()

• created -> use setup()

• beforeMount -> onBeforeMount

• mounted -> onMounted

• beforeUpdate -> onBeforeUpdate

• updated -> onUpdated

• beforeDestroy -> onBeforeUnmount

• destoryed -> onUnmounted

vue2.x需要引用生命周期函数的时候，需要定义每一个生命周期函数的节点，将相应的操作写入到函数里面，里面的函数即会在对应的周期条件被触发。

vue3.x则需要定义在setup里，相比于vue2.x的写法，由于考虑到代码的连贯，个人感觉vue3.x的代码可读性会更强。

3. 组件间的传值

1. 在vue2.x当中，我用得最多的就是组件间的传值的是，一个是父向子传值（自定义属性：props），另外一个是子向父传值（自定义事件：emits）

• 父组件向子组件传值（自定义属性：props）

首先在子组件定义props

接着在父组件中引入，注册子组件，然后在子组件节点中动态绑定data值给props里定义的自定义属性

• 子组件向父组件传值（自定义事件：emits）

首先在子组件中声明自定义事件emits，然后调用this.$emit方法将数据传到父组件

父组件根据子组件声明的自定义事件名称，动态绑定一个方法，在此方法的默认参数就是子组件传过来的数据

2. 在vue3.x中，父向子传值用到的是（ defineProps），子向父传值用到的是（defineEmits），与vue2.x原理类似，只不过在语法中用了setup的方法

• 父组件向子组件传值（自定义属性：defineProps）

首先子组件需要按需导入{defineProps}，然后在调用这个方法，在里面定义自定义属性

然后需要在父组件里需要将数据通过动态绑定自定义属性的方法，将数据传到子组件

• 子组件向父组件传值（自定义事件：defineEmits）

首先子组件需要按需导入{defineEmits}，然后在调用这个方法，在里面定义自定义方法

然后在父组件里子组件节点中使用这个自定义事件，将自定义事件用一个方法接收，这个方法的默认参数就是子组件传过来的数据

---

持续更新中...（边学边写）