Vue3.0的Composition API

Composition API 的灵感来自于 React Hooks ，是比 mixin 更强大的存在。它可以提高代码逻辑的可复用性，从而实现与模板的无关性；同时函数式的编程使代码的可压缩性更强。另外，把 Reactivity 模块独立开来，意味着 Vue3.0 的响应式模块可以与其他框架相组合。

第一步首先先定义

setup函数

在Vue3中，定义 methods、watch、computed、data数据 等都放在了 setup() 函数中。
setup()函数会在created()生命周期之前执行。
参数：
setup() 函数的第一个参数是 props ，组件接收的 props 数据可以在 setup() 函数内访问到。
context 是 setup() 的第二个参数，它是一个上下文对象，可以通过 context 来访问Vue的实例 this 。

setup(props,context) {
    console.log(this)
    console.log(context)
}
    // props 获取组建中定义的props
    // context this对象

API

reactive
函数接收一个普通的对象，返回出一个响应式对象。
在2.x版本中我们一般是在data中定义变量。在 Vue3.0 中，需要用 reactive 函数或者 ref 来创建响应式数据。

ref()

ref() 函数可以根据给定的值来创建一个响应式的数据对象，返回值是一个对象，且只包含一个 .value 属性。
在 setup() 函数内，由 ref() 创建的响应式数据返回的是对象，所以需要用 .value 来访问；

而在 setup() 函数外部则不需要 .value ，直接访问即可。

可以在 reactive 对象中访问 ref() 函数创建的响应式数据。

新的 ref() 会覆盖旧的 ref() 。

<template>
  <h1>{{ msg }}</h1>
  <p>{{ counter }}</p>
  <p>{{ doubleCounter }}</p>
  <p>{{message}}</p>
  <p ref="desc"></p>
</template>

<script>
import { reactive, computed, onMounted, onUnmounted, ref, toRefs, watch } from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    const {counter,doubleCounter} = user();
    const message = ref("some message");
    const desc=ref(null)
    watch(counter,(val,oldval)=>{
      const p=desc.value
      p.textContent=`from ${oldval} to ${val}`
    })
    return {counter,doubleCounter,message,desc}
  },
};
function user() {
  const obj = reactive({
    counter: 1,
    doubleCounter: computed(() => obj.counter * 2),
  });
  let timer;
  onMounted(() => {
    timer=setInterval(() => {
        obj.counter++
    }, 1000);
  });
  onUnmounted(() => {
    clearInterval()
  });
  return toRefs(obj) ;
}
</script>

API的依赖方法集

isRef()
isRef() 顾名思义，是用来判断某个值是否为 ref() 创建出来的响应式的值。

import { isRef } from '@vue/composition-api'

const unwrapper = isRef(foo) ? foo.value : foo

toRefs()
toRefs() 可以将 reactive() 创建出来的响应式对象转换成内容为 ref 响应式的值的普通对象