03 vue3 setup ref

setup的使用

ref

ref的使用

<template>
    <h1>{{count}}</h1>
    <button @click="myFn()">按钮</button>
</template>

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

    export default {
        name: "App",
        // setup函数是组合API的入口函数
        setup() {
            // 定义了一个名称叫做account变量，这个变量的初始值是0
            // 这个变量发生变化之后，Vue会自动更新UI
            let count = ref(0);

            // 在组合API中，如果想定义方法，不用定义到methods中，直接定义即可
            function myFn() {
                // alert(123);
                count.value += 1;
            }
            // 注意点：
            // 再组合API中定义的变量/方法，要想在外界使用，必须通过 return {xxx, xxx} 暴漏出去
            return {count, myFn}
        }
    }

</script>

ref注意点

1.什么是ref？

• ref和reactive一样，也是用来实现响应式数据的方法
• 由于reactive必须传递一个对象，所以导致在企业开发中如果我们只想让某个变量实现响应式的时候会非常麻烦所以Vue3就给我们提供了ref方法，实现对简单指的监听

2.ref本质：

• ref底层的本质其实还是reactive，系统会自动根据给ref传入的值将它转换成
• ref(xx) -> reactive({value: xx})

3.ref注意点：

• 在Vue中使用ref的值不用通过value获取
• 在JS中使用ref的值必须通过value获取

reactive

reactive的使用

<template>
    <ul>
        <li v-for="(stu, index) in state.stus" :key="index">
            {{stu.name}} -> {{stu.age}}
        </li>
    </ul>
</template>

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

    export default {
        name: "App",
        // setup函数是组合API的入口函数
        setup() {
            // ref 函数注意点：
            // ref函数只能监听简单类型的变化，不能监听复杂类型的变化（对象/数组）
            let state = reactive({
                stus: [
                    {id: 1, name: 'zs', age: 10},
                    {id: 2, name: 'ls', age: 20},
                    {id: 3, name: 'ww', age: 30},
                ]
            });

            return {state}
        }
    }
</script>

reactive注意点

1. 什么是reactive：

• reactive是Vue3中提供的实现响应式数据的方法
• 在Vue2中响应式数据是通过defineProperty来实现的，而在Vue3中响应式数据是通过ES6的Proxy来实现的

2. reactive注意点：

• reactive参数必须是对象（json/arr）
• 如果给reactive传递了其它对象
  • 默认情况下修改对象，界面不会自动更新
  • 如果想更新，可以通过重新复制的方式

引入func

<template>
    <form>
        <input type="text" v-model="state02.stus.id">
        <input type="text" v-model="state02.stus.name">
        <input type="text" v-model="state02.stus.age">
        <input type="submit" @click="addStu($event)">
    </form>
    <ul>
        <li v-for="(stu, index) in state.stus" :key="index" @click="removeStu(index)">
            {{stu.name}} -> {{stu.age}}

        </li>
    </ul>
</template>

<script>
    import useRemoveStu from './remove';
    import useAddStu from './add';

    export default {
        name: "App",
        // setup函数是组合API的入口函数
        setup() {
            // ref 函数注意点：
            // ref函数只能监听简单类型的变化，不能监听复杂类型的变化（对象/数组）
            let {state, removeStu} = useRemoveStu();
            let {state02, addStu} = useAddStu(state);
            return {state, removeStu, state02, addStu}
        }
    }

</script>

remove.js

import {reactive} from "vue";

function useRemoveStu() {
    // ref 函数注意点：
    // ref函数只能监听简单类型的变化，不能监听复杂类型的变化（对象/数组）
    let state = reactive({
        stus: [
            {id: 1, name: 'zs', age: 10},
            {id: 2, name: 'ls', age: 20},
            {id: 3, name: 'ww', age: 30},
        ]
    });

    function removeStu(index) {
        state.stus = state.stus.filter((stu, idx) => idx !== index);
    }

    return {state, removeStu}
}
export default useRemoveStu;

setup执行时机

• beforeCreate：表示组件刚刚被创建出来，组件的data和methods还没初始化
• Created：表示组件刚刚被创建出来，并且组件的data和methods已经初始化好

setup注意点

• 由于在执行setup函数的时候，还灭有执行Created生命周期方法，所以在setup函数中，是无法使用data和methods
• 由于我们不能在setup函数中使用data和methods，所以Vue为了避免我们错误的使用，它直接将setup函数中this修改成了undefined
• setup函数只能是同步的不能是异步的