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

本文介绍: 教程10 Vue3的生命周期与方法（Typ e script）+ Se t up 语法糖详解 + setup中的生命周期钩子（代码截图版）

setup：在组件实例创建之前执行，用于组件的设置，例如响应式数据的创建、计算属性的设置、事件监听器的设置等。
beforeCre a te：在组件实例创建之前执行，与Vue2.x中的beforeCre a te钩子相同。
create d：在组件实例创建之后执行，与Vue2.x中的create d钩子相同。
beforeMount：在组件挂载到DOM之前执行，与Vue2.x中的beforeMount钩子相同。
mounted：在组件挂载到DOM之后执行，与Vue2.x中的mounted钩子相同。
beforeUp date：在组件更新之前执行，与Vue2.x中的beforeUpdate钩子相同。
update d：在组件更新之后执行，与Vue2.x中的update d钩子相同。
beforeUnmount：在组件卸载之前执行，与Vue2.x中的beforeDestroy钩子相同。
unmounted：在组件卸载之后执行，与Vue2.x中的dest royed钩子相同。

需要注意的是，Vue3中没有 activate d和de activate d钩子函数，因为在Vue3中，keep–a live组件的行为被改变，而不再需要这两个钩子函数。

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

在这里插入图片描述

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

<template>
  <keep-alive>
    <HelloWorld></HelloWorld>
  </keep-alive>
</template>

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

defineProps用于父组件向子组件传值。
defineEmits用于子组件向父组件传值。

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

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

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

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

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

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

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