教程10 Vue3的生命周期与方法（Typescript）+ Setup语法糖详解 + setup中的生命周期钩子（代码截图版）_Vue.js

一、vue3的生命周期及在setup中的生命周期钩子

vue官网：https://cn.vuejs.org/api/composition-api-lifecycle.html

在vue3中，生命周期勾子函数被重新设计，以更好地支持组合式api的使用。

1、vue3中的生命周期勾子函数

setup：在组件实例创建之前执行，用于组件的设置，例如响应式数据的创建、计算属性的设置、事件监听器的设置等。
beforecreate：在组件实例创建之前执行，与vue2.x中的beforecreate钩子相同。
created：在组件实例创建之后执行，与vue2.x中的created钩子相同。
beforemount：在组件挂载到dom之前执行，与vue2.x中的beforemount钩子相同。
mounted：在组件挂载到dom之后执行，与vue2.x中的mounted钩子相同。
beforeupdate：在组件更新之前执行，与vue2.x中的beforeupdate钩子相同。
updated：在组件更新之后执行，与vue2.x中的updated钩子相同。
beforeunmount：在组件卸载之前执行，与vue2.x中的beforedestroy钩子相同。
unmounted：在组件卸载之后执行，与vue2.x中的destroyed钩子相同。

需要注意的是，vue3中没有activated和deactivated钩子函数，因为在vue3中，keep-alive组件的行为被改变，而不再需要这两个钩子函数。

2、案例 onbeforemount, onmounted, onbeforeunmount, onunmounted函数

<template>
  <div>
    <h1>vue 3 生命周期</h1>
  </div>
</template>

<script setup lang="ts">
import { onbeforemount, onmounted, onbeforeunmount, onunmounted } from "vue";

onbeforemount(() => {
  console.log("组件挂载前");
});

onmounted(() => {
  console.log("组件挂载完成");
});

onbeforeunmount(() => {
  console.log("组件卸载之前");
});

onunmounted(() => {
  console.log("组件卸载完成");
});
</script>

在这里插入图片描述

3、案例 onbeforeupdate, onupdated函数用法

在这里插入图片描述

4、案例 onmounted, onactivated, onunmounted, onupdated, ondeactivated等函数用法

在 vue 3 中，组件用于缓存组件实例，避免多次渲染和销毁。

具体来说，组件可以用来缓存那些需要频繁切换显示和隐藏的组件，如页面中的 tab 切换组件、模态框等。这样，在组件被缓存后，当下次需要显示该组件时，vue 会直接从缓存中取出该组件实例并重新挂载，而不需要重新创建和渲染该组件。这样可以大大提高页面的响应速度和用户体验。

需要注意的是，组件只会缓存有状态的组件，即那些具有自己的数据和生命周期的组件。而对于那些无状态的组件，如纯展示型组件，不应该使用进行缓存，因为它们的渲染代价非常小，不值得进行缓存和复用。

（1）运行效果

在这里插入图片描述

（2）app.vue

<script setup lang="ts">
import helloworld from './components/helloworld.vue'
</script>

<template>
  <keep-alive>
    <helloworld></helloworld>
  </keep-alive>
</template>

（3）helloworld.vue

在这里插入图片描述

二、setup函数语法糖案例

随着vue3和typescript的大浪潮不断袭来，越来越多的vue项目采用了typescript的语法来编写代码，而vue3的js中的setup语法糖也越来越广泛的使用，给我们这些以前用弱类型的js语法编写vue代码的人不少冲击，不过随着大量的学习和代码编写，经历过一段难熬的时间后，逐步适应了这种和之前差别不小的写法和冲击。
下面介绍总结了vue3中一些常见的基于typescript的setup语法与组合式 api的处理代码案例。

typescript（简称ts）是微软推出的静态类型的语言，相比于js，typescript拥有强类型、编译器严谨的语法检查、更加严苛的语法，typescript 是 js类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了 js 在大型应用开发中的不足。typescript 是 javascript 的强类型版本，最终在浏览器中运行的仍然是 javascript，所以 typescript 并不依赖于浏览器的支持，也并不会带来兼容性问题。

基于typescript的setup语法糖写法越来越多，熟练使用的话，需要一个学习过程，另外elementplus控件也有了一些不同的变化，而且它的官方案例代码基本上采用了setup语法糖的写法来提供例子代码。

提示： vue3.2 版本开始才能使用语法糖！

在 vue3.0 中变量必须 return 出来， template 中才能使用；而在 vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return ， template 便可直接使用。

1、使用setup语法糖实现两个页面间传参案例

defineprops用于父组件向子组件传值。
defineemits用于子组件向父组件传值。

（1）案例（父传子，父：father.vue，子：son.vue）

在vue3中，父组件通过v-bind来传值，子组件使用defineprops来接收

在这里插入图片描述

father.vue

在这里插入图片描述

son.vue

在这里插入图片描述

（2）案例（子传父，父：father1.vue，子：son1.vue）

在vue3中，子组件通过defineemits()函数触发事件，父组件通过v-on指令监听子组件自定义事件。

在这里插入图片描述

father1.vue

在这里插入图片描述

son1.vue

在这里插入图片描述

（3）验证类型

string
number
boolean
array
object
date
function
symbol

（4）父传子各种类型使用案例

在这里插入图片描述

father2.vue

<template>
  <son
    :str="str"
    :num="num"
    :bool="bool"
    :arr="arr"
    :obj="obj"
    :date="date"
    :a="a"
    :b="b"
    :getconsole="getconsole"
    id="abc"
    class="bcd"
  ></son>
</template>
<script setup lang="ts">
import son from "./son2.vue";

// 定义属性
const str = "前端开发";
const num = 18;
const bool = true;
const arr = ["计算机", "电子", "通信", "数媒技术", "物联网"];
const obj = {
  name: "julia",
  age: 20,
};
const date = new date();
const a = symbol("学会学习，决心奋斗，");
const b = symbol("追求先进，争取全面！");

// 定义方法
const getconsole = () => {
  console.log("传递给子组件的方法");
};
</script>

son2.vue

<script setup lang="ts">
// defineprops是一个函数，传来的参数只读，不能修改
const props = defineprops({
  str: string,
  num: number,
  bool: boolean,
  arr: array,
  obj: object,
  date: date,
  getconsole: function,
  message: object,
  a: symbol,
  b: symbol,
});
</script>

<template>
  <h3 v-bind="$attrs">字符串: {{ props.str }}</h3>
  <h3>数字: {{ props.num }}</h3>
  <h3>布尔: {{ props.bool }}</h3>
  <h3>数组: {{ props.arr }}</h3>
  <h3>对象: {{ props.obj }}</h3>
  <h3>日期: {{ props.date }}</h3>
  <h3>symbol: {{ props.a }} - {{ props.b }}</h3>
</template>

（5）子传父：计数器案例

在这里插入图片描述

father3.vue

在这里插入图片描述

son3.vue

在这里插入图片描述

2、data和methods

由于  setup  不需写  return ，所以直接声明数据即可

（1）运行效果

在这里插入图片描述

（2）counter.vue

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

// defineprops是一个函数，传来的参数只读，不能修改
defineprops<{ msg: string }>()


const counter = ref(0)  // 定义一个常量count，初值存的是个引用

const words = "hello"   // 使用const定义string类型常量
let score = ref(100)    // 使用ref声明基本类型变量
const obj = reactive({  // 使用reactive声明对象类型变量，如object、array、date...
  key: '姓名',
  value: '小明'
})

// 变量
const today = reactive({  // 使用reactive声明对象类型变量，如object、array、date...
  year: '',
  month: '',
  day: '',
})

// 函数
function gettoday() {
  let d = new date();
  // 获取年，getfullyear()返回4位的数字
  let year = d.getfullyear();
  // 获取月，月份比较特殊，0是1月，11是12月
  let month_tmp = d.getmonth() + 1;
  // 变成两位
  let month = (month_tmp < 10 ? '0' + month_tmp : month_tmp).tostring();
  // 获取日
  let day_tmp = d.getdate();
  // 日都变成2位
  let day = (day_tmp < 10 ? '0' + day_tmp : day_tmp).tostring();

  today.year = year.tostring()
  today.month = month
  today.day = day
}
function printlog() {
  gettoday()  // 调用函数
  console.log(today)
  console.log(score.value)
  console.log(obj.key)
}

</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="counter++">count is {{ counter }}</button>
  </div>

  <p>{{ words }}</p>
  <p>{{ obj.key }}：{{ obj.value }}</p>
  <p>分数：<input v-model="score" type="text" /></p>
  <p><button @click="printlog">打印日志</button></p>
</template>

3、computed函数：定义计算属性

说明：使用computed定义计算属性，当需要依赖的数据变化后，会重新计算。

一般使用计算属性来描述依赖响应式状态的复杂逻辑。就是这个计算属性的值依赖于其他响应式属性的值，依赖的属性发生变化，那么这个计算属性的值就会进行重新计算。

（1）案例使用computed函数，计算全名

在这里插入图片描述

（2）案例使用computed函数，计算优秀成绩

初始状态
在这里插入图片描述
每点击一次添加按钮，会添加一个成绩，并筛选出优秀的成绩

4、watch函数的使用

在vue3中，watch函数是用来监听数据变化并执行相应操作的方法。
在组合式api中，可以使用watch函数在每次响应式状态发生变化时触发回调函数,watch的第一个参数可以是不同形式的“数据源”：它可以是一个 ref(包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组： watch()是懒执行的：仅当数据源变化时，才会执行回调，例如：

（1）使用watch函数监测输入用户名的变化

在这里插入图片描述

（2）使用watch函数监测成绩个数

在这里插入图片描述

（3）使用watch函数同时监听多个属性

在这里插入图片描述

5、ref 函数

vue 在这里插入图片描述
3中的ref函数是一个用于创建响应式数据的函数，它可以将一个普通的javascript变量转换成响应式数据，从而能够在视图中动态地更新。ref函数返回一个对象，该对象包含一个.value属性，该属性的值为原始值的响应式引用。

（1）运行效果

在这里插入图片描述

（2）参考代码

<template>
  <h1>{{ a }}</h1>
  <h1>{{ b }}</h1>
  <button @click="increase">点击</button>
</template>

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

// 引用实例对象(引用对象)
const a = ref(0)

// 在template里直接使用变量名就可以，但是更改数据时，却要使用xxx.value
const b = computed(() => {
  return a.value * 2
})

const increase = () => {
  a.value++
}

</script>

6、reactive 函数

vue3中的reactive函数是一个用于创建响应式对象的函数，它可以将一个普通的javascript对象转换成响应式对象，从而能够在视图中动态地更新。reactive函数返回一个对象，该对象的所有属性都是响应式的。

（1）运行效果

在这里插入图片描述

（2）参考代码

<template>
  <h1>{{ data.a }}</h1>
  <h1>{{ data.b }}</h1>
  <button @click="data.increase">点击</button>
</template>

<script setup lang="ts">
import { reactive, computed, torefs } from 'vue'

// 定义一个接口mydataprops
interface mydataprops {
  a: number;
  b: number;
  increase: () => void;
}
// 使用reactive定义一个对象data，是mydataprops类型
const data: mydataprops = reactive({
  a: 0,
  b: computed(() => data.a * 5),
  increase: () => { data.a++ }
})
</script>