【Vue】详解Vue生命周期

Vue实例的生命周期全过程(图)

(这里的红边圆角矩形内的都是对应的Vue实例的钩子函数)

在beforeCreate和created钩子函数间的生命周期

在beforeCreate和created之间,进行数据观测(data observer) ,也就是在这个时候开始监控data中的数据变化了,同时初始化事件

created钩子函数和beforeMount间的生命周期

对于created钩子函数和beforeMount间可能会让人感到有些迷惑,下面我就来解释一下:

el选项的有无对生命周期过程的影响

首先系统会判断对象中有没有el选项

有el选项,则继续编译过程

没有el选项,则停止编译,也意味着暂时停止了生命周期,直到vm.$mount(el)

下面我展示一下:

new Vue({
  el: '#app',
  beforeCreate: function () {
    console.log('调用了beforeCreat钩子函数')
  },
  created: function () {
    console.log('调用了created钩子函数')
  },
  beforeMount: function () {
    console.log('调用了beforeMount钩子函数')
  },
  mounted: function () {
    console.log('调用了mounted钩子函数')
  }
})

demo如下:

可以看到,在el选项填写且正确的时候,生命周期将正常进行

而当我们把el去掉:

new Vue({
  beforeCreate: function () {
    console.log('调用了beforeCreat钩子函数')
  },
  created: function () {
    console.log('调用了created钩子函数')
  },
  beforeMount: function () {
    console.log('调用了beforeMount钩子函数')
  },
  mounted: function () {
    console.log('调用了mounted钩子函数')
  }
})

demo:

可以看到,生命周期的钩子函数执行到created就结束了

而当我们不加el选项,但是手动执行vm.$mount(el)方法的话,也能够使暂停的生命周期进行下去,例如:

var vm = new Vue({
  beforeCreate: function () {
    console.log('调用了beforeCreat钩子函数')
  },
  created: function () {
    console.log('调用了created钩子函数')
  },
  beforeMount: function () {
    console.log('调用了beforeMount钩子函数')
  },
  mounted: function () {
    console.log('调用了mounted钩子函数')
  }
})
vm.$mount('#app')

demo如下,可以看到,这个时候虽然对象中没有el参数,但通过$mount(el)动态添加的方式,也能够使生命周期顺利进行

template参数选项的有无对生命周期的影响

1.如果Vue实例对象中有template参数选项,则将其作为模板编译成render函数

2.如果没有template参数选项,则将外部的HTML作为模板编译(template),也就是说,template参数选项的优先级要比外部的HTML高

3.如果1,2条件都不具备,则报错

我们可以把模板写在template参数选项中:

new Vue({
  el: '#app',
  template: '<div id="app"><p>模板在templated参数中找到了哟~</p></div>'
})
demo:

也可以把参数选项写在外部HTML中,像这样:

外部HTML:

<div id="app"><p>模板是在外部HTML中找到的~</p></div>
创建对象实例:
new Vue({
  el: '#app'
})

demo:

那么有趣的问题来了,当模板同时放在template参数选项和外部HTML中,会怎样呢?

例如:

外部HTML:

<div id="app"><p>模板是在外部HTML中找到的~</p></div>

创建Vue实例(包含template参数选项)

new Vue({
  el: '#app',
  template: '<div id="app"><p>模板在templated参数中找到了哟~</p></div>'
})

demo如下:

很显然,正如我上面下的结论一样,最终显示的是“模板在templated参数中找到了哟~”而不是“模板是在外部HTML中找到的~”,因为template参数的优先级比外部HTML的优先级要高

【注意】

1.为什么判断el要发生在判断template前面呢

因为Vue需要通过el的“选择器”找到对应的template。总结一下上述的过程,Vue通过el参数去找到对应的template。然后,根据el参数给出的“选择器”,首先去Vue实例对象本身的template选项参数中找,如果没有template参数,则到外部HTML中寻找,找到后将模板编译成render函数

2.实际上,在Vue中,有render函数这个选项,它以createElement作为参数,做渲染操作。当然你也可以不调用createElement,而直接嵌入JSX(学习react的同学对此应该很熟悉吧)。

new Vue({
  el: '#demo',
  render (createElement) {
    return (....)
  }
})

【注意】render选项参数比template更接近Vue解析器!所以综合排列如下:

render函数选项  > template参数  > 外部HTML

Vue的编译过程——把模板编译成 render 函数

Vue的编译实际上是指Vue把模板编译成 render 函数的过程

我们可以通过Vue.compile这个实时编译模板的函数来看一看:

用官方文档的例子做个解释:

<div>
  <header>
    <h1>I'm a template!</h1>
  </header>
  <p v-if="message">
    {{ message }}
  </p>
  <p v-else>
    No message.
  </p>
</div>

会被渲染成

function anonymous() {
  with(this){return _c('div',[_m(0),(message)?_c('p',[_v(_s(message))]):_c('p',[_v("No message.")])])}
}

beforeMount和mounted钩子函数间的生命周期

对于这一点,我也感到有些迷惑,百度后之后也没什么头绪,最后我思考的结果是这样的:正因为render函数和template选项的“优先级”比外部HTML要高,所以,最后一般会存在一个外部HTML模板被Vue实例本身配置的模板所“替代”的过程也就是上图所说的 “replace”

(如果大家有不同意见也可以在评论处一起讨论)

beforeUpdate钩子函数和updated钩子函数间的生命周期

在Vue中,数据更改会导致虚拟 DOM 重新渲染,并先后调用beforeUpdate钩子函数和updated钩子函数

但要注意一点:重渲染(调用这两个钩子函数)的前提是被更改的数据已经被写入模板中!!(这点很重要)

例如:

var vm = new Vue({
  el: '#app',
  data: {
    number: 1
  },
  template: '<div id="app"><p></p></div>',
  beforeUpdate: function () {
    console.log('调用了beforeUpdate钩子函数')
  },
  updated: function () {
    console.log('调用了updated钩子函数')
  }
})
 
vm.number = 2

控制台上并没有如我们预料那样输出调用两个钩子函数的文本

而当我们改成

var vm = new Vue({
  el: '#app',
  data: {
    number: 1
  },
  // 在模板中使用number这个数据
  template: '<div id="app"><p>  {{ number }} </p></div>',
  beforeUpdate: function () {
    console.log('调用了beforeUpdate钩子函数')
  },
  updated: function () {
    console.log('调用了updated钩子函数')
  }
})
 
vm.number = 2

这个时候,调用两个钩子函数的文本就被输出来了

总之,只有Vue实例中的数据被“写入”到我们的模板中,它的改变才可以被Vue追踪,重渲染从而调用 beforeUpdate钩子函数和updated钩子函数

beforeDestroy和destroyed钩子函数间的生命周期

beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。

destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

【注意】就如同调用在Vue实例上调用$mounted会使暂停的生命周期继续一样,调用$destroy()会直接销毁实例

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏机器之心

业界 | DeepMind发布AlphaGo 50局自我对弈棋谱

选自DeepMind 机器之心编译 参与:机器之心编辑部 5 月 27 日,升级后的 AlphaGo 所向披靡,最终以 3:0 赢下了乌镇围棋人机大战。在此期...

3737
来自专栏机器之心

现场报道 | AlphaGo被授职业九段,DeepMind将公开其所有版本细节

机器之心原创 记者:杜夏德 5 月 27 日,经过 3 小时 38 分钟的鏖战,209 手,柯洁盘中投子再负 AlphaGo,至此中国乌镇围棋峰会圆满告落。赛后...

3397
来自专栏量子位

最终一战柯洁再负AlphaGo,此后再无围棋人机大战

唐旭 舒石 发自 乌镇 量子位 报道 | 公众号 QbitAI 5月27日,人机大战第三场,天气晴朗。 经过209手的博弈,主动要求执白的柯洁再次负于Alpha...

33013
来自专栏AI科技大本营的专栏

AlphaGo模仿柯洁开局,激战3小时人类再度败北

根据比赛最新消息,5月25日,柯洁对阵AlphaGo第二局,双方激战3个小时,执白子的柯洁再度输给AlphaGo ,第二次人机大战胜负已定。 中国乌镇围棋峰会...

2456
来自专栏量子位

腾讯AI让二子,柯洁还是输了

问耕 发自 凹非寺 这是围棋人机大战中的又一个第一次。 顶级职业围棋手,在让子棋中负于AI。 ? 更明确一点说,腾讯围棋AI绝艺,让二子战胜了当今围棋第一人柯...

2178
来自专栏量子位

AI再乱围棋圈:“食言之战”柯洁落败;首例素人作弊引风波

去年12月底,曾经放言不再与AI进行正式比赛的柯洁,公开宣布“食言”。现在,这场柯洁的“实验之战”胜负已分。

551
来自专栏人工智能的秘密

预计到2060年AI能比人类所做的一切都做得更好

2017 年AI在各种各样的游戏中打败了人类,战绩如下:

1959
来自专栏Timhbw博客

有感于AlphaGo与韩国围棋选手李世石的“世纪人机大战”

先介绍下他(它)们: 李世石(朝鲜语:,朝鲜汉字:李世乭),1983年3月2日生于韩国 全罗南道,2006年3月12日与女友金贤珍完婚,同年9月3号女儿李慧琳出...

2665
来自专栏新智元

2017年AI在游戏中完胜人类,2060年通吃一切人类任务

编辑:Cecilia 【新智元导读】2017 年,AI在各种游戏中横扫人类: 在围棋比赛中,AlphaGo Master战胜世界排名最高的柯洁,随后又衍生出Al...

2614
来自专栏大数据文摘

Master横扫围棋高手,李世石会否是最后一个战胜过AI的人类?

1764

扫码关注云+社区