Vue3的基础，常用知识！

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)