vue3新特性中的setup(),ref(),reactive()函数

setup() 函数的用法，可以代替 Vue2 中的 data 和 methods 属性，直接把逻辑写在 setup 里就可以

从定义的角度：

ref() 用来定义：基本类型的变量

reactive()函数用来定义：更新复杂类型的变化(数组/对象)

从原理角度来说：

     1.ref通过Object.defineProperty()的get和set来实现响应式（数据劫持）

      2.reactive是通过Proxy来实现响应式(数据劫持），并通过Reflect操作源对象内部的数据

从使用角度：

     1.ref定义的数据：操作数据需要.value,读取数据时候模版中直接读取不需要.value

      2.reactive定义数据：操作和读取均不需要.value

注： return出去的数据和方法，在模板中才可以使用，这样可以精准的控制暴漏的变量和方法

案例 删除某个数据如图:

template

  <ul v-for="(item,index) in studentList.list" :key="item.name">
      <li @click="deleteStudent(index)">姓名是:{{ item.name }}--成绩是:{{ item.gard }}</li>
    </ul>

js( 第一种写法:)

<script lang="ts">
//复杂类型的变化(数组/对象)
import { reactive } from "vue";
export default {
  setup() {
    const studentList = reactive({
      list: [
        {
          name: "张三",
          gard: 90,
        },
        {
          name: "李四",
          gard: 80,
        },
        {
          name: "王五",
          gard: 50,
        },
      ],
    });
     const deleteStudent = (index: number) =>{
        console.log(index);
        studentList.list.splice(index,1);
      }
    return {
      studentList,
      deleteStudent
    };
  },
};
</script>

第二种写法（定义个函数，将每个对应的逻辑单独出来）

//复杂类型的变化(数组/对象)
import { reactive } from "vue";
//学生函数
function  studentsFun(){
  const studentList = reactive({
      list: [
        {
          name: "张三",
          gard: 90,
        },
        {
          name: "李四",
          gard: 80,
        },
        {
          name: "王五",
          gard: 50,
        },
      ],
    });
     const deleteStudent = (index: number) =>{
        console.log(index);
        studentList.list.splice(index,1);
      }

    return {studentList,deleteStudent};
}
export default {
  setup() {
    const  {studentList,deleteStudent}  = studentsFun();
    return {
      studentList,
      deleteStudent
    };
  },
};