简记Vue3(三)—— ref、props、生命周期、hooks

个人简介

👀个人主页: 前端杂货铺

🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展

📃个人状态: 研发工程师,现效力于中国工业软件事业

🚀人生格言: 积跬步至千里,积小流成江海

🥇推荐学习:🍍前端面试宝典 🎨100个小功能 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧

文章目录

前言

重拾 Vue3,查缺补漏、巩固基础。

ref

作用:用于注册模板引用。

  • 用在普通 DOM 标签上,获取的是 DOM 节点
  • 用在组件标签上,获取的是组件实例对象

App.vue

java 复制代码
<template>
  <h2 ref="title">你好</h2>
  <button @click="showLog">App 测试</button>
  <Person ref="ren"/>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import Person from "./components/Person.vue";

  const title = ref();

  const ren = ref();

  function showLog() {
    console.log(title.value)
    console.log(ren.value)
  }
</script>

Person.vue

java 复制代码
<template>
  <div class="person">
    <h2 ref="title">山东</h2>
    <button @click="showLog">child 输出h2</button>
  </div>
</template>

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

  const title = ref();

  const a = ref(0);
  const b = ref(1);
  const c = ref(2);

  function showLog() {
    console.log(title.value);
  }

  // 仅暴露给父组件 a 和 b
  defineExpose({ a, b });
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>

props

使用 props 可以实现 父组件向子组件传递 数据。

index.ts(定义规则)

java 复制代码
// person 接口
export interface PersonInter {
    id: string,
    name: string,
    age: number
}

// export type Persons = Array<PersonInter>
export type Persons = PersonInter[]

App.vue(父组件)

java 复制代码
<template>
  <Person :list="personList" />
</template>

<script lang="ts" setup>
  import Person from "./components/Person.vue";
  import { reactive } from 'vue';
  import { type Persons } from '@/types';

  const personList = reactive<Persons>([
    { id: '1', name: '张三', age: 20 },
    { id: '2', name: '李四', age: 22 },
    { id: '3', name: '王五', age: 18 }
  ])
</script>

Person.vue(子组件)

java 复制代码
<template>
  <div class="person">
    <ul v-for="person in list" :key="person.id">
      <li>{{ person.name }} -- {{ person.age }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
  import { defineProps, withDefaults } from "vue";
  import { type Persons } from '@/types';

  // 只接收 list
  // defineProps(['list']);

  // 接收 list + 限制类型
  // defineProps<{ list: Persons }>();

  // 接收 list + 限制类型 + 限制必要性 + 指定默认值
  withDefaults(defineProps<{ list?: Persons }>(), {
    list: () => [{id: '001', name: 'zhang', age: 20}]
  })
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>

生命周期

  • 创建阶段:setup
  • 挂载阶段:onBeforeMount、onMounted
  • 更新阶段:onBeforeUpate、onUpdated
  • 卸载阶段:onBeforeUnmount、onUnmounted

常用钩子:onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

App.vue(父组件)

java 复制代码
<template>
  <div class="app">
    <Person v-if=isShow />
    <button @click="unMounted">卸载子组件</button>
  </div>
</template>

<script lang="ts" setup>
  import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';
  import Person from './components/Person.vue';

  let isShow = ref(true);

  function unMounted() {
    isShow.value = false;
  }

  console.log('父--创建');

  onBeforeMount(() => {
    console.log('父--挂载前');
  }),

  onMounted(() => {
    console.log('父--挂载完毕');
  })

  onBeforeUpdate(() => {
    console.log('父--更新前');
  })

  onUpdated(() => {
    console.log('父--更新完毕');
  })

  onBeforeUnmount(() => {
    console.log('父--卸载前');
  })

  onUnmounted(() => {
    console.log('父--卸载完毕');
  })
</script>

<style scoped>
.app {
  background-color: orange;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 10px 5px;
}
</style>

Person.vue(子组件)

java 复制代码
<template>
  <div class="person">
    {{ sum }}
    <button @click="add">求和</button>
  </div>
</template>

<script lang="ts" setup>
  import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';
  let sum = ref(0);

  function add() {
    sum.value += 1;
  }

  console.log('子--创建');

  onBeforeMount(() => {
    console.log('子--挂载前');
  }),

  onMounted(() => {
    console.log('子--挂载完毕');
  })

  onBeforeUpdate(() => {
    console.log('子--更新前');
  })

  onUpdated(() => {
    console.log('子--更新完毕');
  })

  onBeforeUnmount(() => {
    console.log('子--卸载前');
  })

  onUnmounted(() => {
    console.log('子--卸载完毕');
  })
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>

hooks

hooks 主要用于在函数式组件中管理组件的状态和生命周期,下面我们进行一个示例。

Person.vue

javascript 复制代码
<template>
  <div class="person">
    <h2>当前求和为:{{ sum }}</h2>
    <h2>求和放大十倍:{{ bigSum }}</h2>
    <button @click="add">+1</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";
import useSum from "../hooks/useSum";

const { sum, add, bigSum } = useSum();
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

useSum.ts

javascript 复制代码
import { computed, onMounted, ref } from "vue";

export default function () {
  let sum = ref(0);

  function add() {
    sum.value += 1;
  }

  onMounted(() => {
    add();
  });

  let bigSum = computed(() => {
    return sum.value * 10;
  });

  return { sum, add, bigSum };
}

参考资料:

https://www.bilibili.com/video/BV1Za4y1r7KE?spm_id_from=333.788.player.switch\&vd_source=f839085517d2b7548b2939bfe214d466\&p=29---


相关推荐
weixin_5168756517 分钟前
使用 axios 拦截器实现请求和响应的统一处理(附常见面试题)
前端·javascript·vue.js
H_HX12624 分钟前
https服务器访问http资源报Mixed Content混合内容错误
前端·vue.js·安全策略·https访问http
卡布叻_星星1 小时前
同一个页面击穿element样式后,会影响同样组件的使用
前端·vue.js·elementui
加油小吃货1 小时前
定义全局键盘监听事件,el-dialog中删除不可用
javascript·vue.js·elementui
貂蝉空大1 小时前
vue el-table组件实现展开行 默认展开全部
javascript·vue.js·element-plus
猫猫村晨总1 小时前
涉及到行合并的el-table表格导出功能实现
前端·vue.js·element plus
晨旭缘1 小时前
vue3动态监听div高度案例
vue.js·html
VillanelleS2 小时前
Vue2进阶之Vue3高级用法
前端·javascript·vue.js
qq22951165022 小时前
uniapp+vue加油服务系统 微信小程序
vue.js·微信小程序·uni-app
霍格沃兹测试开发学社测试人社区2 小时前
软件测试学习笔记丨Vue学习笔记-基本介绍
软件测试·vue.js·笔记·测试开发·学习