首页 前端知识 教程10 Vue3的生命周期与方法(Typescript) Setup语法糖详解 setup中的生命周期钩子(代码截图版)

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

2024-01-24 15:01:52 前端知识 前端哥 817 68 我要收藏

一、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>

7、案例:购物车

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8、案例:购物车(使用组件的方式,需要用到父子组件间传参)

在这里插入图片描述

(1)ProductList.vue商品列表组件

在这里插入图片描述
在这里插入图片描述

(2)CartList.vue购物车组件

在这里插入图片描述
在这里插入图片描述

(3)ShoppingCart.vue购物车主页面,使用前面定义的两个组件

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/125.html
评论
发布的文章

Element-ui 滚动条美化

2024-02-02 09:02:04

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!