vue3.0实战从0到1实战电商管理系统（第二天）

章节文章课程简介：

任何事情都需求时间的沉淀，技能也不破例，今天编写Vue3.0系列的章节文章，仅仅希望能够比他人更早的去尝鲜一些新的技能，究竟Vue3.0已经Beta版别了，所以里正式版别也不远了，提前去学习和了解，咱们就会比他人有更多的时间去充分了解Vue3.0的特性，只有当你真实了解一门技能的时候，才能够正确的断定它是否适宜、是否应该运用到你当时的实践项目当中去。

• 第一天：浅谈vue3.0、初始化项目之：Hello World Vue3.0
• 第二天：Api实战之：vue-composition 我是api调用工程师
• 第三天：vue3怎么完成逻辑复用
• 第四天：实战之：高解耦式mock api的规划与订单列表查询
• 第五天：怎么完成代码优化

今天是第二天：Api实战之：vue-composition 我是api调用工程师

学习任F – x j 8 k +何框架之前，首要肯定要学习的是它的生命周期，Vue3.0的一切生命周期函数都是在setup函数中界说，具体包括生命周期机器界说如下：

import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBefq ) L G 3 X @ _oreUC 9 h l ynmount,
onUnmounted,
onErr9 . c @ ~ 3 ^ jorCaptured,
onRenderTracked,
onRenderTriggered,
} from "vue";
export default {
setup() {
console.logt s G 2 c("setup");
onRenderTracked(() => {
consol3 k f ze.log("on; - H p ^RenderTracked");
});
ot H N } C c V 7 TnRenderTriggered((event) => {
console.log('onRenL M ] Y & C aderTriggered')
});
onBeforeMount(() =>4 l * & {
console.log("onBeforeMount");
});
onMounted(() => {
console.log("onMounted");
});
onBeforeUpdag t Hte(() => {
console.log("onBeforeUpdate");
});
onUpdated(() => {
console.log("onUpdated");
});
onBefori n 8eUnmount(() => {
console.log("beforeDestroy");
});
onUnmounted(() => {a H | O
console.log("onUnmounted");
});
onErrorCaptured(() => {
console.log("onErrorCaptured");
});
return {
};
},
};

Vue3.0组件生命周期图

Vue3.0 vue-composition Api的运用

• (1) setup()
  setup() 函数是 vue3 中统一的入口函数,一切生命周期函数界说都是需求界说在次函数下才收效，setup 函数中无法访问到 this，一~ o 2 W切的组件参数都是经过，s) T n k Cetup函数中包括props和context参数，props参数默许是呼应式的

首要咱们先创立一个组件如下：

export default {
setup(S r r !) {
console.log("组n * s k Q _ =件入口函数");
}
}

components/user,vue

<template>
<section>
&l P ~ ) U + 9t;h2>我是:{{ user@ u U sName }}</h2>
</U 1 n 5section>
< R R ];/template>

export default {
props: {
userName: String
},
setup(props,context) {
// context.attrs
// context.slots
// context.parent
// context.root
// context.emit
// conH 9 n V Q 2 etext.refs
console.log(`组件传递props${props.userName}`);
console.log(`组件的上下文目标${c- D ` % *ontext}`);
},
};

然后在App.vue页面中运用它D H r 2 ) ( U 8

src/App,vue

<template>
<section>
&1 g @ c r H 2 zlt;h2>Hello World Vue3.0</h2>
<comz T 9 ( | u-us} & N ^er :userName="'虎克小哥哥'"/>
<br/>
&lp 1 E @ N d 9t;/section>
</template>P e y s k R V Y

import ComUser from "./comp` m 6onents/user.vue"
export default {
components:{
ComUser
},
setup() {
retu4 D , Orn {
};
},
};

• (2) reactive() 函数接纳一个一般目标，回来一个呼应式的数据目标,支撑Map、Set、WeakSet、WeakMap数据结构

&1 z f Ylt;template>
&t / P m ~ -lt;section>
<h2>Hello World Vue3.0</h2>
<h3>我是：{{userInC x | 9 { ! X ifo.us^ Z B ( G Z serName}}</h3>
<br/>
</section>
</template>

import { rea: c (ctive } from "vue";
export default {
setup() {
const userInfo=reactive({userName:"虎克小哥哥"});
return {
userInfo
};
},
};

• (3: I Z ! ^ E g = [) ref() 函数用来依据给定的值创立一个呼应式的数据目标[ ^ 5 1 S ] , +，ref() 函数调用的回来值是一个目标，这个目标上只包括一个 .value 特点。

  <template>
  <sectd V / N 3 Nion>
  <L r M X }h2>Hello World Vue3.0</h2>
  <h3>我叫虎克小哥哥，来自：{{6 B ^ ocity}}</h3>
  <x M R G t Pbutton @click="getUserCity">你来自哪里？</button&0 9 T v Y i g Bgt;
  <br/>
  </section>
  </templa^ ; D 4 6 D 1 Ste>
  

  import { ref } from "vue";
  export default {
  setup() {
  const city=ref("");
  const getUserCity=()=>{
  city.value="上海";
  }
  return {
  city
  };
  },
  };
  

• (4) isRef() 用来判断某个值是否为 ref() 创立出来的目标。
  isK 5 UProxy、isReactive、isReadonly都迥然不同

 <template>
<section>
<h2>Hello World Vue3.0</h2>
<h3>{{Msg}}</h3>
<button @click="getUserInfo">你来自哪里？</button>
<br/>
</s0 C Dection>
</template>

import { isRef }O / R from "vue";
eo ) | y h e zxport default {f 7 a : 6 ^ Z
setup() {
const userY e D 7 i _ ~ UName=ref("虎i J t i -克小哥哥");
const city=ref("上海");
const Msg=ref("");
const getUserInfo=()=>{
if(isRef(userName)){
Msg.value=`我叫：${userName.value},來自${city.value}`
}else{
Msg.value=`我叫：${userName.value}`
}
}
return {
Msg,
getUserInfo
};
},
};

• (5) toRefs() 函数能够将 reactive() 创立出来的呼应式目标，转] r d N T e { F m化为一般的目标，便是能够將reactive多层目标类型的呼应目标，转化为一般类型的呼应数据

<template&5 q / ; a {gt h 1 b 9 ) U S;
<sectx g ` D , i Gion>
<h2>Hello World Vue3.0</h2>
<h3>n U g r x转化reactive类型数据{{userInfo.userName}}</h3: @ = e Q Y v>
<h3>转化reactive类型数据{{code}}</h3>
<br/>
</section>
</templateT V 8 [>

import { reactive,toRefs } f@ @ R # & irom "vue";, ! m 4 Q V + 2
export default {
setup() {
const data=reactive({
userInfo:{
userName:"虎克小哥哥"
},
code:200
});W F ? r f
}
return {
...toRefs(data),
};
},
};

• (6) computed() 核算特点
  传入一个 function 函数，能够得到一个只读的核算特点
  传入一个目标能够自界说get set函数
  回来一个响的应式refp * F h A s ] P目标

<templatJ R 3 ~ 5 / Z !e>
<section>0 3 W;
<h2>Hello World Vue3.0&i R F K 4 0lt;/h2>
请输入年纪:<input type="text" v~ g t-modelo = L I a F =="age">
<br/><br/>
我的年纪是:{{userMsg}}
<br/&gX # =t;
</section>2 @ v 7 { L
</template>

import { ref,computed } from "vue";
export defa% ? ( + ] 0 T Gult {
setup() {
const age = ref("");
/t Q P =/传入函数的方法
const userMsg = computed(() =>{
return `我的年纪是:`+age.value
}U s s Y P p 7 V)
//传入目标自界说get set的形式
const userMsg =( , G 7 C S computed({
get(){
retu2 E mrn `我的年纪是:`+age.valuek - U ~ *
},
sen ) o $ $ H O l jt(val){
age.value=val;
}
})
// 回来的userMsg是一个呼应式的ref5 P Z z h i . v N目标
userMsg.value="";
return {
age,
userMsg
};
},
};

• (7)D 9 B ] q watch() 监听函数

&lw C o -  % Ft;template>
<section>
&lW J { . Ft;h2>; d T L / i W %;Hello World Vue3.0</h2>
请输入地址:&_ @ P + u % 4 ult;input type="text" v-mY ! y N W 5 ) ] 5odel="city">
请输% I $ I a z入年纪:<input type="text" v-model="age">
<button @click="stop">不想3 C # y / } 4 p给你知道我的年纪</button>
<br/>
</section>
</template>

import { ref,watch } from "vue";
exportl V , X 7 9 ) R ! default {
setup() {
const9 l O Q j * S city+ ) $=ref("上海");
//界说方法1 内部的呼应目标改变就触发监听,默许会触发深度监听，
//初始化的时候% u D G { + ] /会执行一次
//回来一; s g ; , Y ^ V个监听实例函数
const) / 4 F a 8 stop = watch(() => {
console.log("我的年纪在增长:",age.value)
},{
lazy: false // 是否触发深度监/ 4 G T : .听
})
//调用监听实例函数，能够停止监听
//stop()
//监听某个呼应目标 
const stop =  watch(
() => age.valueX z Y O 6,
(age, prevAge) => {
console.log("age:",age,"prevAge",prevAge)
}
)
//监听多个呼应目标
const stop = watch(
[
() => age.value,
() => city.val5 T + C } 5 ( Y nue,
],
(
[age, city],
[prevage, p3 ? 0 / F - 6 vrevcity],
) => {
console.log("J c Q O _age:": L W U,age,"prevage",prevage)
consol4 { ; [e.log("city:",city,( P ~ # I M q"prevcity",prevcity)
},
{
lazy: trc d @ 1 W [ue // 是否触发深度监听
}
)
retur1 d t `  in {
sk & Etop
};
},
};

• (8) provide & inject 共享一般数据,轻轻松松垮多级组件的数据传递（不限层级,能够说是长处也能够说是缺陷,由于命名规则稍有不规范就会显得V 4 * –数据保护性降低bug满w B d I天飞,层级过深的时候也不是很直1 ! c N ]观）
  provide() 和 inject() 能够完成嵌套组件之间的数据传递。父级组件中运用 provide() 函数向下传递数据；子级组件中运用 inject() 获取上层传递过来的数据

1 (父组件传值子、孙子组件)

Achild= j 9.vue 孙子组件

 <tV f Q v , x 4 lemplate>
<sectZ b a g , wion>
<divB _ I / V>孙子组件<u E 5 P 6 B g ! U/div>
<img style="width:50px;height:50px" :src="pic"/>
</section>
</template>
<script&u $ H V W R G D Ugt;
import { inject } from 'vue'
export default {
set2 R 3 v |up() {
//A组件获取父组件传递过来的英俊头像数据
cog Y ) U c %nst pic = inject('pic')
return {pic}
},
};
</script>_ *  D * d n

A.vue 子组件

<template>
<sF G L , 4 Z /ection>
<div>子组件</div>
<com-achild/>
</section&gR { ` e ~ o D K ut;
</tem^ ) ` n G . E @plate>
<script>
im x 0 s J 3 tport ComO ~ 8Achild from "R 6 ) 9 b  )./compo I F w } &onents/Achilp c m d * m Z L ed.vue";
export default {
components:{
Cq L ZomAchi A n  ) , { ild,
},
};
</script>

App.vue 根组件

<templf / - 9 u K Oate>
<section>
<com-a/>
</section>
</tem) 3 } @ S - nplate>
import ComA from ".o : e : B Z/components/A* ( = q ] 1 Q l q.vue";
impok z 3rt {provide,ref} from * v W h"vue";T = w
const pic='https://dss3.bdstatic.k j e 1 5 8 hcom/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1460 O X  G H ! P1286262,42768279? ` r W D P Z % P7&fm=26&gp=0.jpg'
export default {
components:{
ComA,
},
se+ 3 L ;tup() {
//父组件冒泡共享数据pic
provide(# 7  v X'pic',pic )
//也支撑传递呼应式数据
const piH K f B ~ o O 5c =h b  F Q F O ( re5 ? O u  if('pic');
provide('pic',pic){ w ^ z 3 ] ! u
},
};

• (9) ref 组件实例获取

App.vue

<template>
<section>
<com-a ref="comRef"/>
</section& Q !gt;
</template>

import { ref,onMounted } from "vue";
import ComA from "./components/A.vue";
export defaud B 2 e 5lt {
components:{
ComA,
},
setup() {
const comRef = re . ; p K 4 S )f(null);
//需求在domx渲染类型的生命周期后运用6 o 4 S . Q H B
onMounted(() =7 % : q Y ! L> {
//获取子组件实例，调用其内部函数
ct / a # 9 t 1 9onsole.log(comRef.value.getName())
})2 6 v M
retup w g V L M ]rn {
comRef
};
},
};

子组件A.vue

&lZ } A ot;template>
<section>
我是子组件
</section>
</template>
export default {
setup(){
//子组件中的函数
const getName=()=>{
return "我是测试数据"
}
return{
getName
}
}
};

• (10) 高档反响性API
  customRef: 这个是真的香，创立一个能够操控其get set触发更新的引用目标，回来一个呼应式的ref目标
  markRaw:符号一个目标，使其永久不会转化为署理。回来目标本身

App.vue

<template>
<section>
轻轻松松完成防抖
{{text}}
<inC V + b e c qput v-model="text"/>
</section>
</template>

import { customRef } from "vue";
//只需求回来一个呼应R P } wef目标，可自界说其get set
const useDebounce=(value, delay = 10000)=>{//10000秒之后才会更新text的值
retur i y j / @ ) 6 =rn customRef(W ) m W 9 ( d i (track, td l f i ; Trigger) => {
let timeout
return {
get() {
track()//有必要调用次函数才会触发更新
return value
},
set(newValue) {
clearTimeout(timeout)
timeout = s` ~ ? [ } `etTimeout(() =&g% a vt; {
value = neo } F % B 3 ~wValue
trigger()//有必要调用次函数才会触发更新
}, deW B i K 4 (l] z Bay)
}
}
})
}
export default {
setup() {E Q ] _ m R `
return {
text:useDebounce()
};
},
};

- (11) 高档反响性API

mau – Z ` ? 4 ZrkRaw:符号一个目标，使其永久不会转化为署理。回来目标本身
shallowRef：创立一个引用来盯梢其自身的.value@ V ; p 骤变，但不会使其值具有反响性（意思便是）

App.vue

<template>
<) g g F 0 x 3;section></sectio! T Qn>
</template>

import { markRaw } from "vue";
export defX 5 7 D =ault {
setup() {
const. r U ( & P Q 1 - foo = markRaw({
neY , Msted:true
})
const bar = reactive({
nested: foo.nested
})
console.log(bar)
console.log(foo)
},
};

foo目标未被署理，最常见的运用场景便是大数据的列表页 ; o面，列表数据不会纯展示性质的，不会涉及到修正，也就没必要去深度署理了。其B [ |实和冻住目标差不多，理解其意思依据具` t t体场景运用即可，跳过署理转化能够提高性能

第一天：浅谈vue3.0、初始化项目之：Hello World Vue3.0

第三天：vue3怎么完成逻辑复用

原创不易，支撑请点赞、转发