一、setup
- setup函数可以被理解为函数的入口
- setup函数接收两个参数：
props、context(包含attrs、slots、emit) - setup函数是处于生命周期函数
beforeCreate之前执行，执行setup函数时组件实例并未被创建，this不指向vue实例 - 与模板一起使用：须在
ref或reactive中声明然后return出去使用才是响应式的 - 使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态
二、setup第一个参数props
props 是响应式的，当传入新的 prop 时，它将被更新。
export default {
props: {
title: String
},
setup(props) {
console.log(props.title)
}
}
因为 props 是响应式的，不能使用 ES6 解构，会消除 prop 的响应性。
如果需要解构 prop，可以在 setup 函数中使用 [toRefs]函数来完成此操作：
setup(props) {
const { title } = toRefs(props)
return{ title }
}
三、setup第二个参数context
context 是一个普通 JavaScript 对象，暴露了其它可能在 setup 中有用的值
setup(props, context) {
// Attribute (非响应式对象，等同于 $attrs)
console.log(context.attrs)
// 插槽 (非响应式对象，等同于 $slots)
console.log(context.slots)
// 触发事件 (方法，等同于 $emit)
console.log(context.emit)
// 暴露公共 property (函数)
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的作用差不多，都是引入响应式数据，但是reactive看起来结构更加清晰
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结构 老老实实写obj.arr...
其实在工作上为了严谨不能让TS自己猜类型，需要定义类型
interface type {
arr: Array<string>;
str: string;
// onBtn: (index: number):void => {};错误写法
onBtn: (index: number) => void
}
六、watch
1、监听ref的值
const xxx = ref("")
watch(xxx, (newV, oldV) => {
console.log(newV, oldV, 88);
});
2、监听reactive的值
const obj= reactive({
str: "",
})
watch(() => obj.str, (newV, oldV) => {});
原因：vue无法监听对象内部的值，需要将值return出去监听
3、监听多个值
watch([xxx,() => obj.str], (newV, oldV) => {
console.log(newV[0],newV[1])
console.log(oldV[0],oldV[1])
});
七、 vue3的生命周期钩子
setup里的生命周期钩子，同级别中比vue2的先执行
onBeforeMount(() => {});
image.png
八、调试API
// 主要用于调试 打出全部的值
onRenderTracked(event => {
console.log(event);
});
// 主要用于调试 打出变化的新旧值
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}
