首页 前端知识 Vue3的核心语法

Vue3的核心语法

2024-08-19 22:08:16 前端知识 前端哥 421 299 我要收藏

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封装的函数 原因:代码结构更清晰

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16191.html
标签
评论
发布的文章

php保存

2024-08-27 16:08:00

jQuery NiceScroll 插件

2024-08-27 09:08:49

vue echart4.0 按需引入

2024-08-27 09:08:28

Taro3 Vue3使用echarts

2024-08-27 09:08:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!