Vue2.0 Vue生命周期 挂载的流程

最新推荐文章于 2024-04-30 10:40:48 发布
最新推荐文章于 2024-04-30 10:40:48 发布
阅读量1.3k 收藏 5
点赞数 4
分类专栏： # vue2 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yasinawolaopo/article/details/121962053
版权

Vue官网_生命周期图示

很多的环节我们了解知道就可以了，正在我们用到的钩子就这么几个

new Vue()

一切的开端

Init Events & Lifecycle(初始化事件与生命周期)(环节)

这个里面制定了一些规则，比如:

初始化:生命周期、事件,但是数据代理还没有开始。

生命周期函数到底有一个,都叫什么名,什么时候去调它们?
事件:事件修饰符(之一once),得指定规则,以后遇到像是.once的修饰符我得怎么去处理这个事件,都得在这做好
但是数据代理还没有开始: 也就是说在这个环节你new Vue时候传入的那个data:{n:1}vm还没有收到,它(vm)身上还没有_data

这个环节之后它帮你调了beforeCreate(这是我们第一个生命周期函数)

beforeCreate(生命周期函数)

此时: 无法 通过vm访问到data种的数据、methods的方法。
在数据监测、数据代理之前
经过初始化事件与生命周期环节我们得知vm身上还没有_data
验证:
1.首先验证它有没有执行

beforeCreate() {
    console.log('beforeCreate')
},

beforeCreate

2.输出一下vm,用debugger卡一个断点;这样可以分析到哪代码就停到哪

beforeCreate() {
    console.log('beforeCreate')
    console.log(this)
    debugger;
},

Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    $attrs: (...)
    $children: []
    $createElement: ƒ (a, b, c, d)
    $listeners: (...)
    $options: {components: {…}, directives: {…}, filters: {…}, el: '#root', _base: ƒ, …}
    $parent: undefined
    $refs: {}
    $root: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    $scopedSlots: {}
    $slots: {}
    $vnode: undefined
    _c: ƒ (a, b, c, d)
    _directInactive: false
    _events: {}
    _hasHookEvent: false
    _inactive: null
    _isBeingDestroyed: false
    _isDestroyed: false
    _isMounted: false
    _isVue: true
    _renderProxy: Proxy {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    _self: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    _staticTrees: null
    _uid: 0
    _vnode: null
    _watcher: null
    $data: (...)
    $isServer: (...)
    $props: (...)
    $ssrContext: (...)
    get $attrs: ƒ reactiveGetter()
    set $attrs: ƒ reactiveSetter(newVal)
    get $listeners: ƒ reactiveGetter()
    set $listeners: ƒ reactiveSetter(newVal)
    [[Prototype]]: Object

它身上有下划线data吗(_data)?没有。
你所传的dataVue实例对象根本还没收到，而且vm身上没有vm.n

有那method add()方法吗?没有。
而且很多东西都是null和undefined

Init injections & reactivity(环节)

初始化:数据监测、数据代理。

也在初始化初始化最重要的数据监视和数据代理
也就是说之前Vue是如何监测数据变化的,如何监测数组变化的,给对象里的属性匹配get、set方法的,对数组的那些方法进行二次包装

一旦完成了就调用created

created(生命周期函数)

此时: 可以通过vm访问到data种的数据、methods的配置方法。
在数据监测、数据代理之后
验证:
1.先看一下有没有输出，顺序对不对

created() {
    console.log('created')
},

beforeCreate
created

2.查看vm

created() {
    console.log('created')
    console.log(this)
    debugger;
},

Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    $attrs: (...)
    $children: []
    $createElement: ƒ (a, b, c, d)
    $listeners: (...)
    $options: {components: {…}, directives: {…}, filters: {…}, el: '#root', _base: ƒ, …}
    $parent: undefined
    $refs: {}
    $root: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    $scopedSlots: {}
    $slots: {}
    $vnode: undefined
    add: ƒ ()
    n: (...)
    _c: ƒ (a, b, c, d)
    _data: {__ob__: Observer}
    _directInactive: false
    _events: {}
    _hasHookEvent: false
    _inactive: null
    _isBeingDestroyed: false
    _isDestroyed: false
    _isMounted: false
    _isVue: true
    _renderProxy: Proxy {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    _self: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    _staticTrees: null
    _uid: 0
    _vnode: null
    _watcher: null
    _watchers: []
    $data: (...)
    $isServer: (...)
    $props: (...)
    $ssrContext: (...)
    get $attrs: ƒ reactiveGetter()
    set $attrs: ƒ reactiveSetter(newVal)
    get $listeners: ƒ reactiveGetter()
    set $listeners: ƒ reactiveSetter(newVal)
    get n: ƒ proxyGetter()
    set n: ƒ proxySetter(val)
    [[Prototype]]: Object

这个时候的Vue有了add()方法,有了n,有了_data,并且n的get、set方法都出现了

Has “el” option?

首先它问一个事:有没有el配置项
也就是你new Vue的时候有没有传el配置项

传了走YES路线到has "template" option?
没有传走NO路线到when vm.$mount(el) is called

when vm.$mount(el) is called

when:等你
vm.$mount(el) is called:去调用mount(el)

new Vue({
    data:{}
})

没有el
写el的时候:

beforeCreate
created
beforeMount
mounted

没写el的时候,也没有写vm.$mount(el):

beforeCreate
created

如果没写el但在外面写了vm.$mount(el)

const vm = new Vue({...})
vm.$mount('#root')

beforeCreate
created
beforeMount
mounted

has “template” option?

有没有template选项;<template>是标签

有就走YES路线到Compile template into render function *
没有就走NO路线到Compile el's outerHTML as template *

Compile el’s outerHTML as template *

Compile el's :编译el的
outerHTML:外部的HTML(指的是<div id="root"><h2>当前n的值是:{{n}}</h2><button @click="add">点我n+1</button></div>)整个div是模板
as template:就作为模板

验证:

<div id="root" :x="n">
    <h2>当前n的值是:{{n}}</h2>
    <button @click="add">点我n+1</button>
</div>

如果div不算是模板,那么最终出现的:x="n"不会解析,如果div也算作是模板,那你能看到的是x=1

<div id="root" x="1">

也就是整个div都算作是模板

Has “el” option? has “template” option? Compile el’s outerHTML as template *

此阶段Vue开始解析模板,生成虚拟DOM(内存中),页面还不能显示解析好的内容

开始解析模板:就是插值语法,@click,什么计算属性都开始解析了

<div id="root" :x="n">
    <h2>当前n的值是:{{n}}</h2>
    <button @click="add">点我n+1</button>
</div>

这就是没有解析好的模板

Compile template into render function *

容器(<div id="root"></div>)里面我可以什么都不写
如果你不用换行''字符串就够了，但是你想要换行写那就要得用到ES6里面的模板字符串(``)

template: `
        <h2>当前n的值是:{{n}}</h2>
        <button @click="add">点我n+1</button>
    `,

写了这个你可以不用在容器里面写东西了，它的工作流程就拿这个template去当模板了，直接解析啊，生成真实DOM啊,最终还是帮你放到容器里面了

结果一看浏览器控制台
[Vue warn]: Error compiling template:模板编译失败,原因是one root element.(一个根元素),他的意思就是说如果你想用template配置项,那么就意味着你不能有俩个根节点(一个是<h2></h2>另一个是<button></button>),在它们外面包一个<div></div>

template: `
        <div>
            <h2>当前n的值是:{{n}}</h2>
            <button @click="add">点我n+1</button>
        </div>
    `,

如果直接把模板写在容器里

有root有绑定事件x="1"
如果靠template
效果是一样的,但是上面的id=root和绑定事件x没了就是把template里的直接替换了容器中的div

这种方式到组件(组件的开始非单文件组件)

里面有个render函专门做渲染的

这时虚拟DOM已经出现

下面有一个beforeMount

beforeMount(生命周期函数)

将要挂载或者说是挂载之前

此时:
1.页面呈现的是未经Vue编译的DOM结构。
2.所有对DOM的操作,最终都不奏效。

验证:

beforeMount() {
    console.log('beforeMount')
    console.log(this)
    debugger;
},

beforeMount

Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    $attrs: (...)
    $children: []
    $createElement: ƒ (a, b, c, d)
    $el: div#root
    $listeners: (...)
    $options: {components: {…}, directives: {…}, filters: {…}, el: '#root', _base: ƒ, …}
    $parent: undefined
    $refs: {}
    $root: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    $scopedSlots: {}
    $slots: {}
    $vnode: undefined
    add: ƒ ()
    n: (...)
    _c: ƒ (a, b, c, d)
    _data: {__ob__: Observer}
    _directInactive: false
    _events: {}
    _hasHookEvent: false
    _inactive: null
    _isBeingDestroyed: false
    _isDestroyed: false
    _isMounted: false
    _isVue: true
    _renderProxy: Proxy {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    _self: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    _staticTrees: null
    _uid: 0
    _vnode: null
    _watcher: null
    _watchers: []
    $data: (...)
    $isServer: (...)
    $props: (...)
    $ssrContext: (...)
    get $attrs: ƒ reactiveGetter()
    set $attrs: ƒ reactiveSetter(newVal)
    get $listeners: ƒ reactiveGetter()
    set $listeners: ƒ reactiveSetter(newVal)
    get n: ƒ proxyGetter()
    set n: ƒ proxySetter(val)
    [[Prototype]]: Object

看页面n没有解析

<div id="root" :x="n">
    <h2>当前n的值是:{{n}}</h2>
    <button @click="add">点我n+1</button>
</div>

实际上Vue已经解析完了，但是没来得及往页面上放

2.所有对DOM的操作,最终都不奏效。

在控制台输出原生DOM

> document.querySelector('h2').innerText = "哈哈"
< '哈哈'

页面改变
但是你一点放行debugger,最终还是当前n的值是:1(这个是最终把)
因为人家紧随其后执行了Create vm.$el and replace "el" with it,你无论怎么改DOMCreate vm.$el and replace "el" with it就还是把之前步骤生成的虚拟DOM拿过来，直接生成真实DOM,一下子就往vm.$el上存一份，随后就插入页面了

下一步来到了Create vm.$el and replace "el" with it

Create vm.$el and replace “el” with it

将内存中的虚拟DOM转为真实DOM插入页面
创建一个vm身上的$el选项,然后替换掉整个el
就在这一步Vue把刚才的虚拟DOM就转成了真实DOM之后,它往vm.$el身上存了一份

随后进入了mounted

mounted(生命周期函数)

挂载完毕

此时:
1.页面中呈现的是经过Vue编译的DOM。
2.对DOM的操作均有效(尽可能避免)。至此初始化过程结束，一般在此进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。

验证:

mounted(){
    console.log('mounted')
    console.log(this)
    debugger;
}

mounted

Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    $attrs: (...)
    $children: []
    $createElement: ƒ (a, b, c, d)
    $el: div#root
    $listeners: (...)
    $options: {components: {…}, directives: {…}, filters: {…}, el: '#root', _base: ƒ, …}
    $parent: undefined
    $refs: {}
    $root: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    $scopedSlots: {}
    $slots: {}
    $vnode: undefined
    add: ƒ ()
    n: (...)
    _c: ƒ (a, b, c, d)
    _data: {__ob__: Observer}
    _directInactive: false
    _events: {}
    _hasHookEvent: false
    _inactive: null
    _isBeingDestroyed: false
    _isDestroyed: false
    _isMounted: true
    _isVue: true
    _renderProxy: Proxy {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    _self: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
    _staticTrees: null
    _uid: 0
    _vnode: VNode {tag: 'div', data: {…}, children: Array(3), text: undefined, elm: div#root, …}
    _watcher: Watcher {vm: Vue, deep: false, user: false, lazy: false, sync: false, …}
    _watchers: [Watcher]
    $data: (...)
    $isServer: (...)
    $props: (...)
    $ssrContext: (...)
    get $attrs: ƒ reactiveGetter()
    set $attrs: ƒ reactiveSetter(newVal)
    get $listeners: ƒ reactiveGetter()
    set $listeners: ƒ reactiveSetter(newVal)
    get n: ƒ proxyGetter()
    set n: ƒ proxySetter(val)
    [[Prototype]]: Object

页面当的页面n的值是1了而且开发者工具里的html也全解析完了

这就是整个挂载的流程了

结城明日奈是我老婆
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
Vue 2.0中生命周期与钩子函数的一些理解
12-02
前言 在使用vue一个多礼拜后，感觉现在还停留在初级阶段，虽然知道怎么和后端做数据交互，但是对于mounted这个挂载还不是很清楚的。放大之，对vue的生命周期不甚了解。只知道简单的使用，而不知道为什么，这对后面的踩坑是相当不利的。 因为我们有时候会在几个钩子函数里做一些事情，什么时候做，在哪个函数里做，我们不清楚。 于是我开始先去搜索，发现vue2.0的生命周期没啥文章。大多是1.0的版本介绍。最后还是找到一篇不错的（会放在最后） vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。 生命周期探究 对于执行顺序和什么时候执行，看上面两个图基本
vue生命周期和钩子函数执行顺序-笔记
bluelimon的博客
07-05 441
首先就是官网的这个生命周期图。 vue中钩子函数执行顺序 1.页面首次加载 beforeCreate //在实例初始化之后、创建之前执行 created //实例创建后执行 beforeMount //在挂载开始之前调用 filters //挂载前加载过滤器 computed //计算属性 directives-bind //只调用一次，在指令第一次绑定到元素时调用 directives-inserted //被绑定元素插入父节点时调用 activated //keek-alive组件被激活时调用，则在k
vue2组件通信(七)——任意组件$root
浪头的博客
04-20 1115
vue项目中，所有组件实例身上都有一个$root属性，它们指向整个项目的根组件，一般也就是App，在它们自己组件实例身上有一个$root属性指向它们共同的根组件，专栏中在全局事件总线那一篇博客介绍了vue组件身上有$on,$emit,$off三个api。 实现消息发布与订阅模式，实际上这和$parent一样，也是消息发布与订阅模式，不过在这里中间人是它们的根元素。 // 接收数据组件 methods: { btn(){ this.$root.$off("hello")
Vue3--自定义指令---directive
聪明勇敢有力气的博客
09-18 1316
快速上手vue3，学会如何 自定义指令，如何使用directive，自动获取input输入框焦点
Vue2生命周期
Raccon_的博客
01-25 375
生命周期
vue自定义指令directives使用及生命周期
weixin_30888707的博客
11-29 277
生命周期 bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。 inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。 update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。 componentUpdated:被绑...
Invalid vnode type when creating vnode undefined. vue 3.2版本错误解决
jiey0407的博客
02-22 6120
Invalid vnode type when creating vnode: undefined. 主要是因为引入组件的时候，变量名没有首字母大写 import winVue from "./components/win.vue";//错误的 import WinVue from "./components/win.vue";//正确的
vue源码阅读---vm实例上的属性
csdnWhyTrouble的博客
08-21 1146
vnode.$slot：组件实例里插槽的内容；组价开始标签和组件结束标签里包裹的内容；vnode.children：普通元素组件的子节点；vnode.componentInstacne：指向组件vnode的实例；在子组件实例化时，会有一个const child = vnode.componentInstance = createComponentInstanceForVnode；所以组件vnode的componentInsatcne就有值了。
7.VUE实例的生命周期钩子
yangwq的博客
08-11 345
生命周期函数：就是VUE实例在某一个时间点会自动执行的函数 生命周期函数直接定义在VUE的实例上 并不定义在methods中 newVue：创建一个VUE的实例 ==> Init Events&Lifecycle：初始化事件和生命周期相关的内容 beforeCreate：当最基础的初始化【Init Events&Lifecycle】完成的时候【VUE实例部分初始化】 VUE会自动执行beforeCreate函数 Init injections&reactivity：V.
vuejs生命周期函数
weixin_30784945的博客
09-09 89
生命周期函数就是vue实例在某一个时间点会自动执行的函数 当我们创建一个实例的时候，也就是我们调用 new Vue() 这句话的时候，vue会帮助我们去创建一个实例，创建过程其实并不像我们想的那么简单，他要经过很多的步骤 Init(Events & Lifecycle):首先他会去初始化事件和生命周期相关的内容,当最基础的初始化完成的时候，在这个时间点上，...
深入理解Vue生命周期、手动挂载及挂载子组件
08-29
本篇文章主要介绍了深入理解Vue生命周期和手动挂载，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解Vue 实例中的生命周期钩子
12-12
在文档中经常会使用 vm 这个变量名表示 Vue 实例，在实例化 Vue 时，需要传入一个选项对象，它可以包含数据(data)、模板(template)、挂载元素(el)、方法(methods)、生命周期钩子(lifecyclehook)等选项。 Vue 实例化...
对vue生命周期的深入理解
01-18
一.Vue生命周期简介 官网：https://cn.vuejs.org/v2/api/#beforeCreate Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程...
Spring Cloud Gateway直接管理Vue.js的静态资源
wddblog的博客
04-28 858
1. 构建Vue.js应用像之前一样，构建你的Vue.js应用，并将生成的静态资源（位于dist目录）复制到Spring Boot项目的某个目录，比如。
element-ui的bug记录
nick_zhang的博客
04-29 495
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 520
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
vue2编写主体页面
5年编程经验的老猿。
04-28 424
这个示例展示了一个基本的主体页面布局，其中包含了侧边栏、导航栏和主要内容区域。Element UI的el-container、el-aside、el-header和el-main组件被用来创建布局的不同部分，而el-menu和el-submenu组件则用来创建侧边栏的导航菜单
Vue3 + TS + Element-Plus 封装的 Dialog 弹窗组件
最新发布
单飞吧的博客
04-30 646
弹窗组件中自定义了表头增加了全屏，svg-icon 没有的话可能会报错，换成自己的图标就可以。
Vue开发者工具Vue.js devtools Vue开发者工具安装步骤前端开发工具免费附带教程
gaoyu007的博客
04-28 324
Vue开发者工具Vue.js devtools Vue开发者工具安装步骤前端开发工具免费附带教程
vue2.0生命周期
09-26
vue2.0的生命周期包括以下几个阶段： 1. beforeCreate：实例创建之前，此时无法访问页面内的数据和方法。 2. created：实例创建之后，可以使用和访问data声明的数据以及methods里的方法。 3. beforeMount：在挂载开始之前被调用，此时还未生成真实的DOM节点。 4. mounted：挂载完成后被调用，此时实例已经生成了对应的DOM节点，可以对DOM进行操作。 5. beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。 6. updated：数据更新并且虚拟DOM重新渲染和打补丁之后调用。 7. beforeDestroy：实例销毁之前调用，此时还可以使用data和methods的数据和方法。 8. destroyed：实例销毁后调用，此时所有的事件监听器和子实例被移除。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

结城明日奈是我老婆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值