Vue 语法结构

响应式介绍

Vue的响应式是指当数据发生变化时，Vue能够自动更新相关的视图。这也是 Vue 的最大特色。

Vue使用了一种叫做“依赖追踪”的机制来实现响应式。

当一个响应式的数据被使用在模板中时，Vue会自动为这个数据建立起依赖关系。当数据发生变化时，Vue会通知所有依赖于该数据的部分进行更新。

这种更新是高效的，因为Vue使用了虚拟 DOM 来进行差异化更新，只更新发生变化的部分，而不是重新渲染整个页面。

除了基本的响应式数据，Vue还提供了计算属性（computed）和侦听器（watcher）来更方便地处理和监测数据的变化。

计算属性可以根据依赖的数据动态计算出一个新的属性值，而侦听器可以监听一个或多个数据的变化，并触发相应的回调函数。

总而言之，Vue的响应式使我们能够更轻松地处理数据的变化和更新视图，使开发变得更加简单和高效。

下面，对组合式 API 中的内容按书写顺序进行拆分讲解。

createApp() 函数

在使用 Vue 时，需要使用 createApp() 创建一个 Vue 实例。

该函数使用前，需要从 Vue 框架中将其导入到当前文件中才可以使用

   <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp } = Vue
    </script>

此时就可以使用 createApp() 函数创建 Vue 实例对象了，该方法接收一个对象类型的参数。

该参数对象是当前 Vue 实例需要暴露的接口或组件对象（组件后面讲解）。

   <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp } = Vue

        const app = createApp({})
    </script>

Vue 实例创建成功后，还没有和实例所在的页面建立关系，需要使用 Vue 实例对象的 mount() 方法，将当前 Vue 实例和页面中的元素建立关系，也就是将当前 Vue 实例挂载到页面的元素上。

mount() 方法一般会使用 id选择器 做为参数选择目标元素进行挂载。

    <div id="app"></div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp } = Vue

        const app = createApp({})

        app.mount("#app")
    </script>

setup() 函数

setup() 函数被称为钩子函数，也就是回调函数，是在组件中使用组合式 API 的入口。

setup() 函数写在 createApp() 函数的参数对象中，用来声明响应式变量或函数。

可以使用响应式 API 来声明响应式的状态，在 setup() 函数中通过 return 返回的对象会暴露给模板和组件实例。

    <div id="app"></div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp } = Vue

        const app = createApp({
            setup(){

                return {}
            }
        })

        app.mount("#app")
    </script>

ref 函数

在组合式 API 中，使用 ref() 函数来声明响应式状态变量，该函数使用前也需要从 Vue 对象中导入。

ref() 允许创建可以使用任何值类型数据做为参数的响应式变量
ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象。
在 setup() 函数中定义的内部函数，使用响应式变量时，需要通过 .value 属性获取值。
通过 ref() 定义的响应式变量，可以在模板中直接使用，不需要通过 .value 属性。

    <div id="app">
        <div> {{ num }} </div>
        <div>
            <button @click="num++">加1</button>
        </div>
        <div>
            <button @click="add100">加100</button>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, ref } = Vue

        const app = createApp({
            setup() {
                const num = ref(100)
                function add100(){
                    num.value += 100
                }
                return {
                    num,
                    add100
                }
            }
        })

        app.mount("#app")
    </script>

总结

响应式开发是Vue最大的特色，基于“依赖追踪”的机制来实现响应式。
createApp 函数用来创建 Vue 实例。
setup 函数是组合式 API 的入口
ref 函数用来定义响应式变量