前言

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

vue2 vs 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指令，等等，不仅我们开发起来更加的便捷，减少了内存消耗，也同时减少了⽤户加载时间，优化⽤户体验。

生命周期

引用掘金图片如下：

获取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 }）。

组件通信

注意

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 如下：

<script>
export default {beforeRouteEnter(to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用next()},
};
</script>

vue3路由写法：

<script>
import { defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用next()},beforeRouteLeave ((to, from, next)=>{//离开当前的组件，触发next()       }),beforeRouteLeave((to, from, next)=>{//离开当前的组件，触发next()      }),setup() {const router = useRouter()const route = useRoute()const toPage = () => {router.push(xxx)}//获取params 注意是routeroute.params//获取queryroute.queryreturn {toPage}},
});
</script>

vue2写法：

<script>
export default {beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用next()},beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用next()},beforeRouteLeave ((to, from, next)=>{//离开当前的组件，触发next()       }),beforeRouteLeave((to, from, next)=>{//离开当前的组件，触发next()      }),methods:{toPage(){//路由跳转this.$router.push(xxx)}},created(){//获取paramsthis.$route.params//获取querythis.$route.query}
}
</script>

总结

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

vue2和vue3的区别（由浅入深）相关推荐

vue2和vue3的区别
文章目录前言一.vue2和vue3双向数据绑定原理的区别? 二.根节点的不同三.Composition API (组合api) 四.生命周期的变化五. vue2和vue3的diff算法六. ...
vue2与vue3的区别
1. vue2和vue3双向数据绑定原理发生了改变 vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的. ...
浅谈vue2与vue3的区别
一.vue2和vue3双向数据绑定原理 vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的 vue3发生 ...
【经典面试题】vue2与vue3的区别
目录一. vue2和vue3双向数据绑定原理发生了改变二. Vue3支持碎片(Fragments) 三. Composition API 四. 建立数据 data 五. 生命周期钩子 - Life ...
vue2、vue3中自定义v-model的使用和区别
在我们的日常开发中,时常需要写一些自定义组件,而其中可能就会使用到v-model,v-model是Vue中的一个指令,用来实现数据的双向绑定,实现数据.视图更新,v-model是一个语法糖,,我们可以 ...
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录一.VueJS是什么? 二.Vue的优缺点三.MVVM 数据双向绑定四.Vue的安装和使用五.Vue模板语法-文本渲染六.常用的vue的指令一.VueJS是什么? 它是一个轻量级MVV ...
vue2与vue3的diff算法区别
Vue2和Vue3的diff算法有一些区别: Vue2使用双向指针来进行虚拟DOM的比较,而Vue3则使用了单向链表的方式. 在计算key值不同时,Vue2会采用首尾两端比较的方法,而Vue3则采用了 ...
Vue2.和Vue3.生命周期的区别，对比。详解生命周期中的每个钩子函数，setup,
文章目录 #1.Vue2.的生命周期与Vue3.的生命周期对比图 #1.1白色背景图是Vue2.的生命周期,黑色背景图是Vue3.的生命周期. #2.Vue2.与Vue3.的生命周期函数的不同 #2. ...
vue2和vue3区别
1. vue2和vue3双向数据绑定原理发生了改变 vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持结合发布订阅模式来实现的.vue3 ...

vue2和vue3的区别（由浅入深）

前言