为什么要学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.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方法

1. setup默认返回的普通数据不是响应式的
2. 如果希望数据是响应式的,有一种做法就是给数据包裹reactive函数
3. 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

数据响应式的总结

1. setup中直接返回的普通数据不是响应式的
2. 通过reactive包裹对象可以成为响应式数据
3. 为了简化对象的访问 ( 去掉前缀 obj. ),可以使用toRef进行优化
4. 为了获取对象中的多个属性,可以使用toRefs进一步简化
5. 如果时简单数据类型,其实使用ref定义更加合适

组合API计算属性computed

1. 计算属性可以直接读取或者修改
2. 如果要实现计算属性的修改操作,那么computed的实参应该是对象
   1. 读取数据触发get方法
   2. 修改数据触发set方法,set函数的形参就是你赋给他的值