【前端】重学vue,vue生命周期基础知识了解一下

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

写在前面

上一篇有写到vue的node环境的安装,具体的地址node安装,可点过去看下安装步骤,目前去node官网下载默认是最新版本的18.15.0版本。这个版本可能有些高,可以选择跟目前项目匹配的版本下载安装即可。
如果项目启动遇到项目启动不成功,如下图
【前端】重学vue,vue生命周期基础知识了解一下
这样肯定是node版本的问题,解决方案如下
node.js版本问题需要输入命名来解决,或者是用node的nvm版本管理器调整相应的版本。
命令方式:
在编辑器终端命令行输入如下命令。
命令行输入:$env:NODE_OPTIONS=“–openssl-legacy-provider”
正常解决:
【前端】重学vue,vue生命周期基础知识了解一下

1.npm常用命令

NPM是Network Power Manager缩写,是网络管理电源控制器。安装了node.js之后就可以使用npm命令操作了,因为npm是node.js包管理器。它可以让开发者下载、安装、上传以及管理已经安装的包。

比如一下命令操作:

  • npm install 安装模块
  • npm uninstall 卸载模块
  • npm update 更新模块
  • npm outdated 检查模块是否已经过时
  • npm ls 查看安装的模块
  • npm init 在项目中引导创建一个package.json文件
  • npm help 查看某条命令的详细帮助
  • npm root 查看包的安装路径
  • npm config 管理npm的配置路径
  • npm cache 管理模块的缓存
  • npm start 启动模块
  • npm stop 停止模块
  • npm restart 重新启动模块
  • npm test 测试模块
  • npm version 查看模块版本
  • npm view 查看模块的注册信息
  • npm publish 发布模块
  • npm access 在发布的包上设置访问级别
  • npm package.json的语法。

cnpm介绍

已经知道了npm是什么了,那cnpm是什么呢? cnpm的官方介绍是:cnpm是一个完整npmjs.org镜像,是淘宝定制的cnpm(gzip 压缩支持) 命令行工具代替默认的npm: (3)如果因为网络原因无法使用npm下载,那cnpm这个就派上用场了,看到这,肯定知道了它的用途了吧。

下面就是cnpm的安装命令:

npm install -g cnpm --registry=https://registry.npm.taobao.org

以后有下载慢的包,可以使用cnpm命令进行下载,毕竟是国内的下载速度肯定能提升很多。

vue生命周期

项目前端如果使用Vue实现,必须要知道vue的生命周期,生命周期就是Vue实例从创建到销毁的过程,
vue实例有一个完整的生命周期,即从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
【前端】重学vue,vue生命周期基础知识了解一下
上图这个是v2.0版本的生命周期钩子,那vue3.0有哪些变化呢?

setup取代beforeCreate和created

setup中的函数执行相当于在选项api中的beforeCreate和created中执行

组合式api的生命周期需引入使用

eforeMount -> onBeforeMount,在挂载前被调用

mounted -> onMounted,挂载完成后调用

beforeUpdate -> onBeforeUpdate,数据更新时调用,发生在虚拟 DOM 打补丁之前。此时内存中的数据已经被修改,但还没有更新到页面上

updated -> onUpdated,数据更新后调用,此时内存数据已经修改,页面数据也已经更新

beforeUnmount -> onBeforeUnmount,组件卸载前调用

unmounted -> onUnmounted,卸载组件实例后调用。

errorCaptured -> onErrorCaptured,每当事件处理程序或生命周期钩子抛出错误时调用

renderTracked -> onRenderTracked,状态跟踪,vue3新引入的钩子函数,只有在开发环境有用,用于跟踪所有响应式变量和方法,一旦页面有update,就会跟踪他们并返回一个event对象

renderTriggered -> onRenderTriggered,状态触发,同样是vue3新引入的钩子函数,只有在开发环境有效,与onRenderTracked的效果类似,但不会跟踪所有的响应式变量方法,只会定点追踪发生改变的数据,同样返回一个event对象

activated -> onActivated,与keep-alive一起使用,当keep-alive包裹的组件激活时调用

deactivated -> onDeactivated,与keep-alive一起使用,当keep-alive包裹的组件停用时调用

写到最后

写到这里,是不是对vue生命周期的知识点又了解了一些,了解了更多的知识请关注公众号。

【前端】重学vue,vue生命周期基础知识了解一下文章来源地址https://www.toymoban.com/news/detail-406526.html

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

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

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

相关文章

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

    Vue实例从创建到销毁的过程,叫生命周期。 从开始创建、初始化数据、编译模版、挂载Dom-渲染、更新-渲染、销毁等过程。 创建前/后, 载入前/后,更新前/后,销毁前/销毁后 beforeCreate (创建前):在数据观测和初始化事件还未开始。 在实例初始化之后,数据观测和事件配置之

    2024年02月09日
    浏览(45)
  • 关于vue3生命周期的使用、了解以及用途(详细版)

    每一个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如数据侦听,编译模板,挂载实例到DOM,以及在数据改变时更新DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。最常用的是created、mounted、updated和unmounted。

    2024年01月19日
    浏览(42)
  • 前端学习--Vue(4) 生命周期

    一个组件从创建-运行-销毁的真个阶段,强调的是一个时间段  1.1.1 创建 (只执行一次) created() 阶段任务:最早可以使用methods中的方法发起ajax请求获取数据,并将数据挂载到data中 mounted() 阶段任务:最早可以操作dom元素 1.1.2 运行 (最少0次,最多n次) beforeUpdate() 触发时机:

    2024年02月07日
    浏览(41)
  • 前端面试题——详解VUE的生命周期

    前端面试时,很多面试官都会问这样一道题,“学习过vue吗,了解VUE的生命周期吗”,因为vue它是现在前端用的最多的一个框架,想要找前端工作的朋友们还是有必要掌握一下vue的生命周期以及每个周期的作用。下面给大家详解一下vue的生命周期,也欢迎大家对其进行补充!

    2024年02月15日
    浏览(41)
  • 【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日
    浏览(42)
  • 【前端】Vue生命周期函数(详细讲解+中文图解)

    生命周期: 从vue实例产生开始到vue实例被销魂这段时间所经历的过程 vue实例的 创建和销毁过程 好比 人的一生从出现到死亡过程 。在其中一些 重大经历 ,也就是特殊时间点,我们可以做什么事情 在vue的一生中,从vue组件创建开始一直到其被销毁时的时间段中,也被建立了

    2024年02月13日
    浏览(61)
  • 前端页面点击刷新-触发vue生命周期加载最新数据

    需求背景:layout布局,页面头部通过定时器获取后端消息的伪消息通知功能,在点击消息时获取所有消息总数并且刷新页面,以便触发vue的生命周期重新获取所有消息,消息展示在content中。  要触发页面刷新,可以使用vue路由的router.push方法,添加一个动态的query参数,可以

    2024年02月21日
    浏览(50)
  • 【前端基础知识】Vue中的变量不是响应式的吗?属性赋值后视图不变化的原因是什么?

    Vue是一款在国内非常流行的框架,采用MVVM架构,它提供了一种响应式的数据双向绑定机制,使得开发者可以更方便地管理模型和视图。但是在Vue2中,由于使用了 Object.defineProperty 来追踪属性变化,但是它只能追踪已经存在的属性,无法追踪动态添加的属性,导致我们动态添加

    2024年02月01日
    浏览(38)
  • vue基本知识:methods,computed,watch,生命周期

    (Ⅰ)重点知识目标 2.1 Methods选项 使用场景 : 在开发中,我们经常需要用到函数, 通过将一些需要复用的逻辑封装在函数里,多次调用这个函数来增强逻辑代码复用性,在vue中,函数被定义在methods选项里来使用,定义完后就可以在vue 表达式中调用函数 2.2.1 基本用法 语法结构:

    2024年01月22日
    浏览(46)
  • 前端开发框架生命周期详解:Vue、React和Angular

    作为前端开发者,掌握前端开发框架的生命周期是非常重要的。在现代Web应用开发中,Vue.js、React和Angular是三个最流行的前端开发框架。本篇博客将详细解读这三个框架的生命周期,包括每个阶段的含义、用途以及如何最大限度地利用它们。通过详细的代码示例和实用的技巧

    2024年02月13日
    浏览(51)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包