关于vue3.0 新的API setup、teleport 、 ref、reactive、toRef、toRefs的认识

teleport ：

功能：将子节点渲染到存在于父组件以外的 DOM 节点
实例：

<!-- to 属性就是目标位置 -->

//1. 相对于body定位
<teleport to="body">
    <modal :show="showModal" @close="showModal = false">
      modal组件
    </modal>
</teleport>


//2.  相对于自己指定的位置
<div id="my-head-wrap"></div>

<teleport to="#my-head-wrap">  </teleport>

---

setup：

功能：
1、 setup函数是 Composition API（组合API）的入口，setup函数里没有了this上下文，没有了 Options API 的强制代码分离，Composition API 可以更令灵活的切割成各种模块导出；
2、 setup函数只能是同步的，在setup函数中定义的变量和方法最后都是需要 return 才能使用；

import useA from'./a';
import useB from'./b';
import useC fro m'./c';
 
export default{
    setup (props) {
        let{ a, methodsA } = useA();
        let{ b, methodsB } = useB();
        let{ c, methodsC } = useC();
        return { a, methodsA, b, methodsB, c, methodsC }
    }
}

---

 ref 和 reactive：

reactive： 为对象添加响应式状态，接收一个js对象作为参数， 获取数据值的时候直接获取，不需要加.value；
ref：为基本数据类型要添加响应式状态，获取数据值的时候需要加.value；
 

import { ref, reactive, toRefs, computed } from 'vue'

setup(){
    const name = ref('zhangsan');
    const birth = ref(1989);
    const now = ref(2021);

    const sayName = () =>{
      name.value = 'I am ' + name.value
    }

    const data = reactive({
       name: "lisi",
       birth: 1990,
       now: 2021
    });

    
    const refData = toRefs(data)

    return {
      name,
      sayName,
      ...refData 
    }
}

---

 toRef 和 toRefs：

toRef：用于为源响应式对象的属性新建一个ref，保持对其源对象属性的响应式连接，接收两个参数：源响应式对象和属性名，返回一个ref数据。例如使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。

• 获取数据值的时候需要加.value；
• toRef后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据；

toRefs： 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref；常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题。

• 获取数据值的时候需要加.value
• toRefs后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据
• 作用其实和 toRef 类似，只不过 toRef 是一个个手动赋值，而 toRefs 是自动赋值。

import { ref, reactive, toRefs, computed } from 'vue'

setup(){
    const name = ref('zhangsan');
    const birth = ref(1989);
    const now = ref(2021);

    const sayName = () =>{
      name.value = 'I am ' + name.value
    }

    const data = reactive({
       name: "lisi",
       birth: 1990,
       now: 2021,
       sayName: () => {
          console.log(data.name);
        
          data.name = "I am " + data.name;
          console.log(data.name);
       },
       age: computed(() => {
          return data.now - data.birth;
       }),
    });

    
    const { birth } = toRefs(data)
    console.log(birth.value)

    const refData = toRefs(data)
    return {
      name,
      sayName,
      ...refData 
    }
}