VUE3.0

setup函数
在Vue3.0中提出了Composition API的概念，Vue2.0中我们通过props、data、methods等来定义组件，在Vue3.0中我们使用setup定义响应式的数据和方法
例：

<template>
    <button v-for="(item, key) in data.languages" :key="key" @click="selectLangFun(key)">{{item}}</button>
    <p>你选择的课程是【{{selected}}】</p>
</template>

<script lang="ts">
import { reactive, ref} from "vue";
export default {
    name: "ProgramSelect",
    setup() {
        const data = reactive({
            languages: ["Java", "Javascript", "C#"]
        });
        const selected = ref("");
        const selectLangFun = (params: number): void => {
            selected.value = data.languages[params];
        }
        return {
            data,
            selected,
            selectLangFun
        }
    }
}
setup(props,context)函数其实有两个参数，props对应Vue2.0中props，里面定义的父组件传递给子组件的变量；setup函数中没有暴露this,context对应于Vue2.0中this对象
所有在template模板中使用的变量都需要通过setup函数return 出去
通过reactive和ref来创建响应式的变量，两者的区别是reactive创建的是对象变量的响应式，而ref用来创建基本类型的响应式
ref创建的变量selected修改值的时候要加上value。Vue3.0内部会将简单类型如字符串'hello',动态转为一个对象，具有value属性，值是'hello'
所有在模板中要使用的数据、方法要return 出去
toRef 和 toRefs
上面我们介绍了reactive和ref 的一些基本使用，这里介绍toRef和toRefs使用技巧。部分代码会使用TS语法。

toRef
toRef()是一个函数，返回一个ToRef对象，使用语法是const result=toRef(target,'key')

ToRef对象并不是Ref对象，我们通过ref()函数创建的对象一定是响应式的数据，数据被修改了,会直接反映在页面上。
ToRef对象不一定是响应式的数据，这个要看target的数据是否是响应式的
target如果是响应式对象(reactive或者ref创建的对象)的话，那么result也是响应式对象
toRef()函数是对target的一种映射；result的内容修改的时候,target也会被修改，反过来也是一样的,target被修改了，result内容也会被修改
toRef()的设计初衷应该是想和Ref（）函数类似，Ref()是将一个基础类型的变量进行响应式化（返回一个具有value属性对象），而toRef()则是从对象中剥离出属性来（返回一个具有value属性的对象），如果原始对象是响应式的，那么剥离出的属性也是响应式的，如果原始数据不是响应式，那么剥离出来的属性就是普通对象了，不具响应式的作用

toRefs
先思考一个问题：Proxy对象解构后是什么样子的呢

 const target = {name: 'zs'};
  const handler = {
      get: function(obj, prop){
          return prop in obj ? obj[prop]: 18
      }
  }
  const p = new Proxy(target, handler)
  const pp = {...p};
  console.log(target, pp, p);
我们定义了p是Proxy对象，但是经过...解构之后的新对象pp已经不是Proxy对象了。反映到Vue3.0中，reactive()函数会返回Proxy响应式的对象，但如果直接解构reactive()创造的变量的话，那返回的数据也将不是Proxy对象了，导致其不具有响应式的特点了。toRefs（）的出现解决了这份问题


toRefs()函数与toRef（）很相似。toRef()剥离的是对象的某个属性，toRefs（）剥离的是对象的所有属性，返回一个新对象
toRefs()函数用法是const result=toRefs(target);target的每个属性都会转换为ToRef对象。
同toRef()一样，如果原始数据target具有响应式的，那么result也是响应式；如果target是普通对象，那么result也是普通对象，不具有响应式。
由于toRef()函数返回的是一个对象，对象每个属性都是ToRef对象。我们知道...解构对象是浅拷贝，所以使用toRefs（）函数，我们可以对响应式的数据进行解构。举个例子
<template>
<p>我是 {{name}}，年龄{{age}} <button @click="change">change</button></p>
</template>
<script>
import {reactive, toRefs} from 'vue';
export default {
setup(){
    const data = reactive({
        name: "Willim",
        age: 6,
        change: ()=>{
            data.age++;
        }
    })
    return {
        ...toRefs(data)
    }
}
}
</script>


computed
我们可以使用computed对响应式的变量进行处理，返回一个ComputedRef类型的变量

  let doubleCount = computed(()=>{
      return data.count * 2;
  })
watch
Vue 3.0中的watch函数可以监听多个变量，监听某个变量变化时增加需要处理的逻辑(可以理解为这个变量变化的副作用)；或者监听多个变量的变化，用法示例如下：

//监听一个变量
watch(selected, (newVal, oldVal)=>{
    console.log("newVal", newVal);
    console.log("oldVal", oldVal);
    document.title = newVal;
});

//监听多个变量
watch([selected, ()=>data.count], (newVal, oldVal)=>{
    console.log("newVal", newVal);
    console.log("oldVal", oldVal);
    document.title = newVal[0] +","+ newVal[1];
});
watch(arg,(newVal,oldVal)=>{}) 可以只监听一个响应式的变量arg，第二个参数是回调函数，当arg改变的时候，副作用的函数逻辑。newVal表示变量修改后的值，oldVal表示变量的旧值
watch([arg1,arg2,...],(newVal,oldVal)=>{})也可以监听多个响应式的变量 arg1、arg2 等，第二个参数是回调函数，当 arg1、arg2...任意一个改变的时候，副作用的函数逻辑。newVal 表示变量修改后的值，这个时候以数组的形式显示，与变量 arg1、arg2...一一对应；oldVal 表示变量的旧值，以数组的形式显示，与变量 arg1、arg2...一一对应
selected 是 ref 函数创建的变量，我们可以直接监听。
data 是 reacitve 函数创建的变量，我们只想监听某个属性（count），需要写成函数获取的形式。