vue3+Ts 2 组件+生命周期

勤恳的码农!!

已于 2023-04-20 15:54:05 修改

阅读量835

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2023-04-20 15:41:26 首次发布

本文链接：https://blog.csdn.net/weixin_55683934/article/details/130265046

本文探讨了Vue3中计算属性computed、监听器watch的使用，详细阐述了vue3的生命周期，并介绍了组件的创建与使用，包括父传子、子传父的通信方法。通过defineProps和defineEmit实现父子组件间的数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算属性 computed

<template>
  <div>{{ arr }}</div>
  <button @click="arr.push('新学生')">添加学生(当前已有{{ studentNumber }}个学生)</button>
</template>

<script setup>
import { ref, computed } from 'vue'

const arr = ref(['tom', 'rose'])

// // 计算属性步骤一,编写计算的函数
// const getLength = () => {
//   return arr.value.length
// }
// // 计算属性步骤二, 用 computed 包住这个函数, 处理过后就会返回一个计算属性
// const studentNumber = computed(getLength)

// 另外一种写法,就是直接拼在一起, 写回调函数即可
const studentNumber = computed(() => {
  return arr.value.length
})

</script>

监听器watch

// 监听器基本使用
watch(iphone, () => {
  localStorage.setItem('cart', JSON.stringify(iphone))
})

// 监听器使用细节
// 监听一个数据
watch(num1, (newVal, oldVal) => {
console.log('num1发生变化', newVal, oldVal);
})
// 监听多个数据, 用数组形式
watch([num1, num2], () => {
console.log('num1, num2 任意一个发生变化都触发');
})
// 监听对象的属性,用函数返回形式即可
watch(() => iphone.price, () => {
console.log('价格发生了变化');
})
// 其他的一些配置如深度监听和立即执行等, 传入第三个参数对象即可 watch(被监听值, 回调函数, 可选配置对象)
watch(iphone, () => {
console.log('iphone 发生了变化');
}, {
immediate: true,
deep: true
})

vue3的生命周期

除了beforecate和created(它们被setup方法本身所取代)，我们可以在setup方法中访问的API生命周期钩子有9个选项:

onBeforeMount – 在挂载开始之前被调用：相关的 render 函数首次被调用。

onMounted – 组件挂载时调用

onBeforeUpdate – 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

onUpdated – 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

onBeforeUnmount – 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。

onUnmounted – 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。

onActivated – 被 keep-alive 缓存的组件激活时调用。

onDeactivated – 被 keep-alive 缓存的组件停用时调用。

onErrorCaptured – 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

将 Vue2 的生命周期钩子代码更新到 Vue3
这个从Vue2 到Vue3的生命周期映射是直接从Vue 3 Composition API文档中获得的:

beforeCreate -> 使用 setup()

created -> 使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured
\

组件的相关使用

父子组件的使用

父传子

// 定义接收 props, 传入参数跟 vue2 一样
defineProps({
  data: String
})

父组件

子组件用 defineProps去接收

子传父 defineEmit

父组件的接收跟vue2接收子组件的方式是一样的