前置介紹
在 vue3.2 中置逻，我們只需在script標(biāo)簽中添加setup舟奠。就可以做到蔚携，組件只需引入不用注冊(cè)，屬性和方法也不用 return 才能于 template 中使用狼速，也不用寫setup函數(shù)琅锻，也不用寫export default ，甚至是自定義指令也可以在我們的template中自動(dòng)獲得。
本次我們的學(xué)習(xí)也將在 setup 語法糖下進(jìn)行恼蓬。
環(huán)境搭建
npm init vue@latest
使用工具
- <script setup lang="ts"> + VSCode + Volar
- 安裝 Volar 后惊完，注意禁用 vetur
ref 和 reactive
- ref: 用來給基本數(shù)據(jù)類型綁定響應(yīng)式數(shù)據(jù)，訪問時(shí)需要通過 .value 的形式处硬， tamplate 會(huì)自動(dòng)解析,不需要 .value
- reactive: 用來給 復(fù)雜數(shù)據(jù)類型 綁定響應(yīng)式數(shù)據(jù)小槐，直接訪問即可
- ref其實(shí)也是內(nèi)部調(diào)用來reactive實(shí)現(xiàn)的
<template>
<div>
<p>{{title}}</p>
<h4>{{userInfo}}</h4>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
type Person = {
name: string;
age: number;
gender?: string;
};
const title = ref<string>("彼時(shí)彼刻，恰如此時(shí)此刻");
const userInfo = reactive<Person>({
name: '樹哥',
age: 18
})
</script>
toRef荷辕、toRefs凿跳、toRaw
toRef 如果原始對(duì)象是非響應(yīng)式的,數(shù)據(jù)會(huì)變,但不會(huì)更新視圖
<template>
<div>
<button @click="change">按鈕</button>
{{state}}
</div>
</template>
<script setup lang="ts">
import { reactive, toRef } from 'vue'
const obj = {
name: '樹哥',
age: 18
}
const state = toRef(obj, 'age')
const change = () => {
state.value++
console.log('obj:',obj,'state:', state);
}
</script>
可以看到，點(diǎn)擊按鈕疮方，當(dāng)原始對(duì)象是非響應(yīng)式時(shí)控嗜，使用toRef 的數(shù)據(jù)改變，但是試圖并沒有更新
<template>
<div>
<button @click="change">按鈕</button>
{{state}}
</div>
</template>
<script setup lang="ts">
import { reactive, toRef } from 'vue'
const obj = reactive({
name: '樹哥',
age: 18
})
const state = toRef(obj, 'age')
const change = () => {
state.value++
console.log('obj:', obj, 'state:', state);
}
</script>
當(dāng)我們把 obj 用 reactive 包裹骡显，再使用 toRef疆栏，點(diǎn)擊按鈕時(shí)，可以看到視圖和數(shù)據(jù)都變了
- toRef返回的值是否具有響應(yīng)性取決于被解構(gòu)的對(duì)象本身是否具有響應(yīng)性惫谤。響應(yīng)式數(shù)據(jù)經(jīng)過toRef返回的值仍具有響應(yīng)性壁顶，非響應(yīng)式數(shù)據(jù)經(jīng)過toRef返回的值仍沒有響應(yīng)性。
toRefs
toRefs相當(dāng)于對(duì)對(duì)象內(nèi)每個(gè)屬性調(diào)用toRef溜歪，toRefs返回的對(duì)象內(nèi)的屬性使用時(shí)需要加.value,主要是方便我們解構(gòu)使用
<template>
<div>
<button @click="change">按鈕</button>
name--{{name}}---age{{age}}
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue'
const obj = reactive({
name: '樹哥',
age: 18
})
let { name, age } = toRefs(obj)
const change = () => {
age.value++
name.value = '張麻子'
console.log('obj:', obj);
console.log('name:', name);
console.log('age:', age);
}
</script>
簡(jiǎn)單理解就是批量版的toRef,(其源碼實(shí)現(xiàn)也正是通過對(duì)象循環(huán)調(diào)用了toRef)
toRaw
將響應(yīng)式對(duì)象修改為普通對(duì)象
<template>
<div>
<button @click="change">按鈕</button>
{{data}}
</div>
</template>
<script setup lang="ts">
import { reactive, toRaw } from 'vue'
const obj = reactive({
name: '樹哥',
age: 18
})
const data = toRaw(obj)
const change = () => {
data.age = 19
console.log('obj:', obj, 'data:', data);
}
</script>
數(shù)據(jù)能變化若专，視圖不變化(失去響應(yīng)式)
computed
<template>
<div>
<p>{{title}}</p>
<h4>{{userInfo}}</h4>
<h1>{{add}}</h1>
</div>
</template>
<script setup lang="ts">
import { ref, reactive,computed } from "vue";
const count = ref(0)
// 推導(dǎo)得到的類型：ComputedRef<number>
const add = computed(() => count.value +1)
</script>
watch
vue3 watch 的作用和 Vue2 中的 watch 作用是一樣的，他們都是用來監(jiān)聽響應(yīng)式狀態(tài)發(fā)生變化的痹愚，當(dāng)響應(yīng)式狀態(tài)發(fā)生變化時(shí)富岳，就會(huì)觸發(fā)一個(gè)回調(diào)函數(shù)。
watch(data,()=>{},{})
參數(shù)一拯腮，監(jiān)聽的數(shù)據(jù)
參數(shù)二窖式，數(shù)據(jù)改變時(shí)觸發(fā)的回調(diào)函數(shù)（newVal,oldVal）
參數(shù)三，options配置項(xiàng)动壤，為一個(gè)對(duì)象 { immediate:true,deep:true}
1.監(jiān)聽ref定義的一個(gè)響應(yīng)式數(shù)據(jù)
<script setup lang="ts">
import { ref, watch } from "vue";
const str = ref('彼時(shí)彼刻')
//3s后改變str的值
setTimeout(() => { str.value = '恰如此時(shí)此刻' }, 3000)
watch(str, (newV, oldV) => {
console.log(newV, oldV) //恰如此時(shí)此刻 彼時(shí)彼刻
})
</script>
2.監(jiān)聽多個(gè)ref (這時(shí)候的寫法變?yōu)閿?shù)組的形式)
<script setup lang="ts">
import { ref, watch } from "vue";
let name = ref('樹哥')
let age = ref(18)
//3s后改變值
setTimeout(() => {
name.value = '我叫樹哥'
age.value = 19
}, 3000)
watch([name, age], (newV, oldV) => {
console.log(newV, oldV) // ['我叫樹哥', 19] ['樹哥', 18]
})
</script>
3.監(jiān)聽Reactive定義的響應(yīng)式對(duì)象
<script setup lang="ts">
import { reactive, watch } from "vue";
let info = reactive({
name: '樹哥',
age: 18
})
//3s后改變值
setTimeout(() => {
info.age = 19
}, 3000)
watch(info, (newV, oldV) => {
console.log(newV, oldV)
})
</script>
當(dāng) watch 監(jiān)聽的是一個(gè)響應(yīng)式對(duì)象時(shí)萝喘，會(huì)隱式地創(chuàng)建一個(gè)深層偵聽器，即該響應(yīng)式對(duì)象里面的任何屬性發(fā)生變化琼懊，都會(huì)觸發(fā)監(jiān)聽函數(shù)中的回調(diào)函數(shù)阁簸。即當(dāng) watch 監(jiān)聽的是一個(gè)響應(yīng)式對(duì)象時(shí)，默認(rèn)開啟 deep：true
4.監(jiān)聽reactive 定義響應(yīng)式對(duì)象的單一屬性
- 錯(cuò)誤寫法:
<script setup lang="ts">
import { reactive, watch } from "vue";
let info = reactive({
name: '樹哥',
age: 18
})
//3s后改變值
setTimeout(() => {
info.age = 19
}, 3000)
watch(info.age, (newV, oldV) => {
console.log(newV, oldV)
})
</script>
可以看到控制臺(tái)出現(xiàn)警告
[Vue warn]: Invalid watch source: 18 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.
at <Index>
at <App>
如果我們非要監(jiān)聽響應(yīng)式對(duì)象中的某個(gè)屬性哼丈，我們可以使用 getter 函數(shù)的形式,即將watch第一個(gè)參數(shù)修改成一個(gè)回調(diào)函數(shù)的形式
- 正確寫法:
// 其他不變
watch(()=>info.age, (newV, oldV) => {
console.log(newV, oldV) // 19 18
})
5.監(jiān)聽reactive定義的 引用數(shù)據(jù)
<script setup lang="ts">
import { reactive, watch } from "vue";
let info = reactive({
name: '張麻子',
age: 18,
obj: {
str: '彼時(shí)彼刻启妹，恰如此時(shí)此刻'
}
})
//3s后改變s值
setTimeout(() => {
info.obj.str = 'to be or not to be'
}, 3000)
// 需要自己開啟 deep:true深度監(jiān)聽,不然不發(fā)觸發(fā) watch 的回調(diào)函數(shù)
watch(() => info.obj, (newV, oldV) => {
console.log(newV, oldV)
}, {
deep: true
})
</script>
WatchEffect
會(huì)立即執(zhí)行傳入的一個(gè)函數(shù)荷逞，同時(shí)響應(yīng)式追蹤其依賴啄清，并在其依賴變更時(shí)重新運(yùn)行該函數(shù)曲横。（有點(diǎn)像計(jì)算屬性）
如果用到 a 就只會(huì)監(jiān)聽 a, 就是用到幾個(gè)監(jiān)聽?zhēng)讉€(gè) 而且是非惰性,會(huì)默認(rèn)調(diào)用一次
<script setup lang="ts">
import { ref, watchEffect } from "vue";
let num = ref(0)
//3s后改變值
setTimeout(() => {
num.value++
}, 3000)
watchEffect(() => {
console.log('num 值改變：', num.value)
})
</script>
可以在控制臺(tái)上看到睦刃，第一次進(jìn)入頁面時(shí)，打印出num 值改變：0,三秒后檬输，再次打印num 值改變：1
- 停止監(jiān)聽
當(dāng) watchEffect 在組件的 setup() 函數(shù)或生命周期鉤子被調(diào)用時(shí)照瘾，偵聽器會(huì)被鏈接到該組件的生命周期，并在組件卸載時(shí)自動(dòng)停止丧慈。
但是我們采用異步的方式創(chuàng)建了一個(gè)監(jiān)聽器析命，這個(gè)時(shí)候監(jiān)聽器沒有與當(dāng)前組件綁定，所以即使組件銷毀了逃默，監(jiān)聽器依然存在鹃愤。
這個(gè)時(shí)候我們可以顯式調(diào)用停止監(jiān)聽
<script setup lang="ts">
import { watchEffect } from 'vue'
// 它會(huì)自動(dòng)停止
watchEffect(() => {})
// ...這個(gè)則不會(huì)！
setTimeout(() => {
watchEffect(() => {})
}, 100)
const stop = watchEffect(() => {
/* ... */
})
// 顯式調(diào)用
stop()
</script>
- 清除副作用（onInvalidate）
watchEffect 的第一個(gè)參數(shù)——effect函數(shù)——可以接收一個(gè)參數(shù)：叫onInvalidate完域，也是一個(gè)函數(shù)昼浦，用于清除 effect 產(chǎn)生的副作用
就是在觸發(fā)監(jiān)聽之前會(huì)調(diào)用一個(gè)函數(shù)可以處理你的邏輯，例如防抖
import { ref, watchEffect } from "vue";
let num = ref(0)
//3s后改變值
setTimeout(() => {
num.value++
}, 3000)
watchEffect((onInvalidate) => {
console.log(num.value)
onInvalidate(() => {
console.log('執(zhí)行');
});
})
控制臺(tái)依次輸出：0 => 執(zhí)行 => 1
- 配置選項(xiàng):
watchEffect的第二個(gè)參數(shù)筒主，用來定義副作用刷新時(shí)機(jī)，可以作為一個(gè)調(diào)試器來使用
flush （更新時(shí)機(jī)）：
1鸟蟹、pre：組件更新前執(zhí)行
2乌妙、sync：強(qiáng)制效果始終同步觸發(fā)
3、post：組件更新后執(zhí)行
<script setup lang="ts">
import { ref, watchEffect } from "vue";
let num = ref(0)
//3s后改變值
setTimeout(() => {
num.value++
}, 3000)
watchEffect((onInvalidate) => {
console.log(num.value)
onInvalidate(() => {
console.log('執(zhí)行');
});
}, {
flush: "post", //此時(shí)這個(gè)函數(shù)會(huì)在組件更新之后去執(zhí)行
onTrigger(e) { //作為一個(gè)調(diào)試工具建钥，可在開發(fā)中方便調(diào)試
console.log('觸發(fā)', e);
},
})
</script>
生命周期
和 vue2 相比的話藤韵，基本上就是將 Vue2 中的beforeDestroy名稱變更成beforeUnmount; destroyed 表更為 unmounted；然后用setup代替了兩個(gè)鉤子函數(shù) beforeCreate 和 created熊经；新增了兩個(gè)開發(fā)環(huán)境用于調(diào)試的鉤子
1.父組件傳參
<template>
<Children :msg="msg" :list="list"></Children>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import Children from './Children.vue'
const msg = ref('hello 啊泽艘，樹哥')
const list = reactive<number[]>([1, 2, 3])
</script>
- 在 script setup 中，引入的組件會(huì)自動(dòng)注冊(cè)镐依，所以可以直接使用匹涮，無需再通過components進(jìn)行注冊(cè)
2.子組件接收值
defineProps 來接收父組件傳遞的值， defineProps是無須引入的直接使用即可
<template>
<div>
<p>msg：{{msg}}</p>
<p>list：{{list}}</p>
</div>
</template>
<script setup lang="ts">
defineProps<{
msg: string,
list: number[]
}>()
</script>
- 使用 withDefaults 定義默認(rèn)值
<template>
<div>
<p>msg：{{msg}}</p>
<p>list：{{list}}</p>
</div>
</template>
<script setup lang="ts">
type Props = {
msg?: string,
list?: number[]
}
// withDefaults 的第二個(gè)參數(shù)便是默認(rèn)參數(shù)設(shè)置槐壳，會(huì)被編譯為運(yùn)行時(shí) props 的 default 選項(xiàng)
withDefaults(defineProps<Props>(), {
msg: '張麻子',
list: () => [4, 5, 6]
})
</script>
子組件向父組件拋出事件
defineEmits
子組件派發(fā)事件
<template>
<div>
<p>msg：{{msg}}</p>
<p>list：{{list}}</p>
<button @click="onChangeMsg">改變msg</button>
</div>
</template>
<script setup lang="ts">
type Props = {
msg?: string,
list?: number[]
}
withDefaults(defineProps<Props>(), {
msg: '張麻子',
list: () => [4, 5, 6]
})
const emits = defineEmits(['changeMsg'])
const onChangeMsg = () => {
emits('changeMsg','黃四郎')
}
</script>
子組件綁定了一個(gè)click 事件 然后通過defineEmits 注冊(cè)了一個(gè)自定義事件,點(diǎn)擊按鈕的時(shí)候然低，觸發(fā) emit 調(diào)用我們注冊(cè)的事件，傳遞參數(shù)
父組件接收
<template>
<Children :msg="msg" :list="list" @changeMsg="changeMsg"></Children>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import Children from './Children.vue'
const msg = ref('hello 啊务唐，樹哥')
const list = reactive<number[]>([1, 2, 3])
const changeMsg = (v: string) => {
msg.value = v
}
</script>
defineExpose 獲取子組件的實(shí)例和內(nèi)部屬性
在 script-setup 模式下雳攘，所有數(shù)據(jù)只是默認(rèn) return 給 template 使用，不會(huì)暴露到組件外枫笛，所以父組件是無法直接通過掛載 ref 變量獲取子組件的數(shù)據(jù)吨灭。
如果要調(diào)用子組件的數(shù)據(jù)，需要先在子組件顯示的暴露出來刑巧，才能夠正確的拿到喧兄，這個(gè)操作无畔，就是由 defineExpose 來完成。
子組件:
<template>
<p>{{name}}</p>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const name = ref('張麻子')
const changeName = () => {
name.value = '縣長'
}
// 將方法繁莹、變量暴露給父組件使用檩互，父組件才可通過 ref API拿到子組件暴露的數(shù)據(jù)
defineExpose({
name,
changeName
})
</script>
父組件
<template>
<div>
<child ref='childRef' />
<button @click="getName">獲取子組件中的數(shù)據(jù)</button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import child from './Child.vue'
// 子組件ref（TypeScript語法）
const childRef = ref<InstanceType<typeof child>>()
const getName = () => {
// 獲取子組件name
console.log(childRef.value!.name)
// 執(zhí)行子組件方法
childRef.value?.changeName()
// 獲取修改后的name
console.log(childRef.value!.name)
}
</script>
- 注意:
defineProps,defineEmits,defineExpose和withDefaults這四個(gè)宏函數(shù)只能在<script setUp>中使用, 他們不需要導(dǎo)入,會(huì)隨著<script setUp>的處理過程中一起被編譯
插槽
在 Vue2 的中一般中具名插槽和作用域插槽分別使用slot和slot-scope來實(shí)現(xiàn)，如：
父組件:
<template>
<div>
<p style="color:red">父組件</p>
<Child ref='childRef'>
<template slot="content" slot-scope="{ msg }">
<div>{{ msg }}</div>
</template>
</Child>
</div>
</template>
<script lang="ts" setup>
import Child from './Child.vue'
</script>
子組件:
<template>
<div>child</div>
<slot name="content" msg="hello 啊咨演，樹哥!"></slot>
</template>
在 Vue3 中將slot和slot-scope進(jìn)行了合并統(tǒng)一使用闸昨，使用 v-slot， v-slot:slotName 簡(jiǎn)寫 #slotName
父組件
<template>
<div>
<p style="color:red">父組件</p>
<Child>
<template v-slot:content="{ msg }">
<div>{{ msg }}</div>
</template>
</Child>
</div>
</template>
<script lang="ts" setup>
import Child from './Child.vue'
</script>
<!-- 簡(jiǎn)寫 -->
<Child>
<template #content="{ msg }">
<div>{{ msg }}</div>
</template>
</Child>
- 實(shí)際上,v-slot 在 Vue2.6+ 的版本就可以使用薄风。
異步組件
通過defineAsyncComponent()方法異步加載
<template>
<Children :msg="msg" :list="list" @changeMsg="changeMsg"></Children>
</template>
<script setup lang="ts">
import { ref, reactive,defineAsyncComponent } from 'vue'
// import Children from './Children.vue'
const Children = defineAsyncComponent(() => import('./Children.vue'))
</script>
Suspense
Suspense允許應(yīng)用程序在等待異步組件時(shí)渲染一些其他內(nèi)容,在vue2中,必須使用條件判斷,例如v-if饵较、v-else等,來檢查數(shù)據(jù)是否已加載并顯示一些其他內(nèi)容;但是,在vue3新增了Suspense組件了,就不必跟蹤何時(shí)加載數(shù)據(jù)并呈現(xiàn)相應(yīng)的內(nèi)容,
這是一個(gè)帶插槽的組件,只是它的插槽指定了default和fallback兩種狀態(tài)
Suspense使用:
1.使用<Suspense></Suspense>包裹所有異步組件相關(guān)代碼
2.<temalate v-slot:default></template>插槽包裹異步組件
3.<template v-slot:fallback></template>插槽包裹異步組件渲染之前的內(nèi)容
<template>
<Suspense>
<template #default>
<!-- 異步組件-默認(rèn)渲染的頁面 -->
<Children :msg="msg" :list="list" @changeMsg="changeMsg"></Children>
</template>
<template #fallback>
<!-- 頁面還沒加載出來展示的頁面 -->
<div>loading...</div>
</template>
</Suspense>
</template>
<script setup lang="ts">
import { ref, reactive, defineAsyncComponent } from 'vue'
const Children = defineAsyncComponent(() => import('./Children.vue'))
</script>
Teleport傳送組件
Teleport是一種能夠獎(jiǎng)我們的模板渲染到指定DOM節(jié)點(diǎn),不收負(fù)父級(jí)style,v-show等屬性的影響,但data,prop數(shù)據(jù)依舊能夠共用
- 主要解決的問題:
因?yàn)門eleport節(jié)點(diǎn)掛在到其他指定的DOM節(jié)點(diǎn)下,完全不受父級(jí)style樣式影響
使用:通過to屬性插入到指定元素位置,如body,html,自定義className等等
<template>
<!-- 插入至 body -->
<Teleport to="body">
<Children></Children>
</Teleport>
<!-- 默認(rèn) #app 下 -->
<Children></Children>
</template>
<script lang="ts" setup>
// import Children from './Children.vue'
import { defineAsyncComponent } from 'vue'
const Children = defineSsyncComponent(() => import('./components/children.vue'))
</script>
keep-alive緩存組件
- 作用和vue2一樣,只是生命周期名稱有所改變
- 初次進(jìn)入時(shí):onMounted > onActivated
- 退出后觸發(fā) deactivated
- 再次進(jìn)入:只會(huì)觸發(fā)onActivated
- 事件掛載的方法等,只執(zhí)行一次的onMounted中,組件每次進(jìn)入執(zhí)行的方法放在onActivated中
provide/inject
- provide可以在祖先組件中指定我們想要提供給后代組件的屬性和方法,二在任何后代組件中,我們都可以使用inject來接收provide提供的方法和屬性
- inject來接收provide提供的方法和數(shù)據(jù)
父組件:
<template>
<Children></Children>
</template>
<script setup lang="ts">
import { ref, provide } from 'vue'
import Children from "./Children.vue"
const msg = ref('hello 啊，樹哥')
provide('msg', msg)
</script>
子組件:
<template>
<div>
<p>msg：{{msg}}</p>
<button @click="onChangeMsg">改變msg</button>
</div>
</template>
<script setup lang="ts">
import { inject, Ref, ref } from 'vue'
const msg = inject<Ref<string>>('msg',ref('hello霸饴浮循诉！'))
const onChangeMsg = () => {
msg.value = 'shuge'
}
</script>
v-model升級(jí)
v-model在vue3可以說是破壞式更新,改動(dòng)還是不少的
我們都知道,v-model是props和emit組合而成的語法糖,在vue3中v-model有以下改動(dòng):
1.變更: value =>modelValue
2.變更: update:input => update:modelValue
3.新增: 一個(gè)組件可以設(shè)置多個(gè)v-model
4.新增: 開發(fā)者可以自定義v-model修飾符
- v-bind的.sync修飾符和組件的model選項(xiàng)已移除
子組件:
<template>
<div>
<p>{{msg}}，{{modelValue}}</p>
<button @click="onChangeMsg">改變msg</button>
</div>
</template>
<script setup lang="ts">
type Props = {
modelValue: string,
msg: string
}
defineProps<Props>()
const emit = defineEmits(['update:modelValue', 'update:msg'])
const onChangeMsg = () => {
// 觸發(fā)父組件的值更新
emit('update:modelValue', '恰如此時(shí)此刻')
emit('update:msg', '彼時(shí)彼刻')
}
</script>
父組件:
<template>
// v-model:modelValue簡(jiǎn)寫為v-model
// 綁定多個(gè)v-model
<Children v-model="name" v-model:msg="msg"></Children>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Children from "./Children.vue"
const msg = ref('hello啊')
const name = ref('樹哥')
</script>
自定義指令
自定義指令的生命周期
- created 元素初始化的時(shí)候
- beforeMount 指令綁定到元素后調(diào)用 只調(diào)用一次
- mounted 元素插入到父級(jí)dom調(diào)用
- beforeUpdate 元素被更新之前調(diào)用
- update 這個(gè)周期方法被移除 改用updated
- beforeUnmount在元素被移除之前調(diào)用
- unmounted 指令被移除后調(diào)用 只調(diào)用一次
- 實(shí)現(xiàn)一個(gè)自定義拖拽指令
<template>
<div v-move class="box">
<div class="header"></div>
<div>
內(nèi)容
</div>
</div>
</template>
<script setup lang='ts'>
import { Directive } from "vue";
const vMove: Directive = {
mounted(el: HTMLElement) {
let moveEl = el.firstElementChild as HTMLElement;
const mouseDown = (e: MouseEvent) => {
//鼠標(biāo)點(diǎn)擊物體那一刻相對(duì)于物體左側(cè)邊框的距離=點(diǎn)擊時(shí)的位置相對(duì)于瀏覽器最左邊的距離-物體左邊框相對(duì)于瀏覽器最左邊的距離
console.log(e.clientX, e.clientY, "起始位置", el.offsetLeft);
let X = e.clientX - el.offsetLeft;
let Y = e.clientY - el.offsetTop;
const move = (e: MouseEvent) => {
el.style.left = e.clientX - X + "px";
el.style.top = e.clientY - Y + "px";
console.log(e.clientX, e.clientY, "位置改變");
};
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", move);
});
};
moveEl.addEventListener("mousedown", mouseDown);
},
};
</script>
<style >
.box {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
.header {
height: 20px;
background: black;
cursor: move;
}
</style>
自定義hooks
我們都知道在vue中有個(gè)東西叫mixins,他可以將多個(gè)組件中相同的邏輯抽離出來,實(shí)現(xiàn)一次寫代碼,多組件收益的效果
但是mixins的副作用就是引用的多了變量的來源就不清晰了,而且還會(huì)有變量來源不明確的問題,不利于閱讀,容易使代碼變得難以維護(hù)
- vue3的hook函數(shù)相當(dāng)于vue2的mixin,不同在于hooks是函數(shù)
- vue3的hook函數(shù)可以幫助我們提高代碼的復(fù)用性,讓我們能在不同的組件中都利用hooks函數(shù)
useWindowResize
我們來實(shí)現(xiàn)一個(gè)窗口改變時(shí)獲取寬高的hook
import { onMounted, onUnmounted, ref } from "vue";
function useWindowResize() {
const width = ref(0);
const height = ref(0);
function onResize() {
width.value = window.innerWidth;
height.value = window.innerHeight;
}
onMounted(() => {
window.addEventListener("resize", onResize);
onResize();
});
onUnmounted(() => {
window.removeEventListener("resize", onResize);
});
return {
width,
height
};
}
export default useWindowResize;
使用:
<template>
<h3>屏幕尺寸</h3>
<div>寬度：{{ width }}</div>
<div>高度：{{ height }}</div>
</template>
<script setup lang="ts">
import useWindowResize from "../hooks/useWindowResize.ts";
const { width, height } = useWindowResize();
</script>
style v-bind css變量注入
<template>
<span> style v-bind CSS變量注入</span>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const color = ref('red')
</script>
<style scoped>
span {
/* 使用v-bind綁定組件中定義的變量 */
color: v-bind('color');
}
</style>
Vue3使用TypeScript的正確姿勢(shì)
超極速的Vue3上手指北??
Vue3.0 新特性以及使用經(jīng)驗(yàn)總結(jié)
自定義指令directive
2022年了撇他，我才開始學(xué) typescript 茄猫，晚嗎？（7.5k字總結(jié)）
當(dāng)我們對(duì)組件二次封裝時(shí)我們?cè)诜庋b什么
vue 項(xiàng)目開發(fā)困肩，我遇到了這些問題
關(guān)于首屏優(yōu)化划纽，我做了哪些
