VUE3.0 Composition API（组合API）和3.0中vuex的使用

vue3.0中新增了非常多的组合API，组合式API受到了 React Hooks 很大的启发。

由于在setup中没有this，所以数据想要响应到template中必须使用相关api的帮助，组合API都要在setup函数中去使用。api的使用流程如下：

1、引入

import {ref} from "vue"; //引入ref  API 这不是2.X中的ref
复制代码

2、编写

   setup() {
    // 组合API，里面可写变量方法函数，最后要return
    let count = ref(100);
    return {count}
   },
复制代码

3、使用

<div >{{count}}</div> //100
复制代码

常用组合API介绍

reactive：reactive是vue3提供的实现数据响应式的方法，实现在setup中实现复杂数据类型的双向数据绑定。监听复杂类型的变化。如果是其他类型，界面不会自动跟新，除非重新赋值，

let count2 = reactive([1,2,3])
复制代码

ref：ref也是vue3提供的实现数据响应式的方法，但是针对基本数据类型。其本质原理是reactive，将传过来的简单数据包装成一个对象，ref（xx）-> reactive({value:xx})，将值赋值在对象的value属性上，所以在js中使用ref中的值要加上.value，例如上述例子中的count2.value可以拿到值，但在template中可以直接{{count}}，不需要.value，因为3.0帮我们做了处理。

ref和reactive区别：

在模板中的ref数据默认添加.value，而reactive不会

原理在解析中会去查找是否是ref类型，通过当前数据的–v-ref的值来判断 true/false

isReactive：判断数据是否是reactive类型

let count2 = reactive([1,2,3])
console.log(isReactive(count2)) //true
复制代码

isRef：判断数据是否是ref类型，与isReactive同理

递归监听和非递归监听

ref和reactive都是递归监听，递归监听是将数据内每一层的数据都进行监听，所以非常消耗性能，每次跟踪都会更新UI界面。

**shallowReactive：**相比于reactive，shallowReactive是非递归监听，只监听数据第一层就是proxy包装的第一层的数据，第一层数据不变后面改变没用，但如果第一层改变整体都会重新渲染。

**shallowRef：**相比于ref，shallowRef监听的是第一层.value的变化。

**triggerRef：**监听某一层的改变做出更新

 state.value.a = "4"; triggerRef(state);  //这里只有state.value.a做出更新
复制代码

**toRaw：**使传过来的数据不进行数据响应，原理是获取reactive原始数据包装成proxy，toRaw如果要获取ref的原始数据要加.value

let b= toRaw(a) b===a //true 这里改变数据不会引起UI更新
复制代码

**markRaw：**数据永远不要被追踪 

a = markRaw(a);
复制代码

**toRef：**相当于ref的浅拷贝可以影响数据，ref是深拷贝

**toRefs：**是toRef的复数形式，toRef只能改变单个值，原理相当于执行多个toRef

**customRef：**自定义ref，可以用来处理异步

function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    //这里处理接口请求
    return {
      get() {
        // get里面不能处理请求，不然会造成死循环
        track() //告诉VUE这个数据是要追踪的
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger() //告诉VUE触发UI界面更新
        }, delay)
      }
    }
  })
}
复制代码

**onMounted：**在setup中使用生命周期函数，里面是回调函数，其他的生命周期函数也是一样

onMounted(() => {
      console.log(box.value);
      console.log(box,"box");
    })
复制代码

**readonly：**创建只读数据，递归只读

const和readonly区别
const：赋值保护，不能给变量赋值
readonly：属性保护，不能重新赋值
复制代码

**isReadonly：**检测是否只读

**shallowReadonly：**也是创建只读数据，但不是递归只读

**computed:**在setup中的计算属性。

   let count = computed(() => {
       // 计算属性
       return store.state.xx
     })
复制代码

在setup中使用Vuex

①下载安装Vuex ：略

②引入

在setup需要使用vuex的地方引入VUEX中的userStore

import { userStore } from "vuex";
复制代码

③在setup中使用

setup(){
   //使用
    const store = userStore();
    let a =  store.state.xx
  //commit、getters 、dispatch等的使用类似}
return {a}
复制代码

在template中和其他地方使用vuex与2.x一致。