一文看懂vue2与vue3的区别

vue2和vue3的区别

前言

vue2和vu3的区别,一直以来是面试必考题目,如何回答,回答的层次决定了面试者的对于vue2,3的理解,以及对于vue3目前稳定版本发展的方向的了解,即考察使用程度,又考察了学习能力,可以说是回答即可以很简单,也可以很不简单,这里需要注意的是面试官的面试程度,需要我们层层递进,由浅入深来回答,这样可以体现出面试者的考虑全面,又能体现知识广度。简而言之,vue2升级vue3之后变得更快,更轻,协作更方便。无论对于我们开发者的体验或者用户使用方面都是升级优化,但是本质区别是什么,下面分为几个部分进行讲解。

vue2和vue3

对比 vue2 vue3
脚手架 命令式 可视化创建脚⼿架
组件通信 见下文 见下文
数据监听 watch,computed watch,watchEffect,computed
双向绑定 Object.defineProperty ProxyAPI
⽣命周期 见下文 见下文
api 选项式 组合式

一、双向绑定更新

vue2 的双向数据绑定是利⽤ES5 的⼀个 API ,Object.defineProperty()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。

vue3 中使⽤了 ES6 的 ProxyAPI 对数据代理,通过 reactive() 函数给每⼀个对象都包⼀层 Proxy,通过 Proxy 监听属性的变化,从⽽ 实现对数据的监控。

这⾥是相⽐于vue2版本,使⽤proxy的优势如下
1.defineProperty只能监听某个属性,不能对全对象监听 可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
2.可以监听数组,不⽤再去单独的对数组做特异步操作,通过Proxy可以直接拦截所有对象类型数据的操作,完美⽀持对数组的监听。

二、实例化

Vue2.x中new出的实例对象,所有的东西都在这个vue对象上,这样其实⽆论你⽤到还是没⽤到,都会跑⼀遍,这样不仅提⾼了性能消耗,也⽆疑增加了⽤户加载时间。

⽽vue3.0中可以⽤ES module imports按需引⼊,如:keep-alive内置组件、v-model指令,等等,不仅我们开发起来更加的便捷,减少 了内存消耗,也同时减少了⽤户加载时间,优化⽤户体验。

三、生命周期

vue2 vue3 描述
beforeCreate setup 实例创建前
created setup 实例创建后
beforeMount onBeforeMount DOM挂载前调用
mounted onMounted DOM挂载完成调用
beforeUpdate onBeforeUpdate 数据更新前调用
updated onUpdated 数据更新后调用
beforeDestory onBeforeUnmount 组件销毁前调用
destoryed onUnmounted 组件销毁完调用

四、获取props

vue2在script代码块可以直接获取props,vue3通过setup指令传递

vue2:console.log(‘props’,this.xxx)
vue3:setup(props,context){ console.log(‘props’,props) }

五、数据和方法的定义

Vue2使⽤的是选项类型API(Options API),Vue3使⽤的是合成型API(Composition API)

Vue2:

data() { return {}; }, methods:{ }

Vue3:

数据和⽅法都定义在setup中,并统⼀进⾏return{}

六、给父组件传值emit

vue2:this.$emit()
vue3:setup(props,context){context.emit()}

七、watchEffect

Vue3中除了watch,还引入了副作用监听函数watchEffect,用过之后我发现它和React中的useEffect很像,只不过watchEffect不需要传入依赖项。

那么什么是watchEffect呢?

watchEffect它会立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。

computed和watch所依赖的数据必须是响应式的。Vue3引入了watchEffect,watchEffect 相当于将 watch 的依赖源和回调函数合并,当任何你有用到的响应式依赖更新时,该回调函数便会重新执行。不同于 watch的是watchEffect的回调函数会被立即执行,即({ immediate: true })。

八、组件通信

方式 Vue2 Vue3
父传子 props props
子传父 $emit emits
父传子 $attrs attrs
子传父 $listeners 无(合并到attrs方式)
父传子 provide provide
子传父 inject inject
子组件访问父组件 $parent
父组件访问子组件 $children
父组件访问子组件 $ref expose&ref
兄弟传值 EventBus mitt
注意
props中数据流是单项的,即子组件不可改变父组件传来的值
在组合式API中,如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。

attrs和listeners
子组件使用$attrs可以获得父组件除了props传递的属性和特性绑定属性 (class和 style)之外的所有属性。
子组件使用$listeners可以获得父组件(不含.native修饰器的)所有v-on事件监听器,在Vue3中已经不再使用;但是Vue3中的attrs不仅可以获得父组件传来的属性也可以获得父组件v-on事件监听器

九、路由

vue3和vue2路由常用功能只是写法上有些区别:

vue3的beforeRouteEnter作为路由守卫的示例是因为它在setup语法糖中是无法使用的;大家都知道setup中组件实例已经创建,是能够获取到组件实例的。而beforeRouteEnter是再进入路由前触发的,此时组件还未创建,所以是无法用在setup中的;如果想在setup语法糖中使用则需要再写一个script 如下:


vue3路由写法:


vue2写法:


十、总结

vue2和vue3比较还是有很多不一样的地方,比如setup语法糖的形式最为便捷而且更符合开发者习惯,未来vue3将会大面积使用这种规则,这样更加符合开发习惯和降低后续维护的成本,还有目前Vue3已经成为了Vue的默认版本,后续维护应该也会以Vue3为主。希望各位同学赶紧学起来吧!!!

你可能感兴趣的:(前端面试题,vue.js,前端,javascript)