天天爽夜夜爽人人爽
conew_1.jpg
conew_2.jpg
conew_3.jpg
conew_4.jpg
conew_5.jpg
conew_6.jpg

手拉手带你了解Vue3的 ref 和有关函数以及臆想属性

发布日期:2022-03-12 19:34    点击次数:172

手拉手带你了解Vue3的 ref 和有关函数以及臆想属性

11/customRef

自界说一个ref,并对其依赖项追踪和更新触发进行显式结果。它需要一个工场函数,该函数接收track和trigger函数动作参数,并应复返一个带有get和set的对象。

若是上头那段没看懂的话,不错跳过。

肤浅的说,便是在ref原有的set、get的基础上,加入咱们我方写的代码,以达到一定的经营。

话说,官网写的例子还真实……归正一驱动我是没看懂,其后又反复看,又把代码敲出来运行,又查了一下“debounce”的理由。临了终于理会了,这是一个防抖(蔓延反应)的代码。

一般用户在文本框里输入本体,立即就会反应,然则若是在查询功能里面的话就会有点小沉闷。用户输入个“1”,立即就去后端查询“1”,然后用户又输入个“2”,立即又去后端查询“12”,然后用户又输入个“3”,立即又去后端查询“123”。……这个反应是很快,然则有点“折腾”的嫌疑,那么能不可等用户把“123”都输入好了,再去后端查询呢?

官网的例子便是杀青这么的功能的,咱们把例子完善一下,就很光显了。

constuseDebouncedRef=(value,delay=200)=>{lettimeoutreturncustomRef((track,trigger)=>{return{get{track//vue里面的追踪函数returnvalue}, 日韩免费视频一区二区三区set(newValue){clearTimeout(timeout)timeout=setTimeout(=>{value=newValuetrigger//vue里面的自动更新的函数。},delay)//蔓延时辰}}})}setup{consttext=useDebouncedRef('hello',1000)//界说一个v-modelconsole.log('customRef',text)constupdate==>{//修改后蔓延刷新text.value='1111'+newDate.valueOf}return{text,update}}

customRef对象:{{text}}

get莫得变嫌,径直用原形式。

set使用setTimeout杀青蔓延反应的功能,把Vue里面的trigger放在setTimeout里面就好。

这么就不错了,蔓延多长的时辰不错自界说,这里是一秒。一秒内用户输入的本体,会一次性更新,而不是每输入一个字符就更新一次。

v-model="text"不错动作v-model来使用。

12/customRef的源码

咱们再来望望customRef里面源码的杀青边幅。

functioncustomRef(factory){returnnewCustomRefImpl(factory);}classCustomRefImpl{constructor(factory){this.__v_isRef=true;const{get,set}=factory(=>track(this,"get"/*GET*/,'value'),天天爽夜夜爽人人爽=>trigger(this,"set"/*SET*/,'value'));this._get=get;this._set=set;}getvalue{returnthis._get;}setvalue(newVal){this._set(newVal);}}

很肤浅的是不是,便是先这么,然后在那样,临了就贬责了。好吧,便是把factory参数解构出来,分红set和get,做成里面函数,然后在里面的set和get里面调用。

13/自界说ref的实例——写一个我方的臆想属性。

一提到臆想属性,咱们会意想Vue提供的computed,那么若是让咱们使用自界说ref来杀青臆想属性的功能的话,要若何杀青呢?(阻扰:仅仅练惯用)

咱们不错这么来杀青:

constmyComputed=(_get,_set)=>{returncustomRef((track,trigger)=>{return{get{trackif(typeof_get==='function'){return_get}else{console.warn(`莫得配置get形式`)}},set(newValue){if(typeof_set==='function'){_set(newValue)trigger}else{console.warn(`莫得配置set形式`)}}}})}setup{constrefCount=ref(0)constmyCom=myComputed(=>refCount.value+1)//constmyCom=myComputed(=>refCount.value,(val)=>{refCount.value=val})constupdate==>{//修改原型refCount.value=3}constsetRef==>{//径直赋值refCount.value+=1}return{refCount,//基础类型myCom,//援用类型update,//修改属性setRef//径直配置}}

展示自界说的customRef杀青臆想属性ref对象:{{refCount}}自界说的臆想属性对象:{{myCom}}修改属性el-button>div>

myComputed最初界说一个函数,接收两个参数,一个get,一个set。

customRef复返一个customRef的实例,里面配置get和set。

调用形式调用的时刻,不错只传入get函数,也不错传入get、set两个函数。修改refCount.value的时刻,v-model的myCom也会发生变化。

实用性那么这种边幅有啥使用收尾呢?在做组件的时刻,组件的属性props是不可径直用在里面组件的v-model里面的,因为props只读,那么若何办呢?

不错在组件里面配置一个ref,然后对props做监听,大概用computed来做。除了上头的几种形式外,也不错用这里的形式来杀青,把refCount造成props的属性就不错了,然后set里面使用smit提交。

14/computed

写完结我方的臆想属性后,咱们依然来望望Vue提供的臆想属性。代码来自于vue.global.js,交流了一下先后规章。

functioncomputed(getterOrOptions){letgetter;letsetter;if(isFunction(getterOrOptions)){getter=getterOrOptions;setter==>{console.warn('Writeoperationfailed:computedvalueisreadonly');};}else{getter=getterOrOptions.get;setter=getterOrOptions.set;}returnnewComputedRefImpl(getter,setter,isFunction(getterOrOptions)