Vue3的新特性及相关的Composition API使用

首先 创建项目 Vue3

Vue3 相较于Vue2 的6大亮点：

1 性能快。 2 按需编译 体积更小 3 提供了组合API 类似于react 的React Hooks 4 更好的Ts支持 5 暴露了自定义渲染的API  6 更先进的组件。

使用Vue3 创建项目  1 webpack 2 Vue-cli 3 vite

什么是vite?

安装vite :

npm install  -g create-vite-app

创建Vue3项目：

create-vite-app projectName

安装依赖运行项目：

cd projectName
npm install
npm run dev

组合API:

setup(){

}

函数是组合API的入口函数，通过导入ref实时监听变量的变化。并且通过组合API可以初始化变量的值。 最后通过return 暴露出去对象或者方法。

eg:

首先导入ref:

其次，定义setup()函数：

ref函数的注意点：ref函数只能监听简单类型的变化，不能监听复杂类型的变化 类似于（对象/数组等）

监听复杂类型的变化可以使用reactive函数来实现。

eg:

最后实现的整体的业务逻辑封装之后如下所示：

 模块化管理 封装相关的功能函数并导出 之后再App.vue中导入使用：

组合API的本质及其使用：在使用过程中将Compisition API 数据和方法 注入到options API 的数据和方法当中。

setup函数执行时机以及注意点：

setup函数的执行时间，是在beforeCreate钩子执行之前完成的。因此在setup函数中是无法使用data 和methods 的。并且为了避免错误的使用，直接将setup函数中的this修改成了undefined。

setup函数只能是同步的，不能够是异步的。

reactive函数：是Vue3中提供的实现响应式数据的方法。

reactive函数必须传入一个对象（json 或者 array类型的都可以），本质是将传入的数据包装成一个Proxy对象。

如果传递了其他的对象，默认情况下修改对象，界面不会自动更新，如果需要跟新，则需要重新赋值。

ref的深刻理解：

ref 和reactive的区别：

Vue如何判断一个数据是否是ref类型的或者是reactive类型的：

由私有属性无法访问，因此如果要判断一个类型是否是ref类型的或者是reactive类型的 可以通过导入函数isRef isReactive来实现：

递归监听：

 由于把每一层包装成一个Proxy对象，因此十分的消耗性能。

非递归监听：只能够监听第一层，不能够监听其他层。创建非递归的监听的数据 (reactive 对应 shallowReactive) , (ref 对应于 shallowRef )

 shallowRef使用的注意点：

可以通过triggerRef()方法实现ref 数据的主动的更新页面数据。

shallowRef的本质：

toRaw方法：针对于reactive响应式数据的原始数据。

eg:

toRaw的主要使用特点：保存原始数据，只更新原始数据，并不修改UI界面。

获取ref类型的原始数据的方式：通过toRaw 方法 由于包装成了reactive方法 所以需要使用.value来获取原始的数据。

通过markRaw来实现永远都不会追踪原始数据：

toRef方法：

ref()方法对某一个对象中的属性进行操作：如果将对象中的某一个属性变为响应式数据，修改响应式的数据时不会影响到原始数据的变化。

ref() 和 toRef() 方法的区别和联系：

如果需要将某一个对象中的多个属性变为响应式数据，可以采用toRefs()函数来实现。 只有一个属性变为响应式数据的时候使用toRef()

import {toRefs } from 'vue';

setup(){
  let obj = {name:"kkl",age:18};
  let state = toRefs(obj);
 // 使用toRef()实现属性变为响应式。
　// let name = toRef(obj,"name");
 //  let age  = toRef(obj,'age');

  function  myFun（）{

   state.name.value = "zs";
   state.age.value = 22;  

}
    return { state,myFun}
}

可以将对象中的属性全部变为响应式数据。