zoukankan      html  css  js  c++  java
  • 浅谈vue中的几个重要的钩子函数。

     生命周期  钩子函数

            一个组件从创建到销毁的过程就是生命周期。

            beforeCreate:创建前

                1、当前vue实例化的时候会做一个初始化的操作,在这个生命周期函数里面我们可以做初始化的loading

                2、在当前函数里面是访问不到data中的属性,但是可以通过vue的实例对象进行访问

            created:创建后

                1、当beforeCreate执行完毕以后,会执行created. 在当前函数中我们可以访问到data中的属性

                2、当前生命周期函数执行的时候会将data中所以的属性和methods身上所以的方法添加到vue的实例身上,同时

                会将data中所有的属性添加一个getter/setter方法

                3、如果需要进行前后端上数据交互(ajax请求的时候) 需要在当前生命周期中使用

            

            beforeMount:挂载前

                (渲染)

                render函数初次被调用---->数据和模板没有进行相结合,同时还没有渲染到html页面上

                可以在此做渲染前data中数据最后的修改

            mounted:挂载后

                1、数据和模板进行相结合,渲染成真实的DOM结构

                2、在当前生命周期函数里面我们可以访问到真实的DOM结构,

                3、在vue中我们可以通过$refs来访问到真实的DOM结构

                4ref类似与id一样 值必须是唯一的   访问的时候我们可以通过this.$refs.属性

            

            beforeDestroy:销毁前

                销毁之前还可以访问到DOM结构  以及相关的数据(data)

                在这个生命周期函数中我们可以将绑定的事件进行移除

            destroyed:销毁后

                在这个生命周期函数中会将数据和模板之间的关系断开(不是你的做的)

                在这个生命周期函数中我们还是可以访问到data中的属性

                但是访问不到真实的DOM结构了

            beforeUpdate:更新前

                只要data中的属性发生了改变,那么这个生命周期就会执行,render函数再次会执行

                在这个生命周期函数中我们可以对数据进行最后的修改,同时也可以访问到最新的DOM结构和数据

            updated:更新后

                在当前生命周期函数中我们可以访问到最新的DOM结构(数据更新后最新的DOM结构)和数据

  • 相关阅读:
    mac安装mysql 8.0.20
    leetcode之两数之和
    家人闲坐,灯火可亲汪曾祺散文集读书笔记
    java入门知识代码练习
    苏世民:我的经验与教训读后感
    java入门知识
    创业者日志——易居cms产品有什么不同的地方?
    易优CMS:channelartlist 获取当前频道的下级栏目的内容列表
    房产小程序可以实现什么功能?有什么优势?怎么推广小程序?
    房产中介是否需要用管理系统?哪个房产中介管理软件好?
  • 原文地址:https://www.cnblogs.com/PrayLs/p/10372809.html
Copyright © 2011-2022 走看看