vue生命周期钩子总结

最新推荐文章于 2024-07-02 10:02:04 发布

qq_39355295

最新推荐文章于 2024-07-02 10:02:04 发布

阅读量173

点赞数

分类专栏： vue 生命周期钩子

本文链接：https://blog.csdn.net/qq_39355295/article/details/101721285

版权

vue 同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

生命周期钩子

2 篇文章 0 订阅

订阅专栏

学习vue有一段时间了，之前一直是简单的使用，看来很多生命周期钩子的介绍，但是还是不太理解，直到自己开始真正的开发时，才真正的理解。希望接下来的介绍，大家看完可以真正的掌握，没有掌握也不要紧，毕竟编程时需要自己真正的使用，掌握的
备注：大家注意引入vue

介绍

看vue开发文档的时候，大家经常看到的图片如下：
在这里插入图片描述
也许刚开不了解，但是当你学会了之后，回头会发现，原来图片真的介绍的很好。

上代码

1、第一个生命周期钩子（beforeCreate）：
下面是我们这次的基本模板，大家可以自己练习，可以更好的理解：

<!DOCTYPE html>
<html lang="en">
<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>vue钩子实例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    </div>
    <script>
        //闯将vue实例，取得viewModel
        var vm=new Vue({
            el:"#app",
            data:{
                msg:'ok'
            },
            methods:{
                show(){
                    console.log('执行了show方法')
                }
            },
            beforeCeate(){//第一个生命周期钩子，在实例被完全创建之前
                console.log(this.msg)
                this.show()
            }
        })
    </script>
</body>
</html>

执行上面代码后输出结果：

undefined
this.show() is not a function

2、第二个生命周期钩子create

created(){
                console.log(this.msg)
                this.show()
 }

执行上面代码后输出结果：

ok
执行了show方法

3、beforeMount()

 <div id="app">
        <h3 id="h3">{{msg}}</h3>
  </div>
  .....
  beforeMount(){
    console.log(document.getElementById('h3').innerText) 
  }

执行上面代码后输出结果：模板在内存中已经编译好了，但还没更新到新的模板中。

{{msg}}

4、mount()

mount(){
  console.log(document.getElementById('h3').innerText) 
}

执行上面代码后输出结果：页面已经更新了新的模板，此时页面已经被渲染好了，此时如果没有其他操作，此实例就静静的躺在内存中。

ok

5、beforeUpdate和updated
条件：数据发生改变。
beforeUpdate：这是数据被更新，但是模板界面还没有更新。
update：这是数据被更新，但是模板界面已经更新完成。

<div id="app">
        <input type="button" value="修改msg" @click="msg='No'">
        <h3 id="h3">{{msg}}</h3>
 </div>
 beforeUpdate(){
       console.log('界面上元素的内容：'+document.getElementById('h3').innerText)
      console.log('data中msg中的数据是：'+this.msg)
  }

执行上面代码后输出结果：记得点击修改按钮，这样才会触发beforeUpdate事件。

界面上元素的内容：No
data中msg中的数据是：ok

 updates(){
        console.log('界面上元素的内容：'+document.getElementById('h3').innerText)
        console.log('data中msg中的数据是：'+this.msg)
 }

执行上面代码后输出结果：记得点击修改按钮，这样才会触发beforeUpdate事件。

界面上元素的内容：No
data中msg中的数据是：No

7、beforeDestory和destoryed
beforeDestory执行的时候，实例上所有的data和methods、以及过滤器和指令。。。都处于可用阶段，此时还没有真正的执行销毁过程。
destoryed执行的时候,实例上所有的data和methods、以及过滤器和指令。。。都已经被销毁。

qq_39355295

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue生命周期钩子总结

学习vue有一段时间了，之前一直是简单的使用，看来很多生命周期钩子的介绍，但是还是不太理解，直到自己开始真正的开发时，才真正的理解。希望接下来的介绍，大家看完可以真正的掌握，没有掌握也不要紧，毕竟编程时需要自己真正的使用，掌握的...
复制链接

扫一扫

专栏目录