一眯杏、setup
- setup函數(shù)可以被理解為函數(shù)的入口
- setup函數(shù)接收兩個參數(shù)：
props匾乓、context(包含attrs录煤、slots鳄厌、emit) - setup函數(shù)是處于生命周期函數(shù)
beforeCreate之前執(zhí)行，執(zhí)行setup函數(shù)時組件實例并未被創(chuàng)建妈踊，this不指向vue實例 - 與模板一起使用：須在
ref或reactive中聲明然后return出去使用才是響應式的 - 使用渲染函數(shù)：可以返回一個渲染函數(shù)了嚎，該函數(shù)可以直接使用在同一作用域中聲明的響應式狀態(tài)
二、setup第一個參數(shù)props
props 是響應式的，當傳入新的 prop 時歪泳，它將被更新萝勤。
export default {
props: {
title: String
},
setup(props) {
console.log(props.title)
}
}
因為 props 是響應式的，不能使用 ES6 解構呐伞，會消除 prop 的響應性敌卓。
如果需要解構 prop，可以在 setup 函數(shù)中使用 [toRefs]函數(shù)來完成此操作：
setup(props) {
const { title } = toRefs(props)
return{ title }
}
三伶氢、setup第二個參數(shù)context
context 是一個普通 JavaScript 對象趟径，暴露了其它可能在 setup 中有用的值
setup(props, context) {
// Attribute (非響應式對象，等同于 $attrs)
console.log(context.attrs)
// 插槽 (非響應式對象癣防，等同于 $slots)
console.log(context.slots)
// 觸發(fā)事件 (方法蜗巧，等同于 $emit)
console.log(context.emit)
// 暴露公共 property (函數(shù))
console.log(context.expose)
}
context不是響應的，可以用ES6進行解構
setup(props, { attrs, slots, emit, expose }) {
...
}
四蕾盯、ref
引入
import { ref } from "vue";
setup(){
const arr = ref(["小美", "小紅", "小藍", "小綠"]);
const str = ref("1小美");
const onBtn = function(index: number) {
str.value = index + 1 + arr.value[index];
};
return { arr, onBtn, str };
}
注意：ref引入的值需要使用.value才能拿到
使用
<template>
<button v-for="(item, index) in arr" :key="index" @click="onBtn(index)">
{{ index + 1 }}:{{ item }}
</button>
<div>您點擊了：{{ str }}</div>
<button @click="complete">完成</button>
</template>
五惧蛹、reactive
reactive和ref的作用差不多，都是引入響應式數(shù)據(jù)刑枝，但是reactive看起來結(jié)構更加清晰
import { reactive} from "vue";
const obj: type = reactive({
arr: ["小美", "小紅", "小藍", "小綠"],
str: "",
onBtn: (index): void => {
obj.str = index + 1 + obj.arr[index];
}
});
const obj1 = toRefs(obj);
return { ...obj1 };
// 未使用toRefs時，不能用ES6結(jié)構 老老實實寫obj.arr...
其實在工作上為了嚴謹不能讓TS自己猜類型迅腔，需要定義類型
interface type {
arr: Array<string>;
str: string;
// onBtn: (index: number):void => {};錯誤寫法
onBtn: (index: number) => void
}
六装畅、watch
1、監(jiān)聽ref的值
const xxx = ref("")
watch(xxx, (newV, oldV) => {
console.log(newV, oldV, 88);
});
2沧烈、監(jiān)聽reactive的值
const obj= reactive({
str: "",
})
watch(() => obj.str, (newV, oldV) => {});
原因：vue無法監(jiān)聽對象內(nèi)部的值掠兄，需要將值return出去監(jiān)聽
3、監(jiān)聽多個值
watch([xxx,() => obj.str], (newV, oldV) => {
console.log(newV[0],newV[1])
console.log(oldV[0],oldV[1])
});
七锌雀、 vue3的生命周期鉤子
setup里的生命周期鉤子蚂夕，同級別中比vue2的先執(zhí)行
onBeforeMount(() => {});
image.png
八、調(diào)試API
// 主要用于調(diào)試 打出全部的值
onRenderTracked(event => {
console.log(event);
});
// 主要用于調(diào)試 打出變化的新舊值
onRenderTriggered(event => {
console.log(event);
});
九腋逆、模塊化
一個簡單的模塊化的時間
<template>
<button @click="tiemf">開始</button>
<div>{{ time }}</div>
</template>
<script lang="ts">
import { time, tiemf } from "./useTs";
export default {
setup() {
return { time, tiemf };
}
};
</script>
import { ref } from "vue";
const time = ref("00:00:00")
const tiemf = () =>{
setInterval(() => {
const hour = new Date().getHours();
const minute = new Date().getMinutes();
const sec = new Date().getSeconds();
time.value = hour + "：" + minute + "：" +sec;
}, 1000);
}
export {time,tiemf}
