Vue中created与mounted的区别浅析

大多数人在谈论生命周期钩子时会感到困惑的一件事是 created 和 mounted 之间的区别。有着相似的名称，觉得应该做同样的事情，但还是有一些细微的差别。

首先，created() 和 mounted() 都可以访问原型上的 data 和 props 。例如，下面的代码中，这两个钩子将在控制台中打印出 My Data 和 My Props ：

<template>
    <div></div>
</template>
<script>
export default {
    data() {
        return {
            dataMsg: "My data",
        };
    },
    props: {
        propMsg: {
            type: String,
            default: "My Props",
        },
    },
    created() {
        console.log(this.dataMsg);
        console.log(this.propMsg);
    },
    mounted() {
        console.log(this.dataMsg);
        console.log(this.propMsg);
    },
};
</script>

created() 和 mounted() 之间的根本区别在于访问DOM，在上面的示例中，如果尝试引用 this.$el，在 created() 中返回 null，在 mounted() 中返回 DOM 元素：

export default {
    created() {
        // 打印 null
        console.log(this.$el);
    },
    mounted() {
        // 打印 DOM 元素
        console.log(this.$el);
    },
};

因此，任何 DOM 操作，甚至使用诸如 querySelector 之类的方法获取 DOM 元素结构将无法在 created() 中使用。因此根据这点区别 created() 非常适合调用 API，而 mounted() 非常适合在 DOM 元素完全加载后执行任何操作。

在 Vue3 组合式API（Composition API）中，created() 和 beforeCreated() 将不再存在，可以取而代之的是 setup()，因此，在 setup() 中 DOM 仍然不可用，而 mounted() 保持不变。

附：vue官网给出的生命周期图

总结

到此这篇关于Vue中created与mounted区别的文章就介绍到这了,更多相关Vue created与mounted区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue created钩子函数与mounted钩子函数的用法区别

    1:在使用vue框架的过程中,我们经常需要给一些数据做一些初始化处理,这时候我们常用的就是在created与mounted选项中作出处理. 首先来看下官方解释,官方解释说created是在实例创建完成后呗立即调用. 在这一步,实例已完成以下配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调.然而,挂载阶段还没开始,$el 属性目前不可见. 这话的意思我觉得重点在于说挂架阶段还没开始,什么叫还没开始挂载,也就是说,模板还没有被渲染成html,也就是这

  • vue中created和mounted的区别浅析

    前言 关于vue.js中的生命周期,如果不是有特别的需求,一般在项目开发过程中更多的使用created和mounted, 所以在本文中主要讲解created与mounted在开发中的主要使用区别. 关于完整的生命周期,不久会在另一篇文章中做整体的理解,包括activated.destroyed等,不过可能会有点晚,大家可以留意一下 版本信息: 系统:win10 Vue:2.5.2 webpack:3.6.0 npm:6.9.0 node:10.15.3 生命周期 完整的生命周期图示为了避免占用板

  • vue 路由子组件created和mounted不起作用的解决方法

    判断项目是否启用keep-alive 启用 使用exclude排除组件(我没有成功不知道为什么) <keep-alive exclude="needExcludeComponentName"> <router-view></router-view> </keep-alive> 使用v-if判断(成功解决) <keep-alive v-if="!$route.meta.noKeepAlive"> <ro

  • Vue实例中生命周期created和mounted的区别详解

    Vue实例中生命周期created和mounted的区别详解

    前言 本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期. 在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注

  • vue.js页面加载执行created,mounted的先后顺序说明

    created页面加载未渲染html之前执行. mounted渲染html后再执行. 由于created在html模板生产之前所以无法对Dom进行操作而mounted可以. 补充知识:关于Vue子组件data选项某个属性引用子组件props定义的属性的几点思考 学过Vue的都知道Vue等MVVM框架相对于传统的JS库比如Jquery最大的区别在于数据驱动视图,重点在于数据,拿到数据后将数据通过模板{{}}语法或者v-html展示在页面上. 我们也都知道在Vue父子组件可以通过Props实现父组件

  • 在vue中created、mounted等方法使用小结

    created:html加载完成之前,执行.执行顺序:父组件-子组件 mounted:html加载完成后执行.执行顺序:子组件-父组件 methods:事件方法执行 watch:watch是去监听一个值的变化,然后执行相对应的函数. computed:computed是计算属性,也就是依赖其它的属性计算所得出最后的值 export default { name: "draw", data(){ // 定义变量source return { source:new ol.source.Ve

  • 谈一谈vue请求数据放在created好还是mounted里好

    建议放在created里 created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作. 如果在mounted钩子函数中请求数据可能导致页面闪屏问题 其实就是加载时机问题,放在created里会比mounted触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了 补充知识:vue各阶段数据可使用情况:created,computed,data,prop

  • Vue中created与mounted的区别浅析

    Vue中created与mounted的区别浅析

    大多数人在谈论生命周期钩子时会感到困惑的一件事是 created 和 mounted 之间的区别.有着相似的名称,觉得应该做同样的事情,但还是有一些细微的差别. 首先,created() 和 mounted() 都可以访问原型上的 data 和 props .例如,下面的代码中,这两个钩子将在控制台中打印出 My Data 和 My Props : <template> <div></div> </template> <script> expor

  • 深入浅析Vue中mixin和extend的区别和使用场景

    Vue中有两个较为高级的静态方法mixin和extend,接下来我们来讨论下关于他们各自的原理和使用场景. Mixin: 原理: 先来看看官网的介绍: 参数:{Object} mixin 用法: 混入也可以进行全局注册.使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例.使用恰当时,这可以用来为自定义选项注入处理逻辑. // 为自定义的选项 'myOption' 注入一个处理器. Vue.mixin({ created: function () { var myOption

  • 浅析Vue中method与computed的区别

    在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. computed称为计算属性,顾名思义,计算就要返回一个计算的结果,所以,当我们要处理大量的逻辑,但是最后要取得最后的结果的时候可以用computed: 为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法:模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模

  • Vue中$router与 $route的区别详解

    Vue中$router与 $route的区别详解

    目录 前言 路由跳转分为编程式和声明式 前言 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, query 等属性. this.$router:全局的 router 实例.通过 vue 根实例中注入 router 实例,然后再注入到每个子组件,从而让整个应用都有路由功能.其中包含了很多属性和对象(比如 history 对象),任何页面也都可以调用其 push(), replace(), go()

  • Vue中methods的this指向问题浅析

    如果是组件的话,将会是VueComponent实例对象,Vue和VueComponent两个类其实差不都,今后会另外开章节描述两者差别,这里先飘过. 比如下面的简单的一个demo代码,点击按钮打印出this. <!DOCTYPE html> <html lang="en"> <head> <script src="../../dist/vue.js"></script> </head> <

  • vue中created、watch和computed的执行顺序详解

    目录 前言 为什么? 1.关于initComputed 2.关于initWatch 总结 前言 面试题:vue中created.watch(immediate: true)和computed的执行顺序是啥? 先看个简单的例子: // main.js import Vue from "vue"; new Vue({ el: "#app", template: `<div> <div>{{computedCount}}</div> &

  • Vue 中 filter 与 computed 的区别与用法解析

    Vue 中 filter 与 computed 的区别与用法解析

    watch与computed.filter: watch:监控已有属性,一旦属性发生了改变就去自动调用对应的方法 computed:监控已有的属性,一旦属性的依赖发生了改变,就去自动调用对应的方法 filter:js中为我们提供的一个方法,用来帮助我们对数据进行筛选 watch与computed的区别: 1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性 2.watch不会缓存数据,每次打开页面都会重新加载一次, 但是computed如果之前进行过计算他会将计算的结果

  • vue中watch和computed的区别与使用方法

    computed 计算属性说明: computed 是基于响应性依赖来进行缓存的.只有依赖数据发生改变,才会重新进行计算(当触发重新渲染,若依赖数据没有改变,则 computed 不会重新计算).若没改变,计算属性会立即返回之前缓存的计算结果. 不支持异步,当 computed 内有异步操作时无效,无法监听数据的变化的值. computed 中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set 变成可读写属性 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对

随机推荐