zoukankan      html  css  js  c++  java
  • Vue生命周期详解

    <!-- vue 实例从被创建,运行,到销毁期间,会执行各种各样的事件函数,这些事件统称为生命周期 -->
    <body>
        <div id="app">
        </div>
    </body>
    <script>
        let vm = new Vue({ 
            el:'#app',
            data:{
                vmsg:'vue text'
            },
            beforeCreate() {//在发起/new 一个 vue实例时 ,会执行一个生命周期函数 beforeCreate(),表示vue实例被完全创建出来之前,会执行这个生命周期函数
                //这个函数里面获取不到data,和methods里面的任何数据,因为此时,vue 实例里的data数据,methods里面的函数都还没被初始化,
            },
            created () {
                //表示 vue实例数据初始化完毕,此时可以调用vue实例里的数据和方法
            },
            beforeMount(){
                //这是遇到的第三个生命周期函数,表示 模板已经在内存中编辑完成了,但是尚未把模板渲染到 页面中,在 beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串,获取元素的innerHTML时,如果是插值表达式,那么得到的就是插值表达式解析之前的模板字符{{ var_name }},最终结果并没有渲染到页面
            },
            mounted () {
                // 将=编译好的最终的html渲染到html页面中去  到此函数位置,前面的都是创建过程中的钩子【生命周期】函数,直行到这标志着vue实例的创建阶段结束!
            },

            beforeUpdated(){
                //数据被更新时触发,但是页面界面的数据还未改变,只是浏览器内存中的数据改变了,获得页面Dom节点的innerHTML,得到的时改变之前的数据
            },    // 两个运行时的两个钩子函数 
            Updated () {
                //同步浏览器内存中数据到页面界面中去【通过浏览器 在内存中虚拟出一份跟页面同样的虚拟dom树并更新数据,再将内存的虚拟dom树同步更新到页面】
            },

            beforeDestroy(){//执行了就表示vue进入销毁阶段
                //此时vue实例还未被真的销毁,vue上所有的数据都处于可用状态
            },//vue  实例被销毁时执行的钩子函数【//例如页面关闭时执行xxx】
            destoryed(){
                //真正销毁vue实例,所有数据都不可用
            }
        })
    </script>
     

      其中,同一个vue实例,创建和销毁只会执行一次,运行中的updated和beforeUpdated 执行0次【数据没有更新过】和多次【数据更新几次就执行几次】

  • 相关阅读:
    多种支付实现(只需要添加, 修改类方法)
    事务的隔离级别 另一种事务开启方式
    序列化类补充 source关键字参数 SerializerMethodField方法
    分类的数据处理 第一种递归处理,第二种树型结构 无极限分类
    数据库补充 navicate导入与导出
    微信小程序开发5 后端解析wx.getUserInfor中的用户信息, 微信小程序支付
    微信小程序开发4 登录与授权
    微信小程序开发3 自定义组件(传参), 页面跳转(传参), 小程序本地存储, 小程序向django请求接口
    前八后十六节奏
    [编织消息框架][JAVA核心技术]动态代理应用11-水平扩展实现
  • 原文地址:https://www.cnblogs.com/Hijacku/p/14731734.html
Copyright © 2011-2022 走看看