Vue3.2 语法基础详解( 二 ) _Vue3.2

#6.2 监听引用数据类型单一数据源<script setup>import {reactive, ref, watch} from 'vue'let user = reactive({name:'张三',age:14}) //监听器watch(()=>user.name,(newVal,oldVal)=>{console.log('对象user中的name属性发生了变化..',newVal);})</script>#6.3 监听引用数据类型多数据源[深度监听]<template><div><button @click="addNum()"> 添加随机数</button><div v-for="item in nums" :key="item">{{ item }}</div></div></template><script setup>import { reactive, ref, watch } from 'vue'let nums = reactive([]);//添加随机数const addNum = () => {let num = Math.ceil(Math.random() * 100);nums.push(num);}//监听数组变化-深度监听watch(()=>nums,(newVal,oldVal)=>{console.log('nums数组发生了变化..',newVal);},{deep:true})</script>#7.生命周期 vue2
vue3.0
vue3.2
备注
beforeCreate

setup
组件创建之前可以获取顶级实例对象
created

setup
组件创建完成，可以获取变量
beforeMount

onBeforeMount
挂载前，VNdom创建完成，真实dom未渲染
mounted

onMounted
挂载完成，真实dom创建完成，可以获取dom
beforeUpdate

onBeforeUpdate
dom更新前触发
updated

onUpdated
dom更新完成触发
beforedestroy，destroyed
beforeUnmount
onBeforeUnmount
组件卸载后触发所有的挂载的数据子组件全部卸载后触发

errorCaptured
onErrorCaptured
在捕获一个来自后代组件的错误时被调用

renderTracked
onRenderTracked
跟踪虚拟 DOM 重新渲染时调用

renderTriggered
onRenderTriggered
当虚拟 DOM 重新渲染被触发时调用
activated
activated
onActivated
缓存组件激活时调用
deactivated
deactivated
onDeactivated
缓存组件失活时调用
<template><div><div class="box"></div></div></template><script setup>import { onMounted } from 'vue';//生命周期钩子监听onMounted(()=>{console.log(document.querySelector('.box')); //可以获取dom})</script>#8.组件使用

创建 src/components/Son.vue
App.vue中导入并使用该组件
vue3.2 中当我们导入子组件时，setup语法糖会自动去注册该组件，所以注册语句不用写了。

<template><div><son></son></div><script setup>import Son from './components/Son.vue'</script>#9.组件通信#9.1 父传子 defineProps

父组件

<template><div><Son class="box" title="我是父组件传递的标题" :likes="likes"></Son></div></template><script setup>import Son from './components/Son.vue'let likes = ['张三','李四']</script>

子组件

<script setup>const props=defineProps({title:{type:String,default:''},likes:{type:Array,default:()=>[]}})</script>#9.2 子传父 defineEmits

子组件

<template><div><button @click="sendData">传递数据</button></div></template><script setup>//定义自定义事件const emit = defineEmits(['send'])//自己的事件执行函数const sendData = https://www.isolves.com/it/cxkf/qd/2022-08-09/() => {//执行自定义事件emit('send', '我是儿子组件传递的数据')}

父组件

<template><div><Son class="box"@send="getData" ></Son></div></template><script setup>import Son from './components/Son.vue'//触发自定义事件-接收数据const getData = https://www.isolves.com/it/cxkf/qd/2022-08-09/(data)=>{console.log(data);}