vue2使用笔记、vue2和vue3的区别

vue2.0和3.0语法不同，使用时一定要先看版本。
现在主流都是用3.0，所以2.0单独拿出来。

vue2和vue3的区别

1. 实现数据响应式的原理不同

① vue 2.0：
通过 es5 的语法 Object.defineProperty()，数据劫持的方式实现数据的响应式。
② vue 3.0：
通过 Proxy 代理对象的方式实现数据的响应式。
因此，又多了一些定义响应式数据的方法，如 ref、reactive、roRef、toRefs。
ref：接收简单类型或者对象类型的数据传入并返回一个响应式的对象。（RefImpl）修改值，获取值的时候，需要.value。
reactive：接受对象类型数据的参数传入并返回一个代理响应式的对象。（Proxy）
toRef：转换响应式对象中某个属性为单独响应式数据，并且值是关联的。
toRefs：转换响应式对象中所有属性为单独响应式数据，并且值是关联的。

2. 生命周期不同

① vue 2.0 一共 10 个生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated：keep-alive 组件缓存技术，激活
deactivated：keep-alive 组件缓存技术，未激活
beforeDestroy
destroyed

② vue 3.0 一共 7 个生命周期
setup
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted
总结：
废弃了 activated、deactivated 生命周期函数。
setup 函数是整个组件的起点，执行时机在 beforeCreate 之前，所以没有办法拿到当前组件实例 this。
但是 setup 函数里可以接收两个形参 props 和 context。
props 为属性
context 为当前组件实例，也是就相当于vue 2.0 中的 this。
vue 3.0 中的生命周期函数使用函数调用的方式执行，所以可以多次调用执行。

3. vue 2.0 采用了 option 选项式 API，vue 3.0 采用了 composition 组合式 API

① option API

数据定义在 data 里，属性定义在 props 里，计算属性定义在 computed 里，方法定义在 methods 里。
相较于 vue 3.0 则更易于学习和使用。
② composition API

一个功能逻辑的代码组合在一起。
相较于 vue 2.0 更易于阅读和维护。
小插曲，谈一谈自己对于 vue 2.0 和 vue 3.0 的选项式 API 和组合式 API 的理解：

vue 3.0 是在 2020 年 10 月发布的。由于写 vue 2.0 的时间比较早，所以当时在转入 vue 3.0 的时候，并没有花太多时间。感受最深的一点就是，在 vue 3.0 中无法使用 this，前文已经谈过 this 的问题，在这里不再赘述。而 vue 3.0 也可以分为两个版本，vue 3.3 以下的版本，其实感觉还是 option API 的写法，因为在 setup 函数平级的节点中，依然可以定义 props 和 components 节点，只不过是把数据和方法定义在 setup 函数里，然后通过 return 出来使用。

在 vue 3.3 及 3.3 以上的版本中，引入了

4. 新特性编译宏

常用的编译宏如下：

defineProps：定义属性
defineEmits：定义自定义的事件的触发

defineExpose：向外暴露组件的属性和方法

在非语法糖的写法中，通过 setup 函数的 return 出来了属性和方法，所以无须使用defineExpose

defineOptions：向外暴露组件的一些自定义属性，如 name

defineModel：vue 3.0 中父子组件间的双向数据绑定

const modelValue = defineModel()

5. 父子组件间双向数据绑定 v-model 不同

① vue 2.0：

父组件默认传递的属性是 value，子组件默认触发的自定义事件是 input
② vue 3.0：

父组件默认传递的属性是 modelValue，子组件默认触发的自定义事件是 update:modelValue

6. v-for 和 v-if 优先级不同

vue 2.0 中 v-for 的优先级高
vue 3.0 中 v-if 的优先级高

7. 使用的 diff 算法不同

① vue 2.0

同级比较，根元素变化，整个 dom 树删除重建
根元素未变
属性改变，更新属性
子元素内容改变
无 key 就地更新
有 key 按 key 比较
② vue 3.0

将静态节点与动态节点分离
通过高效标记和打补丁的方式，更新 dom
总结：

所以 vue 3.0 的渲染性能优于 vue 2.0

8. 兄弟组件间的通信 eventBus

vue 2.0 中的 eventBus 是一个 vue 的实例对象
vue 3.0 中的eventBus 是 mitt 库

9. vue 3.0 提供了 TypeScript 支持

10. 脚手架不同

vue 2.0 的打包工具是 webpack
vue 3.0 的打包工具是 vite

11. 获取 DOM 的方法不同

vue 2.0 直接绑定 ref，使用 this.ref.属性名的方式直接获取
vue 3.0 需要先定义 const box = ref(null)，再进行绑定

12. vue-router 的使用细节

① vue 2.0

通过 this.$router和this.$route 拿到全局的路由对象和当前的路由对象
路由前置守卫
to: 即将要进入的目标 路由对象
from:当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 放行路由跳转
next(false)：拦截路由跳转
const router = new VueRouter({ … })

router.beforeEach((to, from, next) => {
// …
})
② vue 3.0

通过 const router = useRouter() 和 const route = useRoute() 拿到全局的路由对象和当前的路由对象
路由前置守卫
少了 next
return false 拦截回 from 的地址页面
return undefined / true 直接放行

const router = createRouter({ … })

router.beforeEach((to, from) => {
// …
// 返回 false 以取消导航
return false
})

13. vuex 与 pinia

① vue 2.0 vuex

state 定义数据
mutations 执行同步代码，修改 state 中的数据必须通过 mutations，在组件中通过 commit 提交 mutation 的方式
actions 执行异步操作，在组件中通过中通过 dispatch 派遣 action 的方式
getters 类似于 computed 计算属性或者过滤器
modules 模块化
② vue 3.0 pinia

将 mutations 和 actions 合二为一，不在区分同步和异步操作，去掉了 modules 模块化的概念，每一个 store 都是一个独立的模块
提供了丰富的插件配置及配置对象，如在实现数据本地持久化上，可以通过插件直接配置 persist: true就可以直接实现。
当时写 vue 2.0 的项目，记得是自己封装了一个 get、set 操作 localstorage 的方法去实现本地数据的持久化

14. vue 3.0 废除了 filters 过滤器的使用

15. template 模版中根标签的问题

vue 2.0 中必须有一个根标签元素，vue 3.0 则不用

16. 语法细节的不同

此外就是一些语法上的使用细节，不做深入比较阐述了。
如：vue 3.0 一般是通过 Createxxx 创建实例
CreateApp 创建 vue 实例，2.0代码：

// app.js
new Vue({el: '#app', // 指定 Vue 实例挂载的元素data: {message: 'Hello Vue!' // 定义数据对象}
});

CreateRouter 创建路由对象，2.0代码：

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);

CreatePinia 创建 pinia。