vue 知识点———— 生命周期

这篇具有很好参考价值的文章主要介绍了vue 知识点———— 生命周期。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.什么是生命周期

Vue实例从创建到销毁的过程,叫生命周期。 从开始创建、初始化数据、编译模版、挂载Dom-渲染、更新-渲染、销毁等过程。

2.生命周期一共有几个阶段

创建前/后, 载入前/后,更新前/后,销毁前/销毁后

3.初始化相关属性

  1. beforeCreate(创建前):在数据观测和初始化事件还未开始。

在实例初始化之后,数据观测和事件配置之前被调用

  1. created(创建后):完成数据观察,属性和方法的运算,初始化事件,$el属性还没有显示出来。

在实例创建完成后被立即调用

  1. beforeMount(载入前):在挂载开始之前被调用,相关的render函数首次被调用。实例已完成编译模板,data里的数据和模板生成html。注意此时还没有挂载到页面上。

在挂载开始之前被调用

  1. mounted(载入后):在el被新创建的vm.$el 替换,并挂在到实例上之后调用。实例已完成:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到页面上。这个过程已和ajax交互。

el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子
DOM在该生命周期中渲染已完成

4.更新

  1. beforeUpdate(更新前):在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该生命周期中进一步更改状态,不会触发重新渲染过程。

数据更新时调用,发生在虚拟DOM打补丁之前

  1. updated(更新后):在数据更改导致的虚拟DOM重新渲染和打补丁之后调用。组件已更新,所以可以执行依赖于DOM的操作。避免在此期间更改状态,因为会导致更新无限循环,该钩子在服务器端渲染期间不被调用。

由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子

5.销毁

  1. beforeDestroy(销毁前):在实例销毁之前调用。

实例销毁之前调用

  1. destroyed(销毁后):在实例销毁之后调用。调用后所有的时间监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

实例销毁后调用

6.页面第一次加载会触发哪几个钩子

beforeCreate / created / beforeMount / mounted文章来源地址https://www.toymoban.com/news/detail-707179.html

到了这里,关于vue 知识点———— 生命周期的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • javascript打飞机程序8x8x飞机大战js打飞机程序,飞机大战知识点包含了JavaScript面向过程的全部知识点,包括变量、运算符、判断、循环、数组、自定义函数、系统函数、事件等。...

    讲解了JavaScript编程语言制作游戏界面,添加游戏控制、制作元素动画、制作多元素场景,添加碰撞功能、制作精灵动画等功能 源码如下: html:

    2024年02月16日
    浏览(50)
  • Vue3前端100个必要的知识点

    为什么是必要的,就是这100个知识点学完后,能独立完成一个小项目。最终能得到一个解决方案。也算是前端知识的积累。如果后面有需要的地方可以回来查。100个其实比较多,我会按新手老鸟,大神来分成3个等级,话不多说,让我们开始吧。     目录 1、一些常用的依赖。

    2024年02月06日
    浏览(35)
  • Vue.js知识点学习的一点笔记

    目录 一、虚拟DOM  二、MVVM 三、数据代理 四、事件修饰 五、键盘事件 六、插值语法{{}}、方法methods、计算属性computed 七、 监视、深度监视、另一种写法、简写 八、computed计算属性和watch侦听 九、什么时候用箭头函数 十、Vue侦听和watch侦听原理 十一、从Vue侦听原理得出,往对

    2024年02月11日
    浏览(33)
  • 深度剖析 Vue.js 经典知识点之:SPA、SSR与MVVM

    更多精彩内容,请 微信搜索“ 前端爱好者 “ , 戳我 查看 。‘ 谈一谈你对 SPA 单⻚面的理解,它的优缺点分别是什么 SPA( single-page application )仅在 Web ⻚面初始化时加载相应的 HTML、JavaScript 和 CSS。 一旦⻚面加载完成,SPA 不会因为用户的操作而进行⻚面的重新加载或跳转

    2024年02月07日
    浏览(27)
  • 【Vue前端】vue使用笔记0基础到高手第2篇:Vue进阶知识点介绍(附代码,已分享)

    本系列文章md笔记(已分享)主要讨论vue相关知识。Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。Vue.js是一个构建

    2024年02月19日
    浏览(32)
  • JavaScript 知识点

    立即执行函数 代码 创建函数的同时立即执行,没有绑定任何事件,也无需等待任何异步操作 function () {} 是一个匿名函数,包围它的一对括号将其转换为一个表达式,紧跟其后的一对括号调用了这个函数。 立即执行函数 也可以理解为立即调用一个匿名函数。最常见的应用场

    2024年02月11日
    浏览(26)
  • JavaScript知识系列(2)每天10个小知识点

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! 在 JavaScript 中,如果您尝试使用 new 来实例化(创建对象)一个箭头函数,会导致运行时错误。箭头函数与普通函数(使用 function 声明的函数)

    2024年02月09日
    浏览(32)
  • 【手撕面试题】JavaScript(高频知识点三)

    目录 面试官:什么是防抖和节流,他们的应用场景有哪些? 面试官:js中什么是可选操作符,如何访问数组? 面试官:请简述一下 event loop 面试官:请简述 node/v8 中的垃圾回收机制 面试官:如何删除项目中没有使用到的 package? 面试官:请你谈谈 js 中在 new 的时候发生了什么

    2023年04月08日
    浏览(36)
  • 50个知识点由浅入深掌握Javascript

    近期整理了JavaScript知识体系,50个知识点由浅入深掌握Js建议收藏,如有问题,欢迎指正。 1995年, 布莱登·艾奇 (美国人)在网景公司,用10天写的一门语言。 Js是一门:动态的,弱类型的,解释型的,基于对象的脚本语言,同时Js又是单线程的。 动态类型语言: 代码在执

    2024年02月11日
    浏览(35)
  • 前端一些知识点

    由来 cookie设计的初衷是用于维护HTTP状态 原理 浏览器首先发送一个无状态请求到服务端 服务端带上cookie返回 浏览器后面的请求都会带上cookie(如果客户端或者服务端对cookie没有操作的话) 生成机制 服务端生成,在Http Response Header 中 Set-Cookie 客户端生成,通过 document.cookie设

    2024年03月13日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包