[暑假]Vue生命周期-笔记

news2025/1/24 17:50:25

什么是生命周期?

生命周期:

                又名: 生命周期回调函数, 生命周期函数, 生命周期钩子.

                 所谓的生命周期函数, 就是Vue在关键时刻帮我们调用的一些特殊名称的函数

                生命周期函数的名字不可更改, 但是函数的具体内容是程序员根据需求编写的

                生命周期函数中的 this 指向是 vm 或 组件实例对象

1.

 出现 属性与数据名重复的情况 可以写成简写形式 ⬇⬇⬇⬇⬇

2. 什么是onload?

onload 事件 (加载事件)  会在页面或图像加载完成后立即发生

onload事件 通常用于 <body>元素, 在页面完全载入后(包括图片, CSS文件等等). 然后执行脚本代码

例子:

                window.οnlοad= function()   

3.什么是挂载?

将真实DOM放入页面的这一步中的 放入, 官方的专业术语叫 挂载

        进一步理解:

                Vue完成模板解析并把初始的(也就是第一次解析的)真实的DOM元素放入页面后(完成挂载) 调用mounted函数

拓展:

        Init : 全称: initialization    翻译:初始化

        component  翻译: 作名词时意为“组成部分;成分;组件,元件”,作形容词时意为“ 组成的;构成的

        node :  翻译: 节点

        render 是渲染的意思

        re-render 是重新渲染的意思

        Teardown: 是 移除的意思

这里面的option是配置项的意思 data那个配置项 应该....

4.调试的时候 设置断点可以使用 debugger

5. 在哪个生命周期钩子中页面和数据尚未保持同步?

beforeUpdate 此时: 数据是新的, 但是页面时旧的, 即: 页面尚未和数据保持同步

6. 其中的patch 本身翻译是 修补的意思    但是 在此处应当是 新的虚拟DOM和旧的虚拟DOM进行的一个比较

7.总结:

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

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

相关文章

CSS样式:渐变色圆角边框

目录预期效果解决方法1.两层元素&#xff1a;外层渐变背景圆角内边距&#xff0c;里层圆角背景色2.伪元素&#xff1a;background-clip属性伪元素定位元素本身背景&#xff08;以伪元素背景色做边框&#xff09;3.单层元素&#xff1a; background-clipbackground-iamgebackgro…

PDF.js 预览pdf文件流预览pdf,及ie浏览器兼容性问题,解决方案!!(开发笔记)

一、 官网下载pdf.js &#xff1a;Getting Started 注意&#xff1a; 这俩包 都不支持ie&#xff0c;因为用的是es6&#xff0c;ie解析不出来 下完以后引进去。下面为省事 找几个市面上常用的方法&#xff1a; 1、文件流转base64的 这是在自己的js请求里面 //PDFdata 是a…

Nginx超时配置

Nginx主要有四类超时设置&#xff1a;客户端超时设置、DNS解析超时设置、代理超时设置&#xff0c;如果使用ngx_lua&#xff0c;则还有lua相关的超时设置。 1&#xff0e;客户端超时设置 对于客户端超时主要设置有读取请求头超时时间、读取请求体超时时间、发送响应超时时间、…

vue项目 升级依赖包

项目维护过程中&#xff0c;可能会因为依赖包存在漏洞而升级依赖&#xff0c;或者因为需要高本版中提供的新特性而升级依赖。 在升级依赖之前&#xff0c;可以先执行 npm outdated 命令&#xff0c;查看当前哪些已安装软件包版本过时了。 标签释义current代表当前版本号want…

【面试】什么是网关/服务网关?网关/服务网关的作用是什么?

文章目录一、前言二、网关2.1 什么是网关&#xff1f;2.2 网关的作用是什么&#xff1f;2.3 网关的工作流程2.4 软件系统网关三、什么是服务网关四、为什么需要服务网关五、服务网关应用一、前言 对于网关&#xff0c;从专业角度&#xff0c;一般运维和网络管理员会比较了解一…

vant官网-vant ui 首页-移动端Vue组件库

Vant 是有赞前端团队开源的移动端vue组件库&#xff0c;适用于手机端h5页面。 鉴于百度搜索不到vant官方网址&#xff0c;分享一下vant组件库官网地址&#xff0c;方便新手使用 vant官网地址https://vant-contrib.gitee.io/vant/#/zh-CN/ 通过 npm 安装 在现有项目中使用 V…

【JavaScript】JS实用案例分享:输入智能提示 | 打字机输出效果

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 &#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff08;源创征文一等奖作品&#xff09;&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&am…

前端Vue之发布订阅模式

目录 1.什么是发布订阅模式 2.实现简单的发布订阅 3.收集更新函数 4.触发更新函数 5.总结 一个响应式数据可能会有多个视图部分都需要依赖&#xff0c;也就是响应式数据变化之后&#xff0c;需要执行的更新函数可能不止一个&#xff0c;对于这种情况&#xff0c;有必要学习…

node使用管理神器NVM安装配置超详细步骤(window10)

使用NVM对node进行版本管理前言一、什么是nvm&#xff1f;二、nvm下载安装配置1.下载2.nvm解压安装3.检查环境变量4.确认安装成功5.设置和安装node5.1 设置淘宝镜像5.2 安装node指定版本并使用5.2.1 执行以下命令自动安装指定版本的node和npm&#xff1a;5.2.2 查看已经安装的n…

Vue3.0项目——打造企业级音乐App(一)Tab栏、轮播图、歌单列表、滚动组件

系列文章目录 内容参考链接Vue3.0 项目启动Vue3.0 项目启动&#xff08;打造企业级音乐App&#xff09;Vue3.0项目——打造企业级音乐App&#xff08;一&#xff09;Tab栏、轮播图、歌单列表、滚动组件Vue3.0项目——打造企业级音乐App&#xff08;二&#xff09;图片懒加载、…

路由守卫的详解

路由守卫总共有7个 全局路由守卫: beforeEach 前置守卫 affterEach 后置守卫 beforeResolve 解析守卫 路由的守卫 beforeRouterEnter 进入组件之前触发,在Created前面 beforeRouterUpdated 路由更新但是内容不会改变 beforeRouterLeave 离开之前触发,在beforeDestory之前…

vue3 - ref和reactive的区别

文章搬运自wx60d4764eb475e 的vue3中ref和reactive的区别&#xff08;系列六&#xff09; 1. ref和reactive区别: 如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value 如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.val…

ErrorCaptureStackTrace(err); Error [ERR_MODULE_NOT_FOUND]: Cannot find module

目录结构 main.js import { Name, say, Person } from ./testconsole.log(Name)test.js const Name life function say() {console.log(Mine) } let Person { name: good }export { Name, say, Person }问题分析 步骤有点啰嗦&#xff0c;犯错的原因其实就很简单&#xff…

Vue自定义指令原来这么简单

本篇学习目标 能够了解组件进阶知识能够掌握自定义指令创建和使用能够完成tabbar案例的开发 1. 组件进阶 1.0 组件进阶 - 动态组件 目标: 多个组件使用同一个挂载点&#xff0c;并动态切换&#xff0c;这就是动态组件 需求: 完成一个注册功能页面, 2个按钮切换, 一个填写注册…

微信小程序(四)--- 自定义组件详解(properties,数据监听器,纯数据字段,插槽,父子间通信,behaviors)

目录 一、创建组件 二、引用组件 1、局部引用 2、全局引用 三、组件和页面的区别 四、组件样式隔离 1、注意点 2、修改组件的样式隔离选项 五、数据、方法、属性 1、data数据 2、methods方法 3、properties属性 4、data和properties的区别 5、使用setData修改proper…

AndroidStudio网格布局(制作计算机界面)

目录 网格布局特点&#xff08;类似于表格&#xff09; 常用属性&#xff1a; 针对布局的属性 针对子控件的属性 实例演示 创建一个安卓应用插入一张背景图片&#xff08;可以不加&#xff09; 打开字符串资源文件 strings.xml改应用标题名字&#xff08;可不改&#xf…

uniapp微信公众号h5微信授权登录

前言 在微信客户端中访问第三方网页&#xff0c;公众号可通过微信网页授权机制&#xff0c;来获取用户基本信息&#xff0c;进而实现业务逻辑。 关于公众号网页授权前期准备&#xff1a; 1.微信公众号开发&#xff0c;首先要搞一个公众号&#xff0c;开发阶段可以申请一个公众…

element ui+vue实现导航栏菜单以及页面跳转

关于博主&#xff1a; 不知道算不算的上入门&#xff0c;就是刚刚学习vue框架&#xff0c;断断续续的学习&#xff0c;所以有些地方讲的不正确也欢迎大家批评斧正&#xff0c;希望与大家共同进步 问题描述 对于初学前端的我们来说搭建一个路由导航界面还是比较困难的&#xf…

Web基础知识

1&#xff0c;Web基本概念和常识 ①web应用&#xff1a;网站&#xff08;广义上的PC&#xff0c;手机app&#xff09; ②浏览器&#xff08;Browser&#xff09;&#xff1a;也称用户代理&#xff0c;web客户端&#xff0c;主要有IE、Edge、Chrome、Firefox、腾讯浏览器&#x…

nvm 安装使用及配置淘宝下载镜像

NVM介绍 NVM全称node.js version management &#xff0c;专门针对node版本进行管理的工具&#xff0c;通过它可以安装和切换不同版本的node.js。 MVM下载 githhub下载地址&#xff0c;选择nvm-setup.zip&#xff1a;安装版&#xff0c;推荐使用 https://github.com/coreyb…