Vue生命周期及动画

最新推荐文章于 2022-12-28 23:36:18 发布

楠北

最新推荐文章于 2022-12-28 23:36:18 发布

阅读量121

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45768482/article/details/123699001

版权

一、知识点
1、什么是生命周期
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

2、vue生命周期钩子函数
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期函数=生命周期事件=生命周期钩子

3、vue生命周期

详解：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="./lib/vue-2.4.0.js"></script>

</head>

<body>
<div id='app'>
{{msg}}
<input type="text" v-model="msg">
</div>

<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'hello'
},
methods: {},
//生命周期
beforeCreate() {
//用于页面的重定向
console.log('beforeCreat');
console.log(this.msg);
},
created() {
//一般用于接口请求
console.log('created');
console.log(this.msg);
},
beforeMount() {
//页面数据未更新，在内存中已经解析好模板，虚拟的dom
console.log('beforeMount');
},
mouted() {
//页面更新完成，需要依赖dom的操作，在此完成
console.log('mouted');
},
beforeUpdate() {
//触发0次或者多次
console.log('beforeUpdate');
console.log(this.msg);
},
updated() {
//数据更新后
console.log('updated');
},
beforeDestroy() {
// 组件销毁前，清除定时器还有页面监听
console.log('beforeDestroy');
},
destroyed() {
// 组件销毁后
console.log('destroyed');
},
})
</script>
</body>

</html>

楠北

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue生命周期及动画

一、知识点1、什么是生命周期从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！2、vue生命周期钩子函数每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期函数=生命周期事件=生命周期钩子3、vue生命周期详解：<!DOCTYPE html&.
复制链接

扫一扫