Vue3学习（三）----事件处理，生命周期

事件处理

使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。 事件处理器 (handler) 的值可以是：

1. 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
2. 方法事件处理器：一个指向组件上定义的方法的属性名或是路径

内联事件处理

let count = ref(0)

<a @click="count++">内联-增加</a>
<p>count 值变化---{{ count }}</p>

方法事件处理

let addNumber = () => {
  count.value++
  console.log(`count值变化---${count.value}`)
}

    <a @click="addNumber">方法-增加</a>

事件修饰符

事件修饰符是一种用于处理 DOM 事件的特殊指令，可以在事件处理程序中提供额外的控制或功能 常见的事件修饰符有：
.stop: 阻止事件继续传播，即调用 event.stopPropagation()。
.present:阻止事件的默认行为，即调用 event.preventDefault()。
.capture:使用事件捕获模式，即在捕获阶段处理事件。
.self: 只有当事件是从元素自身触发时才会触发处理函数，而不是冒泡过程中的其他元素。
.once: 事件只会出发一次，之后移除事件监听器
.passive: 指示浏览器不应该组织事件的默认行为，可以提高页面滚动性能

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用 @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

<script setup lang="ts">
import { ref } from 'vue';

let count = ref(0)
let addNumber = () => {
  count.value++
  console.log(`count值变化---${count.value}`)
}
const showInfo = () => {
  alert('提示信息')
}
const clickDiv = () => {
  console.log('点击了div')
}
const clickP = () => {
  console.log('点击了P')
}
</script>
<template>
  <div>
    <a @click="count++">内联-增加</a>
    <p>count 值变化---{{ count }}</p>
    <a @click="addNumber">方法-增加</a>
  </div>
  <div>
    <!-- 点击显示提示信息并跳转百度页面 -->
    <!-- <a href="https://www.baidu.com" @click="showInfo">点击提示信息</a><br> -->
     <!-- 点击只有提示信息,不会跳转百度 -->
    <a href="https://www.baidu.com" @click.prevent="showInfo">点击提示信息</a>
  </div>
  <div @click="clickDiv" style="background-color: aqua; width: 100; height: 100;">
    <p @click="clickP">点击P标签</p>
  </div>
  <!-- 打印:点击了P   点击了div       -->
  <div @click="clickDiv" style="background-color: aqua; width: 100; height: 100;">
    <p @click.stop="clickP">点击P标签stop</p>
  </div>
 <!-- 打印:点击了P         (继续点击无效果) -->
  <div @click="clickDiv" style="background-color: aqua; width: 100; height: 100;">
    <p @click.once="clickP">点击P标签once</p>
  </div>
  <!-- 打印:点击了P   点击了div        (继续点击无效果) -->
  <div @click.self="clickDiv" style="background-color: aqua; width: 100; height: 100;">
    1233

    <p @click="clickP">点击P标签self</p>
  </div>
  <!-- (点击p区域输出点击了p 点击div上输出点击了div) -->
</template>

生命周期

每个组件在创建的时候都会经历一些列的初始化步骤，Vue在组件创建过程中，提供了生命周期钩子函数，我们可以利用这些函数执行自己对应的操作。最常用的是 onMounted、onUpdated 和 onUnmounted。

生命周期图示

<script setup lang="ts">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';

const name = ref('张三')
const updateName = () => {
  name.value = '李四'
}

onBeforeMount(()=>{
  console.log('onBeforeMount....')
})
onMounted(()=>{
    console.log('oneMount....')
})
onBeforeUpdate(()=>{
  console.log('DOM更新之前.....')
})
onUpdated(()=>{
  console.log('DOM更新之后...')
})
onBeforeUnmount(()=>{
    console.log('onBeforeUnmount....')
})
onUnmounted(()=>{
    console.log('onUnmounted....')
})

</script>
<template>
<div>
  {{ `名字是${name}` }}
  <button @click="updateName">修改名字</button>
</div>
</template>