Vue 3.4.5深度解析:从基础到高级,掌握Composition API与全局API精髓

一、基础函数&特性

1. setup() 函数

  • 作用setup() 是Vue 3引入的一个新的组件选项,用于定义组件的逻辑。它在组件初始化阶段被调用,替代了Vue 2中的datamethods等选项。
  • 特点
    • 接收propscontext作为参数。
    • 返回的对象将被合并到组件的渲染上下文中。
    • 可以使用Composition API函数来组织逻辑。
  • 使用示例:
    import { ref } from 'vue'
    export default {setup(props, context) {const count = ref(0)const increment = () => {count.value++}return { count, increment }}
    }
    

2. ref() 函数

  • 作用:用于创建一个响应式的引用对象,可以用来包裹基本类型值或对象,使其能够在模板中响应式更新。
  • 用法:
    const count = ref(0)
    
  • 特点.value属性访问实际值,适合简单的数据绑定。

3. reactive() 函数

  • 作用:用于创建一个响应式对象,适用于更复杂的对象或数组结构。
  • 用法:
    const state = reactive({ count: 0 })
    
  • 特点:直接修改对象属性即可触发视图更新,适合有多个状态属性的情况。

4. computed() 函数

  • 作用:创建计算属性,基于依赖项自动缓存结果。
  • 用法:
    const doubleCount = computed(() => state.count * 2)
    
  • 特点:只有当依赖项改变时才会重新计算。

5. watch() 函数

  • 作用:监视数据变化并执行回调。
  • 用法:
    watch(count, (newValue, oldValue) => {console.log(`count changed from ${oldValue} to ${newValue}`)
    })
    
  • 特点:支持异步处理,可以有多种配置选项。

6. watchEffect() 函数

  • 作用:类似于watch(),但自动追踪依赖项并执行回调。
  • 用法:
    watchEffect(() => {console.log(`count is now ${count.value}`)
    })
    
  • 特点:不需要显式指定依赖,每次依赖变化都会执行。

7. toRef()toRefs()

  • 作用:将响应式对象的属性转换为独立的ref,便于在模板或逻辑中单独使用。
  • 用法:
    const stateRef = reactive({ count: 0 })
    const countRef = toRef(stateRef, 'count')
    
  • 特点:方便解构和传递响应式对象的单个属性。

8. onBeforeMount(), onMounted(), onBeforeUpdate(), onUpdated(), onUnmounted() 等生命周期钩子

  • 作用:Vue 3通过Composition API提供了新的生命周期钩子函数,用于在组件的不同生命周期阶段执行代码。
  • 用法:
    onMounted(() => {console.log('Component mounted.')
    })
    
  • 特点:更细粒度的控制,可以组合使用。

9. provide()inject()

  • 作用:用于祖先组件向后代组件注入数据,实现跨级组件通信。
  • 用法:
    // 祖先组件
    provide('theme', 'dark')// 子孙组件
    const theme = inject('theme')
    
  • 特点:简化了状态管理和跨组件共享数据的方式。

10. 自定义渲染函数 render()

  • 作用:提供完全控制渲染逻辑的能力,用于替代模板语法。
  • 用法:
    export default {render() {return h('div', {}, 'Hello World!')}
    }
    
  • 特点:高度灵活,适合复杂UI或动态生成DOM结构。

二、核心宏函数(单文件组件方向)

在Vue 3中,引入了Composition API来提供一种更灵活和强大的方式来组织组件逻辑。其中,definePropsdefineEmitsdefineExposedefineSlotsdefineOptions 是几个核心宏函数,用于定义组件的不同方面。

1. defineProps

  • 作用:用于在<script setup>块中定义组件接收的属性(props)。它允许你指定每个prop的类型、默认值等。
  • 使用方式
    import { defineProps } from 'vue';defineProps({message: {type: String,required: true},count: Number
    });
    
  • 特点:在<script setup>中不需要显式导入,直接使用即可,是编译时的语法糖。

2. defineEmits

  • 作用:用于在<script setup>块中声明组件可以向外发出的事件(emits)。它帮助你定义组件间通信的事件接口。
  • 使用方式
    import { defineEmits } from 'vue';const emit = defineEmits(['update:modelValue']);function updateValue(newValue) {emit('update:modelValue', newValue);
    }
    
  • 特点:同样,在<script setup>中无需导入,直接使用,提供事件名称的类型检查。

3. defineExpose

  • 作用:在<script setup>中用于公开组件内部的一些方法或属性给使用该组件的父组件或其他外部环境。
  • 使用方式
    import { defineExpose } from 'vue';const internalMethod = () => { /* 内部逻辑 */ };defineExpose({publicMethod: internalMethod
    });
    
  • 特点:允许组件作者有选择地公开内部实现,保持组件内部的封装性。

4. defineSlots

  • 注意:在Vue 3中,并没有直接的defineSlots宏函数。Vue 3采用模板语法来处理插槽内容,如默认插槽、具名插槽等,通常不需要特殊声明。但在Composition API中,你可以直接通过useSlots()函数来访问插槽内容。
  • 使用方式(非宏函数,但提及useSlots作为替代):
    import { useSlots } from 'vue';const slots = useSlots();console.log(slots.default?.()); // 访问默认插槽
    console.log(slots.namedSlot?.()); // 访问具名插槽
    

5. defineOptions

  • 作用:用于在<script setup>块中定义组件的选项,如名称(name)、继承(inheritAttrs)、模型(options.model)等。
  • 使用方式
    import { defineOptions } from 'vue';defineOptions({name: 'MyComponent',inheritAttrs: false
    });
    
  • 特点:允许在Composition API中设置组件的元数据和配置,增强了配置的灵活性。

三、全局API

1. createApp()

  • 功能:用于创建一个新的Vue应用实例。这是启动一个Vue应用的入口点,通常用于客户端渲染。
  • 用法
    const app = createApp(App);
    app.mount('#app');
    
  • 参数:接收一个Vue组件作为参数,即应用的根组件。

2. createSSRApp()

  • 功能:用于创建一个专用于服务器端渲染(SSR)的Vue应用实例。与createApp类似,但针对SSR做了特别优化。
  • 用法
    import { createSSRApp } from 'vue';
    import App from './App.vue';export function createServerApp() {return createSSRApp(App);
    }
    
  • 适用场景:主要用于构建支持服务器端渲染的应用。

3. app.mount()

  • 功能:将创建的Vue应用挂载到指定的DOM元素上,开始渲染组件。
  • 用法
    app.mount('#app');
    
  • 参数:接收一个选择器字符串或者DOM元素作为参数,表示挂载的目标节点。

4. app.unmount()

  • 功能:卸载Vue应用,清理应用实例及其所有的组件和事件监听器。
  • 用法
    app.unmount();
    
  • 应用场景:当需要移除整个应用时使用,比如切换路由时卸载当前应用以便加载新应用。

5. app.component()

  • 功能:全局注册一个组件,使其可以在应用中的任何地方使用。
  • 用法
    app.component('MyComponent', MyComponent);
    
  • 参数:接收两个参数,第一个是组件名,第二个是组件的定义。

6. app.directive()

  • 功能:全局注册一个自定义指令。
  • 用法
    app.directive('my-directive', {mounted(el, binding, vnode) {// 指令逻辑}
    });
    
  • 参数:指令名和指令定义对象。

7. app.use()

  • 功能:安装一个插件。插件可以是用于全局注册组件、指令、混入、提供全局方法等的函数。
  • 用法
    app.use(myPlugin);
    
  • 参数:插件函数,通常接收应用实例作为参数。

8. app.provide()

  • 功能:在应用层级提供一个值,使其可以在整个组件树中通过inject访问。
  • 用法
    app.provide('service', myService);
    

9. app.runWithContext()

  • 功能:在特定上下文中运行一个函数,这个API主要用于Vue的内部机制,对外部开发者的直接使用较少。

10. app.version

  • 功能:提供Vue的版本信息,是一个只读属性。

11. app.config

  • 功能:全局配置对象,用于修改Vue的行为。包括但不限于错误处理、警告处理、性能追踪、编译选项、全局属性、选项合并策略等。
配置项示例:
  • app.config.errorHandler:全局错误处理函数。
  • app.config.warnHandler:全局警告处理函数。
  • app.config.performance:开启性能追踪。
  • app.config.compilerOptions:自定义Vue模板编译器选项。
  • app.config.globalProperties:添加全局属性,使得所有组件都能访问。
  • app.config.optionMergeStrategies: 自定义选项合并策略,用于控制Vue如何合并组件选项。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/20336.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring:jackson-annotaions注解大全

文章目录 一、介绍二、JsonProperty三、JsonIgnore四、JsonInclude五、JsonFormat六、JsonCreator 和 JsonProperty (在构造函数中)七、JsonTypeName 和 JsonTypeInfo八、JsonIgnoreProperties九、JsonSerialize十、JsonDeserialize 一、介绍 jackson-annotations 是 Jackson …

痛心!2岁女童被从17楼推下坠亡,凶手疑是未成年

一起又一起的案件&#xff0c; 如同一部沉重的史诗&#xff0c; 无声地述说着一个共同的真理&#xff1a; 严惩恶魔&#xff0c;实则是在庇护着无数纯真的心灵&#xff0c;守护着更多的孩子。 因为每一起案件的背后&#xff0c;都隐藏着一个个令人心碎的故事。 01 近日&#xf…

错误发生在尝试创建一个基于有限元方法的功能空间时

问题&#xff1a; index cell.index(#直接使用从0开始的索引if0<1ndex<10: #正集流体 subdomains_x[cell,index(] 1 fem1 /usr/bin/python3.8 /home/wy/PycharmProjects/pythonProject2/fem1.pyUnknown ufl object type FiniteElementTraceback (aost recent call last)…

python编程:实现对数据库中图片文件的查看及比对

当谈到图像查看和管理时,我们往往会使用一些工具软件,比如Windows自带的照片查看器或者第三方工具。那如果你想要一个更加强大和定制化的图像查看器呢?这时候就需要自己动手写一个程序了。 C:\pythoncode\new\ShowSqliteImage.py 这里我们将介绍一个使用Python和wxPython编写…

解析Java中1000个常用类:Iterable类,你学会了吗?

在 Java 编程中,集合(Collections)是非常重要的数据结构。无论是数组、列表、集合,还是其他形式的集合,如何高效地遍历这些集合都是一个关键问题。 Java 提供了一个基础接口 Iterable,它为集合类的遍历提供了统一的接口。 本文将深入探讨 Iterable 接口,介绍其用法、实…

FPGA-ARM架构与分类

ARM架构&#xff0c;曾称进阶精简指令集机器&#xff08;Advanced RISC Machine&#xff09;更早称作Acorn RISC Machine&#xff0c;是一个32位精简指令集&#xff08;RISC&#xff09;处理器架构。 主要是根据FPGA zynq-7000的芯片编写的知识思维导图总结,废话不多说自取吧 …

【Python内功心法】:深挖内置函数,释放语言潜能

文章目录 &#x1f680;一、常见内置函数&#x1f308;二、高级内置函数⭐1. enumerate函数&#x1f44a;2. eval函数❤️3. exec函数&#x1f4a5;4. eval与exec 中 globals与locals如何用☔4-1 globals 参数&#x1f3ac;4-2 locals 参数 ❤️5. filter函数&#x1f44a;6. z…

Python 之SQLAlchemy使用详细说明

目录 1、SQLAlchemy 1.1、ORM概述 1.2、SQLAlchemy概述 1.3、SQLAlchemy的组成部分 1.4、SQLAlchemy的使用 1.4.1、安装 1.4.2、创建数据库连接 1.4.3、执行原生SQL语句 1.4.4、映射已存在的表 1.4.5、创建表 1.4.5.1、创建表的两种方式 1、使用 Table 类直接创建表…

16岁适合做什么编程题:探索编程世界的入门之旅

16岁适合做什么编程题&#xff1a;探索编程世界的入门之旅 在数字化浪潮席卷而来的今天&#xff0c;编程已成为一项重要的技能。对于16岁的青少年来说&#xff0c;学习编程不仅可以锻炼逻辑思维&#xff0c;还能为未来的职业发展打下坚实的基础。那么&#xff0c;16岁适合做什…

安卓如何书写注册和登录界面

一、如何跳转一个活动 左边的是本活动名称&#xff0c; 右边的是跳转界面活动名称 Intent intent new Intent(LoginActivity.this, RegisterActivity.class); startActivity(intent); finish(); 二、如果在不同的界面传递参数 //发送消息 SharedPreferences sharedPreferen…

【学习Day4】计算机基础

✍&#x1f3fb;记录学习过程中的输出&#xff0c;坚持每天学习一点点~ ❤️希望能给大家提供帮助~欢迎点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;指点&#x1f64f; ❤️学习和复习的过程是愉快嘚。 1.7.3 流水线 流水线&#xff08;pipeline&#xff09;技术…

单片机按键处理模块

一 介绍 1.key_board用于单片机中的小巧多功能按键支持&#xff0c;软件采用了分层的思想&#xff0c;并且做到了与平台无关&#xff0c;用户只需要提供按键的基本信息和读写io电平的函数即可&#xff0c;非常方便移植&#xff0c;同时支持多个矩阵键盘及多个单io控制键盘。 …

Python 字符串的运算

在 Python 中&#xff0c;字符串支持一系列的运算操作&#xff0c;包括字符串拼接、重复、比较和成员检测等。以下是一些常见的字符串运算&#xff1a; 字符串拼接&#xff1a;使用加号 可以将两个字符串连接起来。例如&#xff0c;"Hello, " "World" 将…

chap5 CNN

卷积神经网络&#xff08;CNN&#xff09; 问题描述&#xff1a; 利用卷积神经网络&#xff0c;实现对MNIST数据集的分类问题 数据集&#xff1a; MNIST数据集包括60000张训练图片和10000张测试图片。图片样本的数量已经足够训练一个很复杂的模型&#xff08;例如 CNN的深层…

商用未来何时来?软银揭示量子计算商业应用现状

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 文丨沛贤/浪味仙 排版丨沛贤 深度好文&#xff1a;3000字丨10分钟阅读 摘要&#xff1a;软银&#xff08;SoftBank&#xff09;先进技术研究所正在积极推进量子计算商业应用&#xff0c;借助与…

如何使用基类指针迭代派生类对象

如果我们想使用基类指针迭代指向的派生类对象&#xff0c;我们需要在基类中声明返回迭代器的虚函数begin和end&#xff0c;然后在派生类中实现begin和end&#xff0c;这样我们就可以使用基类指针指向派生类后使用其迭代器了。 #include<iostream> #include<vector>…

SpringCloud Feign用法

1.在目标应用的启动类上添加开启远程fein调用注解&#xff1a; 2.添加一个feign调用的interface FeignClient("gulimall-coupon") public interface CouponFeignService {PostMapping("/coupon/spubounds/save")R save(RequestBody SpuBondTo spuBounds);…

随记-点选验证码(二)

之前写过一篇文章 随记-点选验证码 &#xff0c;当时借助了 ddddocr 完成了ocr 识别&#xff0c;这篇文章算是对之前的补充。 本次更换了新的方案&#xff1a; 通过 ultralytics&#xff08;YOLO8&#xff09;训练自己的模型 吐槽一句&#xff1a;标注真是一件耗时的事情啊&am…

解锁用户增长密码:订单排队免单+分红

排队分红模式&#xff0c;作为一种创新的营销策略&#xff0c;正逐渐受到实体店家的青睐。这种策略巧妙洞察了消费者的购物心理&#xff0c;成功地将顾客转变为商家的共赢伙伴。 坐标&#xff1a;厦门&#xff0c;我是肖琳 深耕社交新零售行业10年&#xff0c;主要提供新零售系…

2024.05.17 校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流*裙 &#xff0c;内推/实习/校招汇总表格 1、实习 | 海康机器人2025届「超新星实习生」&#xff08;内推&#xff09; 实习 | 海康机器人2025届「超新星实习生」&#xff08;内推&#xff09; 2、实习 | 大华股份2025届实习生招聘…