首页 > 其他分享 >Vue生命周期

Vue生命周期

时间:2022-10-20 01:22:47浏览次数:48  
标签:vue 渲染 vm Vue 生命周期 data

Vue生命周期

生命周期就是我们从开始创建vue实例到销毁的一个过程,这一过程就叫做生命周期。方便我们在vue的各个阶段对其属性进行操作

生命周期示例

-----new Vue 实例化Vue对象 开始初始化主要的生命周期函数

  • beforeCreate 创建前 主要的生命周期函数初始化完成
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
//在beforeCreate前调用了三种方法,分别是初始化生命周期函数,初始化时间,
initLifecycle //查找当前组件的非抽象父组件进行vm.push。
initEvents(vm)//  定义$once、$off、$emit、$on函数
initRender(vm)//封装createElement函数,方便后期创建
  • created 创建后 可对data和method属性进行操控

------开始编译Vue指令,同时在内存中渲染HTML结构(将模板与数据编译成浏览器可读的HTML),最终得到render函数

  • beforeMount 将要渲染到页面上
beforeMount() {
        console.log(document.getElementById("h3").innerHTML)
}
//此刻获取到的是真实DOM页面上  未经过渲染的模板字符串:{{msg}}
  • mounted 页面 挂载完成 可以对dom节点进行操作

    vue mounted 只执行一次

《-------如果data有更新,循环执行以下阶段

  • beforeUpdate 此刻data数据发生变化,vue的虚拟dom树被重新构建,利用diff算法进行新旧两个dom树对比之后重新渲染
  • updated 页面已经完成更新,重新渲染虚拟DOM结构
//所有的数据变化都会调用   在更改data并且确定要对其进行渲染时才会调用updated

《 -------

  • beforeDestroy vm即将被销毁,但此时还可以正常工作

-----正在销毁

  • destroyed 销毁完成

标签:vue,渲染,vm,Vue,生命周期,data
From: https://www.cnblogs.com/ioname/p/16808352.html

相关文章

  • vue源码解析
           入口   在runtime经过再次扩展  在core下的index再次被扩展   最后是core的instance里是真正的vue构造函数继续扩展vue实......
  • Vue 核心技术
    1.1Vue简介1.1.1官网英文官网中文官网1.1.2介绍与描述动态构建用户界面的渐进式JavaScript框架作者:尤雨溪1.1.3Vue的特点遵循MVVM模式编码简洁,体......
  • vue computed写法与传参
    //vue2computed:{fullName(){returnthis.firstName+this.lastName;}}//传参computed:{fullName(){return(params)=>{}......
  • Vue学习笔记之vue.js 两个等号 == 和三个等号===的区别
    /**==用于比较两者是否相等,忽略数据类型===用于更严谨的比较,值和值的数据类型都需要同时比较*/<!DOCTYPEhtml><htmllang="en"><head><metacharset="......
  • Vue组件是怎样挂载的
    我们先来关注一下$mount是实现什么功能的吧:我们打开源码路径core/instance/init.js:exportfunctioninitMixin(Vue:Class<Component>){......initLifec......
  • Vue模板是怎样编译的
    这一章我们开始讲模板解析编译:总结来说就是通过compile函数把tamplate解析成renderFunction形式的字符串compiler/index.jsimport{parse}from'./parser/index'imp......
  • React:生命周期函数
    生命周期钩子详解定义:在特定的阶段,ne你刚刚自动执行的函数(方法)。componentWillMount:在渲染前调用,在客户端也在服务端。componentDidMount:在第一次渲染后调用,只......
  • Vue学习笔记之el-date-picker组建时间格式化方式
    <el-date-pickersize="small"v-model="editData.startTime"type="datetime"placeholder="选择日期时间"value-format="yyyy-MM-ddHH:mm:ss"format="yyyy-MM-ddHH:......
  • Vue3学习笔记(二)——组合式API(Composition API)
    一、常用CompositionAPI官方文档:https://v3.cn.vuejs.org/guide/composition-api-introduction.html组合式API(CompositionAPI)是一系列API的集合,使我们可以使......
  • vue项目打包时让版本号递增,并展示在页面上
    process.env.NODE_ENV:uat/prod//version.json{"prod":"2.1.4","uat":"1.2.6"}constfs=require("fs");letpackageJson=require("./src/config/version.json"......