手把手教你VUE从入门到放弃—— 篇六（vue实例的生命周期，八个常用生命周期钩子函数）

最新推荐文章于 2022-07-21 17:26:48 发布

我才是真的封不觉

最新推荐文章于 2022-07-21 17:26:48 发布

阅读量174

点赞数

文章标签： vue 生命周期生命周期钩子函数

本文链接：https://blog.csdn.net/JavaCoder_juejue/article/details/103263610

版权

详情可见官网链接

vue实例的生命周期

生命周期函数：vue实例在某个时间点会自动执行的函数

八个常用生命周期函数：

beforecreate与created: 实例创建前与创建后执行

beforemount与mounted:数据与html模板结合渲染到页面之前与之后执行

beforedestroy与destroyed：实例销毁前与之后执行

beforeupdate与updated：实例内的数据修改前与之后执行

源码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue实例的生命周期</title>
    <script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
       <input type='text' v-model='inputVal'/>
   </div>
   <script>
       var app = new Vue({
           el:'#app2',
           data:{
               list:[],
           inputVal : 'zzz'
           },
           beforeCreate:function(){
               console.log("beforeCreate");
           },
           created:function(){
               console.log("created");
           },
           beforeMount:function(){
                          console.log("beforeMount");
           },
           mounted:function(){
                          console.log("mounted");
           },
           beforeDestroy:function(){
                          console.log("beforeDestroy");
           },
           destroyed:function(){
               console.log("destroyed");
           },
           beforeUpdate:function(){
                          console.log("beforeUpdate");
           },
           updated:function(){
                          console.log("updated");
           }
       });
   </script>
</body>

</html>