从Vue2到Vue3【四】——Composition API(第四章)

这篇具有很好参考价值的文章主要介绍了从Vue2到Vue3【四】——Composition API(第四章)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

系列文章目录

内容 链接
从Vue2到Vue3【零】 Vue3简介
从Vue2到Vue3【一】 Composition API(第一章)
从Vue2到Vue3【二】 Composition API(第二章)
从Vue2到Vue3【三】 Composition API(第三章)
从Vue2到Vue3【四】 Composition API(第四章)
从Vue2到Vue3【五】 从Vue2到Vue3【五】——新的组件(Fragment、Teleport、Suspense)
从Vue2到Vue3【六】 从Vue2到Vue3【六】——Vue3的改变(文末送书)


前言

随着Vue 3的发布,我们迎来了一套强大且令人兴奋的组合式API,这为开发者带来了更多灵活性和可维护性。Vue 3的组合式API不仅改变了我们编写Vue组件的方式,还引入了一些新的组件和一些小的但实用的改变。在这篇文章中,我们将深入探讨Vue 3组合式API中的customRef、provide和inject以及响应式数据的判断,让我们一起开始这个令人兴奋的学习之旅吧!

一、customRef

  • customRef:

    • 创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。
    • customRef适用于需要自定义读取和写入逻辑的场景。
    • 提供了更多灵活性,可以根据具体需求定制读取和写入的行为
    • 可以与响应式系统无缝集成,保持一致的Vue开发体验。

ref其实和customRef很相似,都可以创建响应式数据,下面说说他们的异同点

  • 相同点:
  1. 响应式: 无论是customRef还是ref都能够创建响应式的数据
  2. 访问值: 无论是customRef还是ref都能够通过.value属性来访问内部的值。(操作值时都需要加.value)
  • 区别:
  1. 创建方式: customRef需要传入一个函数,并在函数中定义自定义的读取和写入逻辑;而ref只需要传入初始值即可。

  2. 读取和写入逻辑: customRef允许你定义自己的读取和写入逻辑,可以实现更灵活的响应式行为;而ref会直接访问内部的值。

  3. 依赖追踪: customRef允许你在读取和写入逻辑中手动追踪依赖,通过track和trigger函数来实现;而ref会自动追踪读取和写入的依赖。

<template>
	<input type="text" v-model="keyword">
	<h3>{{keyword}}</h3>
</template>

<script>
	import {customRef} from 'vue'
	export default {
		name:'Demo',
		setup(){
			//自定义一个myRef
			function myRef(value,delay){
				let timer
				//通过customRef去实现自定义
				return customRef((track,trigger)=>{
					return{
						get(){
							track() //告诉Vue这个value值是需要被“追踪”的
							return value
						},
						set(newValue){
							clearTimeout(timer) // 当再次输入时清空上次的定时器 重新开启一个新的定时器
							timer = setTimeout(()=>{
								value = newValue  // 直到在delay这段时间不再输入时 才会更新模板上的值
								trigger() 通知Vue去重新解析模板
							},delay)
						}
					}
				})
			}
			let keyword = myRef('hello',500) //使用程序员自定义的ref
			return {
				keyword
			}
		}
	}
</script>

这个官方给出的案例:当用户在input输入时,下方的h3标签延迟更新( 本质上就是一个防抖)
防抖指的是在一定时间内如果再次触发该事件,那么将重新计时,直到该时间内没有再次触发,才会执行事件;而节流则是在一定时间内只能触发一次事件。在实现方面可以使用定时器或时间戳等技术来实现。其中,防抖适用于像搜索框这样需要输入完整关键字才会产生最终结果的场景;而节流则更适合于需要频繁触发但每次执行事件耗时较久的场景。

从Vue2到Vue3【四】——Composition API(第四章),从Vue2到Vue3,vue.js,javascript,前端,vue3

myref是自定义的一个函数,所以需要有返回值,返回的值是利用customRef自定义的响应式数据
customRef内部有getter和setter,当解析模版时需要读取值(getter),当在input输入时需要重新设置值(setter)

初始读取值时
从Vue2到Vue3【四】——Composition API(第四章),从Vue2到Vue3,vue.js,javascript,前端,vue3
修改值时
从Vue2到Vue3【四】——Composition API(第四章),从Vue2到Vue3,vue.js,javascript,前端,vue3
总结来说,customRef和ref都是Vue 3提供的用于创建响应式数据的函数,它们的主要区别在于创建方式读取和写入逻辑依赖追踪。你可以根据自己的需要选择使用哪种函数来创建响应式数据。
customRef真实场景使用要结合组件库的处理是否支持,不能很好的应用到组件库里,因为组件库里都有自己的数据劫持
响应式实现原理数据劫持这块,在讲完vue3的基本使用后,会出一篇文章详细讲解,欢迎订阅本系列,长期更新!

二、provide 与 inject

  • provide 与 inject
    • provide和inject是一对用于实现父组件向子孙组件传递数据的特殊组合。它们可以帮助我们在组件树中跨层级地共享数据,而无需通过逐层传递props的方式。

    • provide 函数接收两个参数:provide( name,value ),

      • name:定义 提供给子孙们数据的 name 。
      • value :提供数据的值。
    • inject(name,default)

      • name:接收 provide 提供的属性名。

      • default:设置默认值,是可选参数。
        当父亲没有provide值时,子组件注入使用的就是默认值,默认值也没有的话就是undefined

父组件用一个 provide 选项来提供数据,后代组件用一个 inject 来接收并使用这些数据

父组件代码

<template>
  <div class="app">
    <h3>我是App组件(祖),{{ name }}--{{ price }}</h3>
    <Child />
  </div>
</template>

<script>
import { reactive, toRefs, provide } from "vue";
import Child from "./components/Child.vue";
export default {
  name: "App",
  components: { Child },
  setup() {
    let car = reactive({ name: "奔驰", price: "40W" });
    provide("car", car); //给自己的后代组件传递数据
    setTimeout(() => {
      // 过一秒钟修改父亲的car 看下子组件数据是否改变 若改变 则说明传递给子孙组件的数据也是响应式的
      car.name = '宝马'
    }, 1000);
    return { ...toRefs(car) };
  },
};
</script>

<style>
.app {
  background-color: gray;
  padding: 10px;
}
</style>

子组件代码

<template>
	<div class="child">
		<h3>我是Child组件(子),{{ name }}--{{ price }}</h3>
		<Son/>
	</div>
</template>

<script>
	import {inject, toRefs} from 'vue'
	import Son from './Son.vue'
	export default {
		name:'chIld',
		components:{Son},
		setup(){
			let car = inject('car')
			return {
				...toRefs(car)
			}
		} 
	}
</script>

<style>
	.child{
		background-color: skyblue;
		padding: 10px;
	}
</style>

孙组件代码

<template>
	<div class="son">
		<h3>我是Son组件(孙),{{car.name}}--{{car.price}}</h3>
	</div>
</template>

<script>
	import {inject} from 'vue'
	export default {
		name:'sOn',
		setup(){
			let car = inject('car')
			return {car}
		}
	}
</script>

<style>
	.son{
		background-color: orange;
		padding: 10px;
	}
</style>

效果 (父组件给子孙组件传递响应式数据,父亲修改值后,子孙组件数据也会变化)
从Vue2到Vue3【四】——Composition API(第四章),从Vue2到Vue3,vue.js,javascript,前端,vue3

Vue框架采用的是单向数据流的数据管理模式 ===> 子孙组件不允许修改从父组件传递下来的值,这样会造成数据流向不清晰加粗样式

  • 这种数据流的设计有以下几个优点:

    • 数据的流动清晰可控:数据从父组件传递到子组件,形成了明确的数据流动路径,使得数据的变化可以追溯和控制。
    • 组件的独立性:子组件只需要关心自己的数据和逻辑,不需要关心父组件的具体实现细节,提高了组件的独立性和可复用性。
    • 数据的可预测性:由于数据只能从父组件流向子组件,数据的变化只能通过父组件来触发,减少了数据的复杂性和不可预测性。

所以这里虽然是利用 provide 和 inject 在父组件和子孙组件之间传递数据,依然不能在后代组件中修改数据,为了避免这个问题,父组件在传递值时,应当利用readonly来限制子孙组件修改数据
升级版父组件传值

    provide("car", readonly(car)); //给自己的后代组件传递只读数据

子组件内修改值的后果 : 报错,并且值不能被修改,nice!

			setTimeout(() => {
				car.name = '五菱宏光'
			}, 2000);

从Vue2到Vue3【四】——Composition API(第四章),从Vue2到Vue3,vue.js,javascript,前端,vue3

三、响应式数据的判断

  • isRef: 检查一个值是否为一个ref对象
  • isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
  • isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
  • isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理
<template>
	<h3>我是App组件</h3>
</template>

<script>
	import {ref, reactive,toRefs,readonly,isRef,isReactive,isReadonly,isProxy } from 'vue'
	export default {
		name:'App',
		setup(){
			let car = reactive({name:'奔驰',price:'40W'})
			let sum = ref(0)
			let car2 = readonly(car)

			console.log(isRef(sum)) //true
			console.log(isReactive(car)) //true
			console.log(isReadonly(car2)) //true
			console.log(isProxy(car)) //true
			console.log(isProxy(sum)) //false

			
			return {...toRefs(car)}
		}
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
</style>

从Vue2到Vue3【四】——Composition API(第四章),从Vue2到Vue3,vue.js,javascript,前端,vue3

四、Composition API 与 Options API

  • Options API
    在Options API中,组件的各种选项(data、methods、computed、watch)是通过一个个独立的配置项来进行定义和组织的。这样的设计可能会导致代码的分散,特别是在大型组件中,很难追踪和管理各个选项之间的关联。
    从Vue2到Vue3【四】——Composition API(第四章),从Vue2到Vue3,vue.js,javascript,前端,vue3
  • Composition API
    在组合式API中,各种功能选项可以根据其逻辑关联性进行组合
    从Vue2到Vue3【四】——Composition API(第四章),从Vue2到Vue3,vue.js,javascript,前端,vue3

在组合式API中,可以使用setup()函数来组织和定义组件的逻辑。setup()函数中可以使用各种功能函数(如reactive、ref、computed等)来声明响应式数据、计算属性、事件处理函数等,而不需要将它们分散在不同的选项中。这样可以使得逻辑代码更加集中和易于维护。

另外,由于组合式API将数据和逻辑进行组合,使得组件的代码更加模块化和可复用(hooks)。不同的逻辑可以通过将不同的功能函数组合在一起来构建不同的组件,提高了代码的可维护性和可读性。

总结来说,在图中可以看到,使用组合式API可以将相关逻辑组合在一起,简化了代码结构,并提供了更好的可读性和可维护性。相比于Options API,组合式API更加灵活和强大,尤其适用于复杂的组件和大型项目。

总结

本系列到这,讲解完了组合式API,接下来将为大家带来新的组件小的改变文章来源地址https://www.toymoban.com/news/detail-597215.html

到了这里,关于从Vue2到Vue3【四】——Composition API(第四章)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 从Vue2到Vue3【二】——Composition API(第二章)

    内容 链接 从Vue2到Vue3【零】 Vue3简介 从Vue2到Vue3【一】 Composition API(第一章) 从Vue2到Vue3【二】 Composition API(第二章) 从Vue2到Vue3【三】 Composition API(第三章) 从Vue2到Vue3【四】 Composition API(第四章) Vue3作为Vue.js框架的最新版本,引入了许多令人激动的新特性和改进。其

    2024年02月17日
    浏览(38)
  • Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?

    Composition API 可以说是Vue3的最大特点,那么为什么要推出Composition Api,解决了什么问题? 通常使用Vue2开发的项目,普遍会存在以下问题: 1、代码的可读性随着组件变大而变差 2、每一种代码复用的方式,都存在缺点 3、TypeScript支持有限 一、Options Api Options API,即大家常说的

    2024年02月12日
    浏览(41)
  • 第四章:前端框架Vue基础入门

    本章学习目标: 了解Vue框架架构思想 掌握Vue核心指令 掌握计算属性与监视 掌握组件化开发模式 官方文档:https://cn.vuejs.org/guide/introduction.html. 文档可选择使用optionsAPI(选项式API)阅读,或者CompositionApi(组合式API)阅读。选项式API更适合平滑从vue2过渡,以下示例均以Compositi

    2024年02月12日
    浏览(43)
  • 【vue3】11-Vue 3中的Composition Api(一)

    在Vue2中,我们编写组件的方式是Options APl: Options API的一大特点就是在 对应的属性 中编写 对应的功能模块 ; 比如 data定义数据 、 methods中定义方法 、 computed中定义计算属性 、 watch中监听属性改变 ,也包括 生命周期钩子 ; 但是这种代码有一个很大的弊端: 当我们 实现某一个功

    2024年02月08日
    浏览(40)
  • 探究Vue3中的Composition API:优化组件逻辑的新利器

    在 Vue 3.0 中,引入了一种新的响应式 API,即 toRef 。 toRef 函数可以将一个普通值转换为响应式引用类型,这样就可以在模板中直接使用这个响应式引用类型的属性,并且当该属性发生变化时,视图会自动更新。 通过控制台打印输出的内容和页面的变化,我们可以观察到,age的

    2024年02月10日
    浏览(35)
  • Composition API 的优势、新的组件(Fragment,Teleport,Suspense)【Vue3】

    使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改。 我们可以更加优雅的组织我们的代码,函数。让相关功能的代码更加有序的组织在一起。 在Vue2中:组件必须有一个根标签 在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个

    2024年02月02日
    浏览(41)
  • vue3前端开发,感受一下组合式api和VUE2选项式的差异

    vue3前端开发,感受一下组合式api和VUE2选项式的差异!今天开始,正式开始,进入学习Vue3的内容。以后代码,案例分享,都会采用组合式api的模式为大家做展示。 今天是第一节,带大家感受一下,Vue3的组合式api和之前传统的vue2版本选项式api的差别。 首先,大家需要提前使用

    2024年01月19日
    浏览(37)
  • 第四章 RPC 调用

    通过以上案例我们发现,Http请求调用服务实例属实过于麻烦。其实对于请求同一个服务,很多步骤都是相同的,例如:服务名,地址,httpClient 创建步骤等。 RPC的出现,就是为了解决这一问题。 RPC: 即我们常说的远程过程调用,就是像调用本地方法一样调用远程方法,通信协

    2024年02月04日
    浏览(49)
  • 四,Eureka 第四章

           2.3.4修改主启动类 标注为Eureka客户端           springcloud-eureka-sever-7001 springcloud-eureka-sever-7001   springcloud-eureka-sever003           5.25编写PaymentMapper接口   5.    

    2024年02月15日
    浏览(82)
  • 第四章 搜索功能

    指定返回的字段 在ES中,通过_source子句可以设定返回结果的字段。_source指向一个JSON数组,数组中的元素是希望返回的字段名称。 例如,通过source指定查询字段 结果计数 给前端传递搜索匹配结果的文档条数,即需要对搜索结果进行计数。ES提供了_count API功能,在该API中,用

    2023年04月08日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包