VUE的生命周期之beforeMount、mounted、beforeUpdate、updated

释放双眼,带上耳机,听听看~!

直通车

  • beforeMount:渲染前,被vue管理起来的dom在vue实例里还没完成渲染,所以就是还不能访问vue渲染的dom,平时项目中基本用不到,知道有这个是干什么的就行。
  • mounted:渲染后,数据已在vue实例中渲染完成,也就是可以访问vue渲染的dom了,很常用的一个勾子,一定要记住。
  • beforeUpdate:更新前,当数据发生改变,但页面还没完成更新,但快要更新时调用,没什么用。
  • updated:更新后,当数据发生改变,且页面完成了更新后调用,也用的很少。

用法:

它是用在vue实例化里面的,所有的生命同期都是一个函数 ,写到vue里就可以。

new Vue({
  el: '#app',
  methods: {
  },
  beforeCreate(){//创建前,还不能访问data与methods},
  created(){//创建后,能访问data与methods},
  beforeMounte(){//渲染前,被vue管理的dom还没完成在vue实例内的渲染,所以还不能调用dom},
  mounted(){//渲染后,被vue管理的dom已完成vue实例内的渲染,所以现在可以调用dom},
  beforeUpdate(){//更新前,当数据发生改变,但页面还没完成更新时调用。},
  updated(){//更新后,数据发生改变,且完成了页面更新时调用。}
})

功能:

  • beforeMount:本没啥用

  • mounted:能调用dom,后面用到使用一些第三方插实例化时要调用dom时使用等,这个方法是很常用的

  • beforeUpdate:基本没啥用。

  • updated:基本没啥用。实际使用中,因为太多的数据发生改变了,他是在不停的调用的,所以,如果使用它会造成很多性能问题。

注:这里面我们重点需要知道二个生命周期勾子(created与mounted),但是其它勾子我们虽然 基本不怎么用,但需要记住它的功能,这个面试时,基本算是一个必问题了。

来一个demo让大家清晰一下这个过程:

<!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>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
</style>
<div id="app">
    <button @click="clickEvent">点我啊</button>
    <div ref="dom">{{test}}</div>
</div>

<body>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                test: "测试一下"
            },
            beforeCreate() {
                console.log(this.test)
                //不能访问data,methods
            },
            created() {
                console.log("created:", this.test)
                //能访问data与methods

            },
            beforeMount() {
                console.log("beforeMount:", this.$refs.dom)
                //还不能访问dom

            },
            mounted() {
                console.log("mounted:", this.$refs.dom)
            },
            updated() {
                console.log("updated:")

            },
            beforeUpdate() {
                console.log("beforeUpdate:")
            },


            methods: {
                clickEvent() {
                    this.test = Math.random() * 100
                }
            }



        })
    </script>
</body>

</html>

相关文章:

vue生命周期之beforeCreate、created

1、beforeCreate:创建前,不能访问data与methods,在当前 vue实例生命周期,只会执行一次; 2、created:创建后,能访问data与methods,但是也还是不能访问dom,在
内容投诉

人已赞赏
JavaScriptNodeVue

axios基本介绍

2020-9-1 20:01:19

JavaScriptVue

VUE-$nextTick使用

2020-9-3 19:50:01

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索