zoukankan      html  css  js  c++  java
  • vue 生命周期 笔记

    生命周期:一个组件从创建到销毁的这个过程叫做生命周期 生命周期钩子函数
     
    1、组件从创建到销毁的过程
    1、创建前 创建后
    2、挂载前 挂载后
    3、更新前 更新后
    4、销毁前 销毁后
    beforeCreate:
    当前生命周期函数主要用来做初始化工作,在这个生命周期函数中我们可以创建一个loading
     
    created:(*****)
    创建后:
    1、在当前生命周期函数中我们可以访问到vm身上所有的属性和方法
    2、当前生命周期函数会将data和methods身上所有的属性和方法都挂载在vm的实例身上
    3、当前生命周期函数会将data身上所有的属性添加一个getter/setter方法,因此如果需要进行
    前后端数据交互的时候必须在当前生命周期中进行(响应式原理),如果数据没有提前在data中进行了绑定
    那么这个属性身上就不会有getter/setter方法,因此数据也不会动态的进行改变
     
    beforeMount:
    挂载前:
    数据和模板还没有进行相结合,在这个生命周期函数中我们可以进行数据最后的修改
     
    在当前生命周期函数中是访问不到真实的DOM结构
     
    mounted:(*****)
    挂载后:
    数据和模板已经结合,在这个生命周期函数中我们可以通过this.$refs访问到真实DOM结构
     
    $refs
    ref="值必须是整个VDom中唯一";
     
    访问的时候通过this.$refs.值
     
     
    ref与document的区别?
    document是从整个页面去查找DOM结构,这个DOM结构肯定是已经插入到页面的DOM结构
    ref是从当前vm的虚拟DOM中找到的当前元素,ref是从内存当中找到的DOM结构
     
     
    beforeUpdate:
    更新前:
    当data中的数据发生了改变的时候就会执行
    1、可以访问到真实的DOM结构
    2、可以对数据做最后的修改
    3、当前生命周期函数中的数据和模板还没有更新完毕
     
    updated:
    更新后:
    1、数据更新后最新的DOM结构
    2、在当前生命周期函数中需要特别的注意,因为当前函数是一个频繁触发的函数。
    因此如果在当前生命周期函数中做一些事件绑定或者实例化的时候需要做一个提前判断
     
    beforeDestroy:*
    销毁前
    1、在这个生命周期函数中,还是可以继续访问到真实的DOM结构以及data中的数据
    2、一般我们都会在这个生命周期函数中做一些事件解绑/移除的操作
     
    destroyted:
    销毁后:
    1、将DOM与数据之间的关联进行断开
    2、在当前生命周期函数中是访问不到真实的DOM结构
     
     
     
     
     
    以上生命周期函数中
    多次执行的生命周期函数
    1、beforeUpdate
    2、updated*
     
    组件第一个创建的时候会执行哪些生命周期函数
    beforeCreate
    created*
    beforeMount
    mounted*
     
    innerText innerHTML outerText outerHTML
    vm实例身上的方法
     
    $mount() 手动设置挂载点 例子:vm.$mount("#app");
     
    $destroy(); 销毁
     
    $forceUpdate 强制更新 (强制调用了render方法);
     
    $on() 事件绑定
     
    $emit() 事件触发
     
    $off() 事件解绑
     
    $once() 只绑定一次
  • 相关阅读:
    对生产稳定的一些思考
    tsar指标解释
    tsar采集nginx指标
    Nginx如何处理一个连接
    Java : 如何更优雅的设计异常
    MySql的索引实现
    IntelliJ Idea 常用配置
    ICSharpCode.SharpZipLib.dll 压缩、解压Zip文件 附源码
    Java BigDecimal使用
    社交系统中用户好友关系数据库设计
  • 原文地址:https://www.cnblogs.com/tong-yao/p/10622890.html
Copyright © 2011-2022 走看看