vue3 的组合Api

setup函数值组合API的入口函数

1：使用ref只能定义简单类型的变化，不能监听复杂类型的变化（对象/数组）

2：在组合API中，如果想定义方法，不用定义到methods中，直接定义即可

3：在组合API中定义的变量/方法，要想在外面使用，必须通过return暴露出去

<script>
    import {ref} from 'vue'
    export default {
        name: 'App',
        setup(){
            // 入口函数

            // 1. 使用 ref 只能定义基本类型的变化，不能监听复杂类型的变化（对象/数组）
            // 这个变量发生改变之后，Vue会自动更新UI
            let count = ref(0);

            // 2. 在组合 API 中，如果想定义方法，不用定义到 methods 中，直接定义即可
            function myFn(){
                count.value += 1;
            }

            // 3. 注意点：
            // 在组合 API 中定义的变量/方法，要想在外面使用，必须通过 return 暴露出去
            return { count, myFn }
        }
    }
</script>

4：使用reactive来监听（对象/数组）的变化

<script>
    import {reactive} from 'vue'
    export default {
        name: 'App',
        setup(){
            // 入口函数
            
            // 1. 使用 reactive 定义（对象/数组）
            let state = reactive({
                stus:[
                    {id:1, name:"zs", age:10},
                    {id:2, name:"ls", age:20},
                    {id:3, name:"ww", age:30},
                ]
            });
            
            // 2. 改变其中的一个值，其会相应变换
            function changeStus(){
                state.stus[0].age += 1
            }
            
            return {state, changeStus}
        }
    }
    /*
    1. 什么是reactive？
        - reactive 是 Vue3中提供的实现响应式数据的方法
        - 在 Vue2中响应式数据是通过defineProperty来实现的
          而在Vue3中响应式数据是通过 ES6 中的 Proxy 来实现的
        - 本质：就是将传入的数据包装成一个 Proxy 对象
    2. reactive 注意点：
        - reactive 参数必须是对象（json/arr）
        - 如果给 reactive 传递了其他对象
            + 默认情况下修改对象，界面不会自动更新
            + 如果想更新，可以通过重新赋值的方式
    */
</script>

5：可以把一个个数据和操作组合到一个函数，并方法哦setup输出

<script>
    import {reactive} from 'vue'
    export default {
        name: 'App',
        setup(){
            // 入口函数
            
            // 只需要在这里引入进来就行了
            let {state, changeStus} = change()
            
            return {state, changeStus}
        }
    }
    
    // 在外面定义一个业务逻辑单元（类似类，有数据和操作）
    function change(){
        // 1. 使用 reactive 定义（对象/数组）
        let state = reactive({
            stus:[
                {id:1, name:"zs", age:10},
                {id:2, name:"ls", age:20},
                {id:3, name:"ww", age:30},
           ]
         });
            
        // 2. 改变其中的一个值，其会相应变换
        function changeStus(){
            state.stus[0].age += 1
        }
 
        return {state, changeStus}
    }
</script>

6：把业务逻辑单元放到js中，然后导入

// changJS.js
// 在外面定义一个业务逻辑单元（类似类，有数据和操作）
    function change(){
        // 1. 使用 reactive 定义（对象/数组）
        let state = reactive({
            stus:[
                {id:1, name:"zs", age:10},
                {id:2, name:"ls", age:20},
                {id:3, name:"ww", age:30},
           ]
         });
            
        // 2. 改变其中的一个值，其会相应变换
        function changeStus(){
            state.stus[0].age += 1
        }
 
        return {state, changeStus}
    }
 
export default change

// app.vue
 
import change from './changeJS'
<script>
    import {reactive} from 'vue'
    export default {
        name: 'App',
        setup(){
            // 入口函数
            
            // 只需要在这里引入进来就行了
            let {state, changeStus} = change()
            
            return {state, changeStus}
        }
    }
    
</script>

7：Composition api 的本质（组合API/注入API）

本质：从setup中暴露的数据，会注入到option api的methods中

// app.vue
import ref from 'vue'
<script>
    import {reactive} from 'vue'
    export default {
        name: 'App',
        data(){
            return {
                // num:18 这是被注入的数据
            }
        },
        methods:{
            // changeNum(){           这是被注入的方法
            //     this.num += 1
            // }
        }
        setup(){
            // 入口函数
            // 从这里暴露的数据和方法，会注入到上面的 data 和 methods 中
            let num = ref(18)
            function changeNum(){
                num += 1    
            }
            return {num, changeNum}
        }
    }
    
</script>

8：setup执行（注入）时机，在beforeCreate和create之间

由于在执行setup函数的时候，还没有执行created生命周期方法，所以在setup函数中是无法使用data和methods的

由于不能在setup函数中使用data和methods所以vue为了避免错误使用，直接将setup函数中的this修改成了undefined

setup函数只能是同步的不能是异步的（不能在函数前面家async）