Vue3和Vue2有什么区别
这篇“Vue3和Vue2有什么区别”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue3和Vue2有什么区别”文章吧。
我们提供的服务有:网站设计、成都网站建设、微信公众号开发、网站优化、网站认证、涟源ssl等。为上千余家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的涟源网站制作公司
选项式Api与组合式Api
首先实现一个同样的逻辑(点击切换页面数据)看一下它们直接的区别
选项式Api
{{msg}}
组合式Api
{{msg}}
setup 语法糖
{{ msg }}
总结:
选项式Api是将data和methods包括后面的watch,computed等分开管理,而组合式Api则是将相关逻辑放到了一起(类似于原生js开发)。
setup语法糖则可以让变量方法不用再写return,后面的组件甚至是自定义指令也可以在我们的template中自动获得。
ref 和 reactive
我们都知道在组合式api中,data函数中的数据都具有响应式,页面会随着data中的数据变化而变化,而组合式api中不存在data函数该如何呢?所以为了解决这个问题Vue3引入了ref和reactive函数来将使得变量成为响应式的数据
组合式Api
setup语法糖
总结:
使用ref的时候在js中取值的时候需要加上.value。
reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型
生命周期
下表包含:Vue2和Vue3生命周期的差异
Vue2(选项式API) | Vue3(setup) | 描述 |
---|---|---|
beforeCreate | - | 实例创建前 |
created | - | 实例创建后 |
beforeMount | onBeforeMount | DOM挂载前调用 |
mounted | onMounted | DOM挂载完成调用 |
beforeUpdate | onBeforeUpdate | 数据更新之前被调用 |
updated | onUpdated | 数据更新之后被调用 |
beforeDestroy | onBeforeUnmount | 组件销毁前调用 |
destroyed | onUnmounted | 组件销毁完成调用 |
举个常用的onBeforeMount的例子
选项式Api
组合式Api
setup语法糖
从上面可以看出Vue3中的组合式API采用hook函数引入生命周期;其实不止生命周期采用hook函数引入,像watch、computed、路由守卫等都是采用hook函数实现
总结
Vue3中的生命周期相对于Vue2做了一些调整,命名上发生了一些变化并且移除了beforeCreate和created,因为setup是围绕beforeCreate和created生命周期钩子运行的,所以不再需要它们。
生命周期采用hook函数引入
watch和computed
选项式API
{{ addSum }}
组合式Api
{{addSum}}
setup语法糖
{{ addSum }}
Vue3中除了watch,还引入了副作用监听函数watchEffect,用过之后我发现它和React中的useEffect很像,只不过watchEffect不需要传入依赖项。
那么什么是watchEffect呢?
watchEffect它会立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。
比如这段代码
{{ watchTarget }}
首先刚进入页面就会执行watchEffect中的函数打印出:0,随着定时器的运行,watchEffect监听到依赖数据的变化回调函数每隔一秒就会执行一次
总结
computed和watch所依赖的数据必须是响应式的。Vue3引入了watchEffect,watchEffect 相当于将 watch 的依赖源和回调函数合并,当任何你有用到的响应式依赖更新时,该回调函数便会重新执行。不同于 watch的是watchEffect的回调函数会被立即执行,即({ immediate: true })
组件通信
Vue中组件通信方式有很多,其中选项式API和组合式API实现起来会有很多差异;这里将介绍如下组件通信方式:
方式 | Vue2 | Vue3 |
---|---|---|
父传子 | props | props |
子传父 | $emit | emits |
父传子 | $attrs | attrs |
子传父 | $listeners | 无(合并到 attrs方式) |
父传子 | provide | provide |
子传父 | inject | inject |
子组件访问父组件 | $parent | 无 |
父组件访问子组件 | $children | 无 |
父组件访问子组件 | $ref | expose&ref |
兄弟传值 | EventBus | mitt |
props
props是组件通信中最常用的通信方式之一。父组件通过v-bind传入,子组件通过props接收,下面是它的三种实现方式
选项式API
//父组件//子组件 {{msg}}
组合式Api
//父组件//子组件 {{ parentMsg }}
setup语法糖
//父组件//子组件 {{ parentMsg }}
注意
props中数据流是单项的,即子组件不可改变父组件传来的值
在组合式API中,如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。
emit
子组件可以通过emit发布一个事件并传递一些参数,父组件通过v-onj进行这个事件的监听
选项式API
//父组件// 子组件
组合式Api
//父组件//子组件
setup语法糖
//父组件//子组件
attrs和listeners
子组件使用$attrs可以获得父组件除了props传递的属性和特性绑定属性 (class和 style)之外的所有属性。
子组件使用$listeners可以获得父组件(不含.native修饰器的)所有v-on事件监听器,在Vue3中已经不再使用;但是Vue3中的attrs不仅可以获得父组件传来的属性也可以获得父组件v-on事件监听器
选项式API
//父组件//子组件
组合式API
//父组件//子组件
setup语法糖
//父组件//子组件
注意
Vue3中使用attrs调用父组件方法时,方法前需要加上on;如parentFun->onParentFun
provide/inject
provide:是一个对象,或者是一个返回对象的函数。里面包含要给子孙后代属性
inject:一个字符串数组,或者是一个对象。获取父组件或更高层次的组件provide的值,既在任何后代组件都可以通过inject获得
选项式API
//父组件 //子组件
组合式API
//父组件 //子组件
setup语法糖
//父组件 //子组件
说明
provide/inject一般在深层组件嵌套中使用合适。一般在组件开发中用的居多。
parent/children
$parent: 子组件获取父组件Vue实例,可以获取父组件的属性方法等
$children: 父组件获取子组件Vue实例,是一个数组,是直接儿子的集合,但并不保证子组件的顺序
Vue2
import Child from './Child' export default { components: { Child }, created(){ console.log(this.$children) //[Child实例] console.log(this.$parent)//父组件实例 } }
注意父组件获取到的$children
并不是响应式的
expose&ref
$refs可以直接获取元素属性,同时也可以直接获取子组件实例
选项式API
//父组件//子组件
组合式API
//父组件//子组件
setup语法糖
//父组件//子组件
注意
通过ref获取子组件实例必须在页面挂载完成后才能获取。
在使用setup语法糖时候,子组件必须元素或方法暴露出去父组件才能获取到
EventBus/mitt
兄弟组件通信可以通过一个事件中心EventBus实现,既新建一个Vue实例来进行事件的监听,触发和销毁。
在Vue3中没有了EventBus兄弟组件通信,但是现在有了一个替代的方案mitt.js
,原理还是 EventBus
选项式API
//组件1//组件2组件2//bus.js import Vue from "vue" export default new Vue()
组合式API
首先安装mitt
npm i mitt -S
然后像Vue2中bus.js
一样新建mitt.js
文件
mitt.js
import mitt from 'mitt' const Mitt = mitt() export default Mitt
//组件1 //组件2组件2
setup语法糖
//组件1 //组件2组件2
v-model和sync
v-model大家都很熟悉,就是双向绑定的语法糖。这里不讨论它在input标签的使用;只是看一下它和sync在组件中的使用
我们都知道Vue中的props是单向向下绑定的;每次父组件更新时,子组件中的所有props都会刷新为最新的值;但是如果在子组件中修改 props ,Vue会向你发出一个警告(无法在子组件修改父组件传递的值);可能是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得混乱难以理解。
但是可以在父组件使用子组件的标签上声明一个监听事件,子组件想要修改props的值时使用$emit触发事件并传入新的值,让父组件进行修改。
为了方便vue就使用了v-model
和sync
语法糖。
选项式API
//父组件//子组件{{msg}}
setup语法糖
因为使用的都是前面提过的知识,所以这里就不展示组合式API的写法了
//父组件//子组件{{msg}}
总结
vue3中移除了sync的写法,取而代之的式v-model:event的形式
其v-model:changePval="msg"
或者:changePval.sync="msg"
的完整写法为:msg="msg" @update:changePval="msg=$event"
。
所以子组件需要发送update:changePval
事件进行修改父组件的值
路由
vue3和vue2路由常用功能只是写法上有些区别
选项式API
组合式API
setup语法糖
我之所以用beforeRouteEnter
作为路由守卫的示例是因为它在setup
语法糖中是无法使用的;大家都知道setup
中组件实例已经创建,是能够获取到组件实例的。而beforeRouteEnter
是再进入路由前触发的,此时组件还未创建,所以是无法setup
中的;如果想在setup语法糖中使用则需要再写一个setup
语法糖的script
如下:
以上就是关于“Vue3和Vue2有什么区别”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。
名称栏目:Vue3和Vue2有什么区别
网址分享:http://myzitong.com/article/jejoee.html