zoukankan      html  css  js  c++  java
  • Vue的生命周期

    Vue生命周期

     

    vue生命周期简介

    生命周期的钩子 LifeCycle hooks

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

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

    生命周期钩子函数

    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控制了~~

  • 相关阅读:
    实现点击预览图片更改页面背景图片的效果
    JavaScript中赋值运算符的使用
    Visual Studio常用快捷键
    循 环 嵌 套
    控制摄像头拍照
    运用<body>属性,渲染页面效果
    子查询的易错点
    随机数
    PDO获取数据乱码的解决方法
    JavaScript中比较运算符的使用
  • 原文地址:https://www.cnblogs.com/xiao-xue-di/p/9954957.html
Copyright © 2011-2022 走看看