生命周期钩子 组件状态 最佳实践
beforeCreate 实例初始化之后,this指向创建的实例,不能访问到data、computed、watch、methods上的方法和数据 常用于初始化非响应式变量

created

实例创建完成,可访问data、computed、watch、methods上的方法和数据,未挂载到DOM,不能访问到$el属性,$ref属性内容为空数组 常用于简单的ajax请求,页面的初始化
beforeMount 在挂载开始之前被调用,beforeMount之前,会找到对应的template,并编译成render函数 -

mounted

实例挂载到DOM上,此时可以通过DOM API获取到DOM节点,$ref属性可以访问 常用于获取VNode信息和操作,ajax请求
beforeupdate 响应式数据更新时调用,发生在虚拟DOM打补丁之前 适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器
updated 虚拟 DOM 重新渲染和打补丁之后调用,组件DOM已经更新,可执行依赖于DOM的操作 避免在这个钩子函数中操作数据,可能陷入死循环
beforeDestroy 实例销毁之前调用。这一步,实例仍然完全可用,this仍能获取到实例 常用于销毁定时器、解绑全局事件、销毁插件对象等操作
destroyed 实例销毁后调用,调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁 -

Vue中mounted和created的区别相关推荐

  1. VUE中computed 、created 、mounted 的先后顺序

    VUE中computed .created .mounted 的先后顺序 1.computed .created .mounted 的先后顺序 created => computed => ...

  2. vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别

    思考:请说下Vue中computed 和 watch 的区别( 面试题 ) 构造选项 computed / watch / methods computed ● computed 起初构想 在Vue的 ...

  3. mounted钩子函数_怎样实现Vue中mounted钩子函数获取节点高度

    这次给大家带来怎样实现Vue中mounted钩子函数获取节点高度,实现Vue中mounted钩子函数获取节点高度的注意事项有哪些,下面就是实战案例,一起来看一下. 遇到的问题 最近在开发一个Vue的项 ...

  4. Vue 生命周期中 mounted( ) 和 created( ) 的区别

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 一.什么是生命周期? 用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程.虽 ...

  5. Vue生命周期中mounted和created的区别

    一.什么是生命周期? 用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程.虽然不太严谨,但是也基本上可以理解. 通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下cre ...

  6. 9.Vue中mounted的简单理解

    mounted是vue中的一个钩子函数,一般在初始化页面完成后,再对dom节点进行相关操作.官方文档的解释如下,钩子函数的官方链接为     https://cn.vuejs.org/v2/api/# ...

  7. vue中params和query的区别,以及具体用法

    query传递参数会在url后面用?连接起来,且参数之间用&&符号连接然后显示在页面的url中:params传递参数不会显示在页面中:query有点像ajax中的get请求,而para ...

  8. Vue 中 computed vs methods的区别

    computed:计算属性 methods:方法 watch:侦听器 computed与methodes区别 1.computed是响应式的,methods并非响应式. 2.调用方式不一样,compu ...

  9. vue中runtimecompiler和runtimeonly的区别

    简单总结 如果在之后的开发中,你依然使用template,就需要选择runtimecompiler 如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择runtimeonly runtimec ...

最新文章

  1. activexobject java_JS进阶篇--IE浏览器的ActiveXObject对象以及FileSystemobject的应用扩展...
  2. 从一道题浅说 JavaScript 的事件循环
  3. CentOS 7安装使用Github
  4. linux下手动删除数据库实例
  5. linux使用iscsi磁盘的几个步骤
  6. 爱因斯坦那颗大脑,究竟隐藏了什么
  7. 【react】---组件传值的介绍
  8. 全网首发:JDK绘制文字:一、绘制流程
  9. 中国移动MM如何助力网络视频反盗版
  10. Java员工管理系统
  11. 17.1.1 颜色和 RGBA 值
  12. 【BFS】大胖子走迷宫
  13. Z05 - 006、网站转化以及漏斗分析(转化分析)
  14. thinkphp6 404找不到网页错误常见情况总结(持续更新)
  15. 历史上神秘消失的10天 | 历史全知道
  16. 安川伺服电机采用位脉冲+符号控制方式的接线与设置
  17. 李健清华计算机专业,李建-西南石油大学 - 计算机科学学院
  18. Spring IOC 容器源码分析
  19. C# 打印PPT幻灯片
  20. 格式化输出,浮点数e,f,g保留位数的计算方式不同,e,f :%.3e/f:取小数点后三位,g:%.3g总共有效位数为3,不包括小数点

热门文章

  1. Java-Collection、List
  2. [暴力]JZOJ 5842 a
  3. cts测试linux指令skip,linux – dd命令中seek和skip之间有什么区别?
  4. keras faster物体检测_全网 | 深度学习目标检测算法(精选12篇)
  5. Nginx+Tomcat无法正确获取的域名和ip地址
  6. php提交失败阻止提交数据,php – 在刷新浏览器时阻止重新提交提交
  7. invalid LOC header(bad signature)错误及解决
  8. [JS进阶] JS 之Blob 对象类型
  9. Chrome , Firfox 对应IE fireEvent 的方法
  10. php本地文件包含漏洞,php文件包含漏洞利用小结