vuejs中的beforeMount和created生命周期钩子有什么区别

2024-01-04

我仍然不清楚应该在哪里使用 beforeMount 以及在哪里创建生命周期挂钩。在我看来,在这两种情况下,反应数据都已加载,并且是在 DOM 挂载之前。


大多数情况下,是否使用并不重要beforeMount or created但有一些地方很重要:

访问根 Vue 组件挂载的原始 DOM 元素

  • 对于与任何服务器端渲染框架(php、rails 等)集成非常有用
  • 解释和示例 -何时在 vue.js 中使用生命周期方法 beforeMount? https://stackoverflow.com/questions/57077104/when-to-use-the-lifecycle-method-beforemount-in-vue-js
  • in created hook this.$el is undefined, in beforeMount它是原始的未修改的元素,在mounted它是由您的组件/模板创建的根元素

服务器端渲染(Nuxt、Vuepress 等)

  • docs https://ssr.vuejs.org/guide/universal.html#component-lifecycle-hooks
  • beforeCreate and created仅在服务器上调用钩子
  • 这意味着您不应该使用任何需要的代码window, document或任何浏览器 APIcreated因为这些不会出现在服务器上
  • 另一方面代码放置在beforeMount (or mounted) 被执行仅在客户端上(浏览器)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs中的beforeMount和created生命周期钩子有什么区别 的相关文章

  • 如何使用 Vue 路由器从 Vuex 操作进行导航

    我正在使用 Vue 2 x 和 Vuex 2 x 创建一个 Web 应用程序 我正在通过 http 调用从远程位置获取一些信息 我希望如果该调用失败 我应该重定向到其他页面 GET PETS state gt return http get
  • vue.js keyup, keydown 事件落后一个字符

    我正在使用 keydown keyup 事件 它调用一个 javascript 函数 该函数将输入框的值打印到控制台 以及事件的 currentTarget 字段的值 并且我注意到它晚了一个字符 例如 如果我输入hello进入输入框 我只看
  • vue中有自动更新这段代码的东西吗?

    我在导航器中找到了这个按钮 当用户登录时会显示该按钮 而当用户注销时该按钮就会消失 但现在我需要在按钮删除 出现之前刷新页面 这是我的代码 Button div div class div div
  • 从vue中的api加载路由

    我正在尝试从我的 API 在 Vue 应用程序中加载路由 我尝试将数据推送到路由变量并使用 addRoutes 方法 但没有运气 我认为异步可能存在问题 但为什么 addRoutes 不起作用 这是我的代码 import Vue from
  • 如何预渲染多个Vue应用页面?

    我正在尝试 未成功 在使用 Vue CLI 搭建的同一项目中预渲染多个 Vue 应用程序的 HTML 由于多种原因 我不想使用 Vue Router 或 Nuxt 等 我尝试过使用预渲染 Spa 插件 https github com ch
  • 组件内调用 Mixin 的方法(Vuejs)

    我无法从组件调用 mixin 方法 出现此错误this hello is not a function 我可以打电话hello 来自 Vue 实例 但我无法在组件内调用它 有什么事吗 div div
  • 媒体查询在 VueJS 样式标签中不起作用

    我正在尝试在 VueJS 组件的样式标签中使用 media media 中的样式始终有效 而不是使用宽度规则
  • 观察数组中当前值的变化

    每当它改变半径和中心时 我想监视每个项目 每当它改变时 我想 console log 项目索引和值 let map ref null map value circles是一个数组 当我使用此监视功能时 它仅在加载时显示一次值 我希望每次它在
  • 未捕获的类型错误:emit 不是 vue3 中的函数

    当我在 vue 3 设置代码块中编写此代码以获取输入值时 请遵循此answer https stackoverflow com questions 66737918 how to use v model on component in vu
  • vue:转义并渲染 HTML 字符串?

    我正在尝试在模板中渲染一些 HTML 字符串 但我希望它们是字符串 我不想渲染 富文本 我开始于
  • Font Awesome 图标未按预期在选项列表中加载(但在选择时加载)

    我有一个使用 bootstrap vue 的选项列表 如下所示 它在选择窗口中看起来不错 但打开下拉菜单时并非所有图标都显示 选择图标后 将显示 IE 螺栓显示 但选择时 图标列的代码
  • Vuex store.watch 只接受 Vue routerguard 中的函数

    我正在尝试观察并等待 Vue 路由器防护从 Vuex 获取最终值 但它会抛出异常 vuex store watch 只接受一个函数 这是代码 const isAdmin get store getters user isAdmin unde
  • 如何将类应用于 Buefy 表中的特定单元格?

    我想知道是否有一种方法可以动态应用针对 Buefy 表中特定单元格的类 作为示例 以下是我正在处理的代码 模板
  • 监听 Vue.js 中的自定义事件

    Vue js 非常适合处理浏览器事件 例如click or mousedown 但根本不适用于自定义事件 这是代码 HTML div style display none div div div div div
  • Vue.js - 如何删除 hashbang #!来自网址?

    如何删除哈希爆炸 来自网址 我在 vue 路由器文档中找到了禁用 hashbang 的选项 http vuejs github io vue router en options html http vuejs github io vue r
  • Nuxt + Vuex - 如何将 Vuex 模块分解为单独的文件?

    在 Nuxt 文档中 here https nuxtjs org guide vuex store module files 它说 您可以选择将模块文件分解为单独的文件 state js actions js mutations js an
  • 当 Vuejs 中的 props 值发生变化时,DOM 不会更新

    我有父母和孩子 在父级中 我将 3 个变量作为 props 传递给子级 在孩子中我正在使用watch 寻找变量的变化 当孩子第一次被创建时watch按预期工作 但是当更新 props 中的数据时 子级的 DOM 不会更新 正在寻找变量数据变
  • 作为对象访问 vue-i18n 消息

    我想创建一个取决于页面的动态滑块 security signin slide1 Kitten1 slide2 Kitten2 signup slide1 Kitten1 slide2 Kitten2 slide3 Kitten3 问题是我想
  • nuxtjs 无法在生产环境中显示动态 url

    我正在使用 nuxjs 构建我的项目 并创建一个动态显示地点信息的页面 当我跑步时npm run dev并测试http localhost 3000 place 66bb50b7a5 http localhost 3000 place 66
  • Laravel Vue js spa 应用程序

    1 我想知道为什么人们使用两台服务器用 laravel 制作 vuejs SPA 我想我们可以用另一种方式 制定这样的路线 Route get any function return view index gt where any 并让 v

随机推荐

  • Apache Spark 的性能调优

    我正在开发一个项目 我必须调整 Spark 的性能 我发现了四个最重要的参数 它们将有助于调整 Spark 的性能 它们如下 火花记忆分数 Spark 内存 offHeap 大小 Spark Storage MemoryFraction S
  • Entity Framework Core 将不会映射到 BigInteger

    我需要使用BigInteger类来处理我的类的大整数 但是当尝试使用 Entity Framework Core 映射到数据库表时 我收到以下错误 该物业AllianceRank Reputation无法映射 因为 它是类型BigInteg
  • app-release.apk 是 zipaligned apk 吗?

    我使用的是Android Studio 1 0 2 当我在gradle任务中单击assembleRelease时 会生成两个文件 app release unaligned apk和app release apk 我知道 app relea
  • 使用 python 进行 SICP 的材料?

    我想用 Python 尝试 SICP 任何人都可以指出教授计算机程序的结构和解释的材料 视频 文章 python 目前正在学习 Abelson Sussman 和 Sussman 的 SICP 视频 我想这对你来说会很棒CS61A SICP
  • 尝试从应用内发送电子邮件但不起作用 - Swift (iOS)

    我尝试了来自不同网站的 2 个代码从我的 iOS 应用程序发送电子邮件 当我按下Send按钮它调用方法邮件撰写控制器并且总是返回日志 邮件已发送 作为result参数总是MFMailComposeResultSent value 即使我有
  • 管道中何时进行路由?

    ASP NET MVC 管道中何时进行路由 IIS 7 0 的 ASP NET 应用程序生命周期概述 http msdn microsoft com en us library bb470252 aspx 是否在第 2 步 执行 URL 映
  • TinyMCE初始化后修改工具栏的正确方法

    我正在使用 JavaScript 扩展云托管的 LMS 因此 我们可以在页面中添加javascript 但不能针对不同的组件修改供应商的javascript LMS 经常使用tinyMCE 目标是在每个tinyMCE编辑器的工具栏上添加一个
  • 通过向包装器传递 R 中的一组参数来生成 N 个 ggplot 图?

    我有一个输出数据框的函数 如下所示 df A tibble 100 x 7 test idx train user id test user id train idx D isSame D rank
  • 如何修复 PHP 警告:PHP 启动:无法加载动态库 'ext\\php_curl.dll'?

    我目前在 Windows Server 2008 R2 上安装了 PHP 5 5 12 和 Apache 2 4 一切都运行完美 没有问题 警告 我所做的是将相同的 Apache 文件 配置复制到另一台服务器 我复制了C PHP目录 然后是
  • 正则表达式在文本中查找 url

    我必须使用正则表达式找到文本中的第一个网址 例如 I love this website http www youtube com music it s fantastic or es http www youtube com music
  • 具有可变数量的特定类型参数的 C++ 函数

    我刚刚了解了 C 中的可变参数模板 我实现了它 但我想知道它可以执行以下操作吗 如果我想要一个参数数量可变的函数 我可以这样做 template
  • 如何在React函数组件中不使用useEffect钩子来获取数据?

    我知道使用钩子时的传统方法是使用useEffect钩 但是为什么我不能直接在功能组件中调用axios而不是hook然后设置数据呢 基本上 我想问这样做有什么问题 const users setUsers useState null axio
  • 动态设置字典深处的值

    如果我有一个嵌套字典d a b 和一个字符串 a b c 和一个值 X 我需要根据键字符串将值放入字典中 我想要实现的目标可以硬编码为d a b c X 但我需要动态地做到这一点 密钥字符串可以是任意长度 对于奖励积分 如果密钥不存在 我还
  • 跟踪代码中某个点的所有语句

    我正在尝试跟踪复杂的 Python 应用程序 OpenERP 中的调用和代码流 更复杂的是 OpenERP 有自己的继承系统 与普通的 Python 继承并行 我想做的是获得执行代码的完整列表 以及模块 函数名称 我尝试过 Eclipse
  • 在 jQuery 验证中忽略所有隐藏的 div,但不忽略一个

    我在表单中使用 jQuery 验证http jqueryvalidation org documentation http jqueryvalidation org documentation 我想将验证添加到我的所有字段 但我想忽略隐藏的
  • 在 Mendix 中更新实体时,数据视图未更新

    问题是 如何在数据视图中显示数据 以便如果实体更新 数据视图也会更新 这是我的实体名称latestReading 这是我的页面LatestReading显示最新读数 它包含三个数据视图 该页面不会直接调用 因为它需要一个对象latestRe
  • 对 Ruby on Rails 应用程序的 OpenID 支持

    在 Ruby on Rails 应用程序中启用 OpenID 登录的最新技术是什么 这是一个社区 wiki 其中包含该问题的最新答案 真实逻辑 最先进的身份验证解决方案似乎是真实逻辑 http github com binarylogic
  • Angular 6 - 请求的资源上不存在“Access-Control-Allow-Origin”标头

    我有一个 Angular 6 项目 其中有一个服务指向 server js Angular is on port 4200 and Server js is on port 3000 当我将服务指向http localhost 3000 a
  • 为什么我的 QT 应用程序无法运行?

    我在 Windows 7 64 位 使用 msvc 2010 上使用 Qt Creator 构建了一个 Qt 5 应用程序 该应用程序在我的计算机上完美运行 但在其他计算机上无法运行 我复制了所有显示为缺失的 dll依赖步行者进入程序文件夹
  • vuejs中的beforeMount和created生命周期钩子有什么区别

    我仍然不清楚应该在哪里使用 beforeMount 以及在哪里创建生命周期挂钩 在我看来 在这两种情况下 反应数据都已加载 并且是在 DOM 挂载之前 大多数情况下 是否使用并不重要beforeMount or created但有一些地方很