开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情
生命周期对比
beforeCreate created ----- setup()
beforeMount -------------- onBeforeMoount
mounted ------------------- onMounted
beforeUpdate -------------- onBeforeUpdate
updated -------------------- onUpdated
beforeDestroy -------------- onBeforeUnmount
destroyed ------------------- onUnmounted
errorCaptured --------------- onErrorCaptured
toRefs
将响应式对象中所有属性包装为ref对象, 并返回包含这些ref对象的普通对象
//toRefs可以把一个响应式对象转换成普通对象, 该普通对象的每一个property 都是一个ref
const state = reactive({
name: 'zs',
age: 41
})
const state1 = toRefs(state)
return {
...state //不是响应式数据了 --->>{name:'zs',age" 41}
}
ref获取元素
利用ref函数获取组件中的标签元素, 让输入框自动获取焦点
setup() {
const inputRef =ref<HTMLElement|null>(null)
onMounted(() => {
inputRef.value && inputRef.value.focus()
})
return {
inputRef
}
}
hook封装ajax请求
自定义hook函数 使用vue3的组合api封装可复用的功能函数 自定义的hook的作用类似于vue2中的minix技术
import { ref } from 'vue';
import axios from 'axios';
//发送ajax的请求
export default function (url: string) {
//加载的状态
const loading = ref(true);
//请求成功的数据
const data = ref(null);
//错误信息
const errorMsg = ref('');
//发送请求
axios.get(url).then(res => {
//改变加载状态
loading.value = false;
data.value = res.data
}).catch(error => {
//改变加载状态
loading.value = false;
errorMsg.value = error.message || '错误信息'
})
}
//页面
//定义接口,约束对象的类型
interface AddressData {
id:number,
address: string,
distance: string
}
interface ProductsData {
id: string,
title: string,
price: number
}
import useRequest form './useRequest'
const {loading, data, errorMsg} = useRequest('请求地址')
const {loading, data, errorMsg} = useRequest('请求地址')
//监视
watch(data, () => {
if(data.value) {
console.log(data.value.length)
}
})
监视watchEffect
不需要配置immediate,本身默认就会进行监视,(默认执行一次)
watchEffect(() => {
fullName.value = user.firstName + '_' + user.lastName
//监听fullName的数据,改变firstName和lastName
const names = fullName3.value.split('_')
user.firstName = names[0]
user.lastName = names[1]
})
浅响应式shallowReactive与shallowRef
shallowReactive 只处理了对象内最外层属性的响应式(也就是响应式)
shallowRef 只处理了value的响应式, 不会对对象的reactive处理
一般情况下使用ref和reactive
如果一个对象数据,结构比较深,但是变化时,只是外层属性变化 ,则使用shallowReactive
如果一个对象数据,后面会产生新的对象来天花 shallowRef
