php实战做网站视频教程,站长工具网站测速,2018网站的建设与维护前景,网站优化基本技巧vue3前端开发,生命周期函数的基础练习#xff01;
下面先给大家看一个图片#xff0c;帮助大家了解#xff0c;vue3的生命周期函数#xff0c;和旧版本vue2的生命周期函数#xff0c;有什么变化。 如图所示#xff0c;vue3里面#xff0c;把前面2个函数#xff0c;混在…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
templateh3组件的生命周期练习-vue3/h3
/template
以上代码是我们定义了一个组件名字叫做LifeDemo.vue。 templateh3入口文件/h3!-- Base / --!-- SetupDemo / --!-- ReactiveDemo / --!-- ComputedDemo / --!-- WatchDemo2 / --!-- MutationsDemo / --
LifeDemo /
/templatescript 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
以上代码是入口文件我们做了组件的注册就可以在页面内看见了。 如图所示我们在页面挂载完成后触发了三个控制台打印。顺序和我们在代码内写的顺序是一致的。
这样多次调用生命周期函数是可以避免的对之前旧代码的修改造成一些不必要的软件故障。
我们可以自己追加一些 自己想做的逻辑操作。不会影响之前的旧代码逻辑。
