vue3前端开发,生命周期函数的基础练习

vue3前端开发,生命周期函数的基础练习!

下面先给大家看一个图片,帮助大家了解,vue3的生命周期函数,和旧版本vue2的生命周期函数,有什么变化。

如图所示,vue3里面,把前面2个函数,混在了语法糖里面。我们 只需要写一个setup就行了。

生成之前,和生成之后。需要准备的事情,无外乎就是数据的准备工作。

下面看看代码案例。我们以onMounted为案例,展示一下。生命周期函数,其实是可以多次调用的。


复制代码
<script setup>
/**
 * 补充:
 * vue3的版本,把vue2版本的生成之前,和生成之后,这2个钩子函数,改成了语法糖setup。
 * 
 */
//1:   引入生命周期函数
import {onMounted} from 'vue'
//2:   调用函数
onMounted(()=>{
    console.log('mounted1');
}),
onMounted(()=>{
    console.log('mounted3');
})
onMounted(()=>{
    console.log('mounted2');
})
</script>
<template>
    <h3>组件的生命周期练习-vue3</h3>
</template>

以上代码是,我们定义了一个组件,名字叫做LifeDemo.vue。


复制代码
<template>

  <h3>入口文件</h3>
  <!-- <Base /> -->
  <!-- <SetupDemo /> -->
  <!-- <ReactiveDemo /> -->
  <!-- <ComputedDemo /> -->
  <!-- <WatchDemo2 /> -->
  <!-- <MutationsDemo /> -->
<LifeDemo />
</template>

<script setup>
import Base from './components/Base.vue'
import SetupDemo from './components/SetupDemo.vue'
import ReactiveDemo from './components/ReactiveDemo.vue'
import ComputedDemo from './components/ComputedDemo.vue'
import WatchDemo from './components/WatchDemo.vue'
import MutationsDemo from './components/MutationsDemo.vue'
import WatchDemo2 from './components/WatchDemo2.vue'
import LifeDemo from './components/LifeDemo.vue'
</script>

以上代码是入口文件,我们做了组件的注册,就可以在页面内看见了。

如图所示,我们在页面挂载完成后,触发了三个控制台打印。顺序和我们在代码内写的顺序是一致的。

这样多次调用生命周期函数是,可以避免的对之前旧代码的修改造成一些不必要的软件故障。

我们可以自己追加一些 自己想做的逻辑操作。不会影响之前的旧代码逻辑。

相关推荐
博客zhu虎康38 分钟前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海1 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏1 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码2 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby2 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹2 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel2 小时前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh2 小时前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富2 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
土了个豆子的3 小时前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#