vue3.0之组合API（Composition API）

vue3.0组合API

Setup

知识点：

1、setup执行时机
beforeCreate：组件刚创建，data和methods还未初始化完成
setup
created：组件刚创建，data和methods已经初始化完成
2、setup注意事项：
由于在执行setup函数时，还未执行created生命周期方法，所 以setup函数中，是无法使用data和methods，为了避免错误的使用，vue实例将setup函数中的this修改成了undefined。另外setup函数只能是同步的不能是异步的。

ref

1、什么是ref
ref是来实现响应式数据的方法，由于reactive必须传递一个对象，所以导致在实际开发中若想让某个变量实现响应式会比较麻烦，所以vue3提供了ref方法来实现变量的简单监听；
2、本质：
ref底层的本质还是reactive，系统会自动根据我们给ref传入的只将它转换成ref(x)==>reactive({value:x})
3、ref注意点：
在vue中使用ref的值不用通过value来获取，而在JS中使用ref的值必须通过value获取
下面是ref的使用 代码片。

注意：ref只能监听简单类型的变化，
不能监听复杂类型的变化（数组/对象）  
复杂类型使用reactive监听，示例：
 import {reactive} from 'vue';
 let s = reactive({a:[]})

//App1.vue 
<template>
    <div>
        <p>{{count}}</p>
        <input @click="myFn" type="button" value="加">
    </div>
</template>

<script> 
import {ref} from 'vue';

export default {
    setup(){
        //定义初始值为0的变量，要使用ref方法赋值，直接赋值的话变量改变不会更新UI
        let count = ref(0);
        //在组合API中，若想定义方法，不用定义到methods中，直接在API内定义即可
        //触发myFn事件改编count直接更新UI层
        function myFn(){
            console.log(count);
            count.value+=1;
        }
        /**
         * 注意点：
         * 组合API中定义的变量或方法若想在外部使用，必须return出去
        */
        return {count,myFn}
    }
}

reactive

知识点

1、什么是reactive：
reactive是vue3中提供的实现响应式数据的方法
在vue2中响应式数据是通过defineProperty来实现的
而在vue3中响应式数据是通过ES6的Proxy来实现的
2、reactive注意点：
reactive参数必须是对象（json/arry）
如果给reactive传递了其他对象
默认情况下修改对象，界面不会自动更新
若想更新，可通过重新赋值的方式
一个简单的todolist示例：

//App2.vue
<template>
  <div>
    <form>
      <input type="text" v-model="stObj.st.id" />
      <input type="text" v-model="stObj.st.name" />
      <input type="text" v-model="stObj.st.age" />
      <input type="button" value="添加" @click="add" />
    </form>
    <ul>
      <li v-for="(item, index) in state.arr" :key="item.id" @click="del(index)">
        {{ item.id }}----{{ item.name }}----{{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
//为使代码更清晰，可以将组合API中的方法统一放置单独的文件中引入使用 
import { useRemoveStudent,useAddStudent } from './utils/index';

export default {
  setup() {
    let { state, del } = useRemoveStudent();
    let { stObj, add } = useAddStudent(state);
    return { state, del, stObj, add };
  },
};     
</script>

//index.js
import { reactive } from "vue";

export function useRemoveStudent() {
    let state = reactive({
        arr: [{
                id: 1,
                name: "zs",
                age: 12
            },
            {
                id: 2,
                name: "ls",
                age: 13
            },
            {
                id: 3,
                name: "ww",
                age: 14
            },
        ],
    });

    function del(i) {
        state.arr = state.arr.filter((item, index) => i != index);
    }

    return {
        state,
        del
    };
}

export function useAddStudent(state) {
    let stObj = reactive({
        st: {
            id: "",
            name: "",
            age: "",
        },
    });

    function add(e) {
        e.preventDefault();
        const st = Object.assign({}, stObj.st);
        state.arr.push(st);
        stObj.st.id = "";
        stObj.st.name = "";
        stObj.st.age = "";
    }

    return {
        stObj,
        add
    };
}

小结：

1、Composition API（组合API）可以和 Option API（methods等）混合使用；
2、Composition API本质（组合API/注入API）将Composition API中的数据注入到Option API当中