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

一、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&gt;
  <div&gt;
    <h1&gt;Vue 3 生命周期</h1&gt;
  </div&gt;
</template&gt;

<script setup lang="ts"&gt;
import { onBeforeMount, onMounted, onBeforeUnmount, onUnmounted } from "vue";

onBeforeMount(() =&gt; {
  console.log("组件挂载前");
});

onMounted(() =&gt; {
  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>

7、案例：购物车

8、案例：购物车（使用组件的方式，需要用到父子组件间传参）

（1）ProductList.vue商品列表组件

（2）CartList.vue购物车组件

（3）ShoppingCart.vue购物车主页面，使用前面定义的两个组件

代码007普通

打赏 收藏 海报 链接