为什么要学Vue3? Vue3与Vue2相比有哪些变化?

入口文件的变化

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 

代码的组织形式以功能为单位

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了

 它可以把对象中的单个属性取出并且保证响应式能力

const meg =toRef( obj,'msg')

 它可以批量转换对象中的属性为独立的响应式数据

const { msg, info }  =  toRefs ( obj )

1.主要用于定义基本类型的数据  ( 也可以是对象或数组 )  并且保证响应能力 

        const  cont  =  ref ( 0 )       定义一个cont值为0,并且具有相应能力

2.ref定义的数据,在  js  中操作时需要通过value属性进行操作,但是在模板中访问不需要value