Vue3的核心语法

Vue3的核心语法·

(Node.js 环境Npm先serverready，根据需求来运行index.Html入口文件)

1. Composition api可以用函数的方式，更加简单的组织代码，让相关功能的代码更加有序的组织在一起
2. Setup:是一个新的配置项，值是一个函数，为composion api服务，组件的数据，方法，计算属性，监视等，均在setup中

     特点：函数返回的对象中的内容，可直接在模板中使用

           this是无定义的

           该函数会在beforecreate之前调用

Setup与optionapi的关系 setup的数据可被optionapi调用，optionapi的数据不可被setup调用，如果数据冲突，以setup优先

简化代码

vite-plugin-vue-setup-extend –D

vite,cconfig.ts

<script setup lang=”ts” name=”person”>

1. ref创建基本类型的响应式数据（基础 对象） reaction （对象）

          区别：ref创建的变量必须使用。Value（可以借助插件volar）

                Reactive重新分配一个新对象，会失去响应式（可使用object.assign去整体替换）

          如何使用：

                基本类型的响应式数据，ref

                响应式对象，层级不深，ref reactive都可以 若层级深

1. toRefs与toRef 将响应式对象的每一个属性，转化为ref对象（toRefs与toRef功能一直，不过一个可以批量转换）
2. computed 根据已有数据计算出新数据
3. watch 监视数据变化（ref定义的数据、reactive定义的数据、函数返回一个值（getter函数）、包含上述内容的数组）

1. 监视ref定义的基本类型数据：直接写数据名即可，建设的是其value值的变化
2. 监视ref定义的对象类型数据：直接写数据名，监视的是对象的地址值，若想监视数据内部的数据，要手动开启深度监视
3. 监视reactive定义的对象类型的数据，默认开启深度监视
4. 监视ref和reaction定义的对象类型的某个属性，若该函数不是对象类型，需要写成函数形式、若是，可以直接写，建议写成函数
5. 监控上述多个形式

    7、watchEffect：立即运行一个函数，同时响应式的追踪其依赖，并在依赖更改时重新执行该函数。与watch的区别是不用明确指出监视的数据

   8、标签的ref属性：用于注册模板引用（用在普通的dom的标签上，获取的是dom结点，用在组件标签上时，获取的时组件实例对象）

     9、props：用于组件上的传值，接收外面传过来的数据（父组件向子组件的数据传递）

    10、生命周期：vue组件实例在创建时会有一系列的初始化的步骤在这过程中，调用特定的函数，让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命构子

创建：setup

挂载：onBeforeMount onMounted

更新：onBeforeUpdate onUpdated

销毁：onBeforeUnmount onUnmounted

onMounted onUpdated onUnmounted为常用钩子

     11、自定义hook：一个对composition api封装的函数 原因：代码结构更清晰