vue3组合式API

setup选项的写法和执行时机： 

   <script>
        export default{
            setup(){
                //数据
                const message="this a message"
                //函数
                const lgMessage=()=>{
                    console.log(message)
                }
                return {
                    message,logMessage
                }
            },
            beforeCreate(){}
        }
    </script>

    在组件进行渲染的时候会优先执行我们的setup函数，执行时机子啊beforecreate之前，而且是自动执行的

    如何简单的使用组合式API，可以直接在script标签里面添加一个setup,这样就可以直接使用 

  <script setup>
        const message="this.  is a mesage"
        const logMessage=()=>{
            console.log(message)
        }
    </script>

    setup中的this指向的是undefined

重点：组合式API创建响应式数据以及获取DOM元素

组合式API-reactive和ref

    reactive()：接收对象类型数据的参数传入并返回一个响应式的对象

    核心代码：       

        import {reactive} from "vue"

        执行函数：响应式数据/对象，才可以引发数据的更新

        const state=reactive(对象类型数据)

    ref():

 import {reactive} from "vue"

        执行函数：响应式数据/对象，才可以引发数据的更新

        const state=ref(简单数据或对象数据类型)

        const setCount=()=>{

            state.value++

        }

        接收简答类型或者对象类型的数据传入并返回一个响应式的对象       

        在脚本区域修改ref产生的响应式对象数据，必须通过.value属性

    vue3中获取DOM元素：

        在vue3中，可以使用ref和setup来获取DOM对象：

        1.ref:

            在vue3中，可以使用ref函数来创建一个响应式的引用对象

            将ref应用于DOM对象，可以获取它的引用，并在组件中使用

            在组件的template中使用ref对象时，需要添加.value来访问实际的DOM元素         

  <template>
                <div>
                    <button ref="myButton">Click me</button>
                </div>
   </template>
        <script>
                import { ref } from 'vue';
                export default {
                setup() {
                    const myButton = ref(null);
                    // 在组件内部使用 myButton.value 获取 DOM 对象
                    // 可以进行操作或添加事件监听器等
                    console.log(myButton.value);
                    return {
                    myButton,
                    };
                },
                };
            </script>

        2.使用setup:

            在vue3组件中，可以使用setup函数来访问DOM元素

            在setup函数中，可以通过传入的context对象的refs属性获取DOM元素的引用

            通过refs对象的属性名来访问DOM元素的引用         

  <template>
                <div>
                    <button ref="myButton">Click me</button>
                </div>
            </template>
            <script>
                export default {
                setup(_, { refs }) {
                    // 在组件内部使用 refs.myButton 获取 DOM 对象
                    // 可以进行操作或添加事件监听器等
                    console.log(refs.myButton);
                    // 或者将其赋给一个常量
                    const myButton = refs.myButton;
                    return {
                    myButton,
                    };
                },

                };

            </script>

        3.vue2中直接使用：

            this.$refs.xxx即可获取dom对象