认识vue3以及语法运用简介

Vue3支持2的大多数特性 性能提升: 打包大小减少41%, 初次渲染快55%,更新快133%, 内存使用减少54% 推出一系列组合型API ref与reactive watch与computed 新的声明周期函数。

一、组合API------reactive、ref 与 toRefs

 在Vue2.x中，定义数据都是在data中，但是Vue3.x可以使用reactive和ref 来进行数据定义。 1、reactive与ref reactive 和 ref 都是用来定义响应式数据的 reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型 使用ref定义基本数据类型，ref也可以定义数组和对象。2、toRefs    toRefs 用于将一个 reactive对象转化为属性全部为 ref对象的普通对象

 

 

二、组合API------computed

1、基础用法 （只读） --- computed是个函数 应用场景： 基于已有的数据，计算另一种数据。

 2、高级用法 （可读可写）----computed是个对象 ，里面内容是函数。读取数据触发get方法，修改数据 触发set方法，set函数的形参就是你赋给他的值

 

三、组合API------watch

vue3.x中的watch支持单个，多个数据源的监听，支持停止监听器 语法： watch(source, callback, [options]) 参数说明： source: 可以支持string,Object,Function,Array; 用于指定要侦听的响应式变量 callback: 执行的回调函数 options：支持deep、immediate和flush 选项。

1、单个数据源ref数据侦听

 

 

 2、单个数据源reative数据侦听

 

 

3、监听多个数据源以及停止监听器

 

四、teleport(传送)

当我们即希望继续在组件内部使用Dialog, 又希望渲染的 DOM 结构不嵌套在组件的 DOM 中，就可以使用 teleport

1、希望 Dialog 渲染的 dom 和 顶层组件是兄弟节点关系，定义 一个可以供挂载的元素

2、定义一个Dialog组件Dialog.vue, 留意 to 属性，与左边的id选择器一致：

 3、检查元素可以看出，弹窗的Dom 与顶级的Dom是同级的。

 

 五、组件通讯

 

 1、使用props选项和emit选项完成父子组件通讯

 

 

2、依赖注入provide函数和inject函数：provide函数和inject函数 provide函数提供数据和函数给后代组件使用 inject函数给当前组件注入provide提供的数据和函数

 

 

六、应用案例

​​​​​​​