详解vue生命周期及每个阶段适合进行的操作

VUE生命周期的四个阶段

  • create 创建 -------- 创建vue实例并初始化
  • mount 挂载 -------- 把vue实例和视图进行关联
  • update 更新 ------- 监听数据与视图的变化
  • destroy销毁 ------- 销毁实例

生命周期 --- 钩子函数

vue为上面的4个大的阶段提供了一个可编程的接口,我们可以在这4个的某个时段写入一些自己的逻辑,vue是通过配置一个叫做生命周期钩子函数的选项来实现的

beforecreate

  • 在实例初始化之后,数据观测(data observer)和event/watcher事件配置之前调用,里面的this指向实例

create

  • 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置;数据观测(data observer),属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,还未与页面关联起来,$el属性目前不可见。可在这阶段进行一些初始化的操作(如ajax获取数据之类的)

beforemount

  • 在挂载之前没调用,解析模板,把实例对象下的$el属性指向设置中的el参数指定的元素,这个解析后的模板还没有和$el进行绑定

mounted

  • 挂载之后调用,把解析后的模板与页面元素进行绑定,用解析后的模板内容替换页面

beforeupdate

  • 在数据绑定之前被调用

update

  • 在数据改变之后被调用,可以进行依赖于dom的操作(可以在这个阶段进行dom操作)

转载于:https://www.cnblogs.com/Ivy-s/p/7496462.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/280479.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.Net 7 新编译器 ILC 简析

楔子:这个新编译器的全称是ILCompiler。是之前CoreRT项目合并过来的,在.Net 7成熟,并且可以产业化应用。本质:ILC编译器的本质除了构建CLR的所拥有的主要功能,还包含了对LLVM这种意图取代GCC编译器的操作,对…

mac 防止 下载 睡眠_如何暂时防止Mac进入睡眠状态

mac 防止 下载 睡眠Let’s say you start a big download, then go to bed. When you wake up, you realize your Mac went to sleep before finishing its job. Isn’t there some way to stop this? 假设您开始进行大量下载,然后上床睡觉。 当您醒来时&#xff0…

ubuntu安装chrome driver

首先下载Chrome Driver(Firefox Driver的安装与该步骤相同) 链接: http://chromedriver.storage.googleapis.com/index.html 接下来在控制台(terminal)上操作一下红色字体的指令: Install Unzipsudo apt-ge…

深入理解Spring异常处理

宜信技术学院1.前言相信我们每个人在SpringMVC开发中,都遇到这样的问题:当我们的代码正常运行时,返回的数据是我们预期格式,比如json或xml形式,但是一旦出现了异常(比如:NPE或者数组越界等等&am…

基于React开发范式的思考:写在Lesx发布之际

例子:lesx-example webpack loader: lesx-loader 一些背景 现在前端框架已经呈现出React、Angular、Vue三足鼎立的局势,对于三者的对比以及技术选型的思考与争论也被讨论了非常多,比如知乎上的这个问题:react.js,angular.js,vue.j…

mac共享单个磁盘_如何与您的所有设备共享酒店的单个Wi-Fi连接

mac共享单个磁盘Many hotels still limit you to one or two Wi-Fi devices per room–a frustrating limitation, especially when traveling with someone else. Connection restrictions can apply anywhere you have to log into a Wi-Fi network via a portal instead of …

Python FastApi:快速建立docker容器/挂载共享文件夹/导入导出

一、目的 a.快速把原有fastapi代码部署到docker,让docker在server运行。 b.不涉及docker深入设置。 c.使用python第三方lib少或简单。 二、步骤 ps:请提前安装docker 1.新建Dockerfile,放入到项目根目录 a.Dockerfile没有后缀. b.准备好requireme…

PHP-FPM 与 Nginx 的通信机制总结

PHP-FPM 介绍 CGI 协议与 FastCGI 协议 每种动态语言( PHP,Python 等)的代码文件需要通过对应的解析器才能被服务器识别,而 CGI 协议就是用来使解释器与服务器可以互相通信。PHP 文件在服务器上的解析需要用到 PHP 解释器,再加上对…

Android——监听事件总结

各种监听事件 1.按钮 Button(1)点击监听btn_1.setOnClickListener(new View.OnClickListener() { (2)长按监听btn_1.setOnLongClickListener(new View.OnLongClickListener() { 2.单选框 RadioGroupradio_gp.setOnCheckedChangeLi…

ChatGPT 大智近妖,从宇宙人生到手搓光刻机,从哄女朋友到写年终总结我们聊得非常开心,反而让人越来越忧心...

都说 ChatGPT 要干掉程序员,清理搜索引擎,取代Stack Overflow,还能消灭人类,这些有些言过其实了。ChatGPT 的定位是一个人工智能助理,它说,它的主要目的是通过回答用户的问题,为用户提供帮助。在…

如何在Windows Defender中安排扫描

Windows Defender automatically performs background scans during your PC’s idle moments, but doesn’t include an easy way to schedule a full scan. There is a way to do it, though. Windows Defender在PC空闲时自动执行后台扫描,但是没有包括安排完整扫…

复习深入笔记02:魔法方法/cookie,session,token/异常

魔法方法 对象生成 1.先调用__new__方法,生成空对象。控制对象生成。 2.当执行“对象类名(namelqz)”,触发类的__init__()

比特熊故事汇独家 | .NET 感恩专场

点击上方蓝字关注我们(本文阅读时间:15分钟)大家好!我是爱吃、爱玩、更爱学习技术,IT界新晋小红人,开发者的好朋友——比特熊!比特熊:本期故事汇是.NET专场,今天一次性邀请到DOTNET领…

Ubuntu Core 给物联网提供更多安全支持

开发四年只会写业务代码,分布式高并发都不会还做程序员? Canonical 是 Ubuntu 的一个桌面环境,该公司目前在云服务业务赚到了钱。因为 Ubuntu Core 为嵌入式设备带来了 Ubuntu 18.04 长期支持(LTS)代码库。Ubuntu Core 的镜像大小为 260MB&…

semantic ui要装什么才能使用

作者:呆呆笨笨链接:https://www.zhihu.com/question/32233356/answer/196799506来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。本答案将以两种方式讲解如何从零开始使用 Semantic-UI,…

用户帐户控制设置_创建快捷方式以避免用户帐户控制弹出式快捷方式

用户帐户控制设置There are numerous applications which, when launched, result in a UAC (User Account Control) warning being displayed. There are reasons why this security measure is a good idea, but it can also be extremely irritating. ElevatedShortcut lets…

Java Observer Pattern(观察者模式)

当对象间存在一对多关系时,则使用观察者模式(Observer Pattern)。比如,当一个对象被修改时,则会自动通知它的依赖对象。观察者模式属于行为型模式。 关键代码:在抽象类里有一个 ArrayList 存放观察者们。 优…

rest_framework01:前后端分离\规范\简单例子(查询某本书)

web 开发模式 RESTful规范 1 数据的安全保障 url链接一般都采用https协议进行传输 注:采用https协议,可以提高数据交互过程中的安全性 2 接口特征表现 用api关键字标识接口url: https://api.baidu.comhttps://www.baidu.com/api注&#xff…

.NET Core如何通过SSL访问MongoDB?

【.NET Core】| 总结/Edison Zhou大家好,我是Edison。最近有一个ASP.NET Core通过SSL证书访问MongoDB的需求,但是在网上发现资料很少,于是调查了一番,做了如下的笔记,希望对你有用。背景在实际场景中,开发环…