为什么要学Vue3? Vue3与Vue2相比有哪些变化?
1.Vue3的现状vue-next2020年9月18日,正式发布vue3.0版本,但由于刚发布周边生态不支持,大多数开发者处于观望现在主流组件库都已经发布了支持vue3.0的版本,其他生态也在不断完善中,这是趋势element-plus 基于Vue3.0的桌面端组件库vant 3.0版本,有赞前端团队开源移动端组件库ant-design-vue 2.0版本,社区根据蚂蚁antdesign开发2.V
1.Vue3的现状
- vue-next2020年9月18日,正式发布vue3.0版本,但由于刚发布周边生态不支持,大多数开发者处于观望
- 现在主流组件库都已经发布了支持vue3.0的版本,其他生态也在不断完善中,这是趋势
- element-plus 基于Vue3.0的桌面端组件库
- vant 3.0版本,有赞前端团队开源移动端组件库
- ant-design-vue 2.0版本,社区根据蚂蚁antdesign开发
2.Vue3的优点
- 最火框架,它是国内最火的前端框架之一
- 性能提升,运行速度是vue2.x的1.5倍左右
- 体积更小,按需编译体积比vue2.x要更小
- 类型推断,更好的支持Ts(typescript)这个也是趋势(js的超集)
- 高级给予,暴露了更底层的API和提供更先进的内置组件
- 选项APi-----组合API(composition-api),能够更好的组织逻辑,封装逻辑
3.Vue3展望
- 这是趋势,越来越多的企业将来肯定会升级到Vue3.0
- 大型项目,由于对Ts的友好越来越多大型项目可以用Vue3.0
4.Vue3.0的一些变化
入口文件的变化
Vue 的实例化方式发生变化:基于createApp方法进行实例化
router和store采用use方法进行配置
vue3的典型API风格:按需导入,为了提升打包的性能
根组件结构的变化
vue3中组件的模板可以没有根节点 ( vue2的模板必须有根节点)
路由模块的变化
创建路由实例对象采用createRouter方法,是Vue3的典型风格
采用hash和history的方式有变化
vue2采用mode选项:hash/history
vue3采用方法:createWebHashHistory() / createWebHistory()
Vuex模块的变化
创建store对象采用createStore方法,而不是new
生命周期函数的变化
vue2的生命周期函数
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
vue3的生命周期函数
setup
创建实例前
onBeforeMount
挂载DOM前
onMounted
挂载DOM后
onBeforeUpdate
更新组件前
onUpdated
更新组件后
onBeforeUnmount
卸载销毁前
onUnmounted
卸载销毁后去掉了两个函数: beforeCreate 和 created 添加了setup
方法名称发生变化:方法名称前面多了个on,中间是驼峰式的
同一个生命周期可以触发多次
卸载组件的生命周期变化:onBeforeUnmount onUnmounted
代码的组织形式以功能为单位
setup函数
Options API 和 Composition API
Options API 约定:
我们需要在 props 里面设置接收参数
在 data 里面设置变量
在 computed 里面设置计算属性
在 watch 里面设置监听属性
在 methods 里面设置事件方法
你会发现 Options APi 都约定了我们该在哪个位置做什么事,这反倒在一定程度上也强制我们进行了代码分割。
现在用 Composition API,不再这么约定了,于是乎,代码组织非常灵活,我们的控制代码写在 setup 里面即可
使用setup函数
setup的基本使用
setup选项是实现组合API的基础
触发的时机在beforeCreate之前
Vue3中beforCreate / created生命周期函数已经废弃了,其实被setup替代了
此时无法访问this,因为组件实例化此时尚未创建
setup的返回值用于给模板提供数据和方法
模板依然可以从data中获取数据,但是不推荐使用data了
组合API数据响应式的方法
1.reactive方法
- setup默认返回的普通数据不是响应式的
- 如果希望数据是响应式的,有一种做法就是给数据包裹reactive函数
- reactive中的对象属性如果重新赋值会失去响应能力
2.toRef方法
它可以把对象中的单个属性取出并且保证响应式能力
const meg =toRef( obj,'msg')
3.toRefs方法
它可以批量转换对象中的属性为独立的响应式数据
const { msg, info } = toRefs ( obj )
4.ref方法
1.主要用于定义基本类型的数据 ( 也可以是对象或数组 ) 并且保证响应能力
const cont = ref ( 0 ) 定义一个cont值为0,并且具有相应能力
2.ref定义的数据,在 js 中操作时需要通过value属性进行操作,但是在模板中访问不需要value
数据响应式的总结
- setup中直接返回的普通数据不是响应式的
- 通过reactive包裹对象可以成为响应式数据
- 为了简化对象的访问 ( 去掉前缀 obj. ),可以使用toRef进行优化
- 为了获取对象中的多个属性,可以使用toRefs进一步简化
- 如果时简单数据类型,其实使用ref定义更加合适
组合API计算属性computed
- 计算属性可以直接读取或者修改
- 如果要实现计算属性的修改操作,那么computed的实参应该是对象
- 读取数据触发get方法
- 修改数据触发set方法,set函数的形参就是你赋给他的值
更多推荐
所有评论(0)