17_Vue高级监听器&生命周期&Vue组件&组件通信

文章目录

1. 数据监听器watch
2. Vue生命周期
3. Vue组件
4. Vue组件通信
Appendix

1. 数据监听器watch

首先watch需要单独引

import {watch} from 'vue'

watch函数监听ref响应式数据
- watch(监听的内容，监听行为)
- 监听行为默认为(newValue,oldValue)

let firstname = ref("")

watch(firstname,(newValue,oldValue)=>{
    console.log(`${oldValue}变为${newValue}`)
})

在这里插入图片描述

watch监听reactivate响应式数据

在这里插入图片描述

// watch监听reactive
watch(()=>lastname.name,(newValue,oldValue)=>{
  console.log(`${oldValue}=>${newValue}`)
})

在这里插入图片描述

watchEffect()监听所有响应式数据
最好用的一种监听

在这里插入图片描述

let fullname = ref("")
let firstname = ref("")
let lastname = reactive({
    name:""
})
watchEffect(
    ()=>{
        console.log(firstname.value)
        console.log(lastname.name)
    }
)

监听数据小结：

html标签中写插值表达式显示最终的内容
需要绑定的表单数据需要进行双向绑定v-model
script标签中只需要进行写监听函数即可
最好用的监听函数watchEffect

2. Vue生命周期

按以往Servlet的经验，Vue生命周期就是了解Vue执行哪几个任务，其生命流程

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码!

周期图解：

在这里插入图片描述

常见钩子函数
- onMounted() 注册一个回调函数，在组件挂载完成后执行。
- onUpdated() 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
- onUnmounted() 注册一个回调函数，在组件实例被卸载之后调用。
- onBeforeMount() 注册一个钩子，在组件被挂载之前被调用。
- onBeforeUpdate() 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
- onBeforeUnmount() 注册一个钩子，在组件实例被卸载之前调用。
- beforeCreate和created中间完成一些响应式数据，计算数学，方法和监听器

生命周期案例