Vue3 组件使用速记,监听,计算属性使用基础。
Vue 跨組件通信
inject 接收 provide 传递
父传子
defineProps({
数据名:类型
}) 接收
子传父
defineEmits([‘事件名’])传递
生命周期使用
监听
单个监听
直接写监听的数据,后面一个函数
watch(num, () => {
console.log('监听');
console.log(num[0].title);
})
多个监听
在数组中写所有要监听的数据,后面一个函数
watch([num,arr,sj,], () => {
console.log('监听');
console.log(num[0].title);
})
深度监听
函数尾部{}开启deep为true 深度监听
watch([num], () => {
console.log('监听');
console.log(num[0].title);
}, {
deep: false
})
计算属性
计算属性只有数据发生改变时才会触发,可以配合定时器来改变数据实现需要的效果。
定时器使用setTimeout函数和执行时机。
let num = computed(() => {
return arr.value.filter(res => res > 100)
})
//定时器
setTimeout(() => {
arr.value.push(688)
}, 1000)