加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Vue 生命周期

发布时间:2020-12-16 23:18:33 所属栏目:百科 来源:网络整理
导读:vue生命周期简介 生命周期的钩子 LifeCycle hooks 上面已经能够清晰的看到vue2.0都包含了哪些生命周期的钩子函数~~ 那么 执行顺序以及什么时候执行,我们上代码来看~~~ Title {{message}} script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"gt; cre

vue生命周期简介

生命周期的钩子 LifeCycle hooks

上面已经能够清晰的看到vue2.0都包含了哪些生命周期的钩子函数~~

那么 执行顺序以及什么时候执行,我们上代码来看~~~

Title
{{message}}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;

create 和 mounted 相关

执行上面代码,可以看到:

  beforecreated :el 和 data 并未初始化

  created:完成了data数据的初始化 el 没有

  beforeMount:完成了el 和 data的初始化

  mounted:完成了挂载

也就是说~挂载前的状态是虚拟DOM技术,先把坑站住了~挂载之后才真正的把值渲染进去~

update 相关

我们在浏览器console里执行命令:

  app.message = "hello~"

我们就出发了update相关的钩子函数~也就是说data里的值被修改会出发update的操作~

destroy 相关

我们在浏览器console里执行命令:

  app.$destroy();

触发了destroy相关的钩子函数,也就是说组件被销毁~

更改message的值~DOM中的值不变~也就是说DOM元素依然存在只是不受vue控制了~~

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读