Vue生命周期

最新推荐文章于 2024-06-19 20:53:45 发布
最新推荐文章于 2024-06-19 20:53:45 发布
阅读量95 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangmingzhi111/article/details/130690649
版权

生命周期

1.beforeCreate（）{}

初始化之前，data中的数据和methods中的方法不能拿到，还没有初始化
应用：页面重定向

<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            beforeCreate() {
                console.log(this);  // Vue$3 {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy(Vue$3), _self: Vue$3, …}
                console.log(this.msg); // undefined
                console.log('11111'); // 11111
            }
        })
    </script>
</body>
2.created（）{}

初始化完成，data和methods已经初始化完成，第一个可以调用data和methods的生命周期
应用：数据请求，数据初始化

<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            created() {
                this.msg = 20
                console.log(this);  // Vue$3 {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy(Vue$3), _self: Vue$3, …}
                console.log(this.msg); // 20
                console.log('22222'); // 22222
            }
        })
    </script>
</body>
3.beforeMount（）{}

虚拟的DOM挂载，页面中数据还没有挂载，内存已编译完成，页面中还未渲染新的数据

<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            beforeMount() {
                console.log('333333'); // 333333
            }
        })
    </script>
</body>
4.mounted（）{}

真实的DOM，内存中编译好的模板渲染到浏览器页面中，第一个可以操作DOM元素的生命周期，如果要通过某些插件操作页面上的DOM节点，最早要在mounted中进行

<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            mounted() {
                console.log('44444'); // 44444
            }
        })
    </script>
</body>
5.beforeUpdate（）{}

更新之前，data中数据是最新的，页面中数据还是旧的，未同步，可以执行0次或多次

<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            beforeUpdate() {
                console.log('55555'); // 55555
            }
        })
    </script>
</body>
6.updated（）{}

更新之后，页面中和data中数据保持同步，都是最新的，可以执行0次或多次

<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            updated() {
                console.log('66666'); // 66666
            }
        })
    </script>
</body>
7.beforeDestroy（）{}

销毁之前
应用：清空定时器，页面监听

<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            beforeDestroy() {
                console.log('beforeDestroy');
            }
        })
    </script>
</body>
8.destroyed（）{}

销毁之后

<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            }
            destroy() {
                console.log('destroy');
            }
        })
    </script>
</body>
js之爷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue生命周期总结
weixin_42823014的博客
03-30 2万+
一、vue生命周期 vue生命周期是什么？ Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。 vue生命周期可以分为八个阶段，分别是： beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、dest
Vue生命周期详解
Phoneix的博客
06-25 9929
目录 前言： 一、生命周期流程图详解 1.beforeCreate、Created 2.编辑模板过程 3.beforeMount、Mounted 4.beforeUpdate、Updated 5.beforeDestroy、Destroyed 二、生命周期代码 1.父子组件加载生命周期 2.父子组件更新生命周期 3.父子组件销毁生命周期 前言： 1、什么是vue生命周期？ Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新
Vue 生命周期
weixin_47227886的博客
04-14 3万+
主要阶段 挂载（初始化相关属性） ① beforeCreate ② created ③ beforeMount ④ mounted 更新（元素或组件的变更操作） ① beforeUpdate ② updated 销毁（销毁相关属性） ① beforeDestroy ② destroyed Vue实例的产生过程 ① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。...
超详细vue生命周期解析(详解)
热门推荐
weixin_42707287的博客
12-25 12万+
vue是每一个前端开发人员都绕不过的一个技术，在国内的市场占有量也是非常的大，我们大部分人用着vue, 却不知道他内部其实经历了一些什么。每个生命周期又是什么时候开始执行的。我们今天来详细的看一看 首先，生命周期是个啥？ 借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。 语述 了解之前，我们先贴上一张官网的.
Vue3生命周期
m0_57341617的博客
08-19 11万+
vue3生命周期钩子函数，vue3和vue2钩子的变化
vue生命周期
zhangvalue的博客
09-28 8万+
随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面这个照片是官网中的生命周期照片 二、生命周期函数 Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前
VUE生命周期
qq_48984694的博客
10-31 1002
Vue生命周期
vue 生命周期
qq_64209130的博客
05-07 1254
vue声明周期就是一个vue实例对象从创建到销毁的过程, 从创建vue , 初始化vue对象,初始化vue属性和方法 , 创建模板字符串 , 渲染页面 , 更新 , 销毁 这个过程 生命周期方法分为三大类 1.创建期间的生命周期方法 beforeCreate(创建前) created(创建后) beforeMount(挂载前) mounted(挂载后) 2.运行期间的生命周期方法 beforeUpdate(更新前) updated(更新后) 3.销毁时的生命周期方法 before.
VUE 生命周期
weixin_45628827的博客
02-23 1892
vue生命周期就是每一个vue实例从创建到销毁的过程，在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 通俗来说就是vue实列创建了，经历了一些列的事件，然后销毁了这样的过程。 一般来说vue生命周期分为8钩子函数： ...
浅析Vue 生命周期
08-27
浅析Vue 生命周期 Vue 生命周期是指从 Vue 实例创建到销毁之间的一系列状态，整个过程可以被分为多个阶段，每个阶段都有其特定的钩子函数，可以在不同的生命周期中执行特定的操作。 实例初始化阶段 在创建 Vue ...
vue生命周期实例小结
10-18
下面是对Vue生命周期的详细解释： ### 初始化阶段 1. **`beforeCreate`**：在Vue实例被创建但数据观测（data observer）和属性及方法尚未初始化时调用。这个阶段实例还不能访问数据和DOM，通常用于配置实例的外部...
vue生命周期图片
09-20
这个图片主要介绍的是vue生命周期的整个过程，从创建到销毁的8个阶段
Vue + SpringBoot 实现文件的断点上传、秒传，存储到Minio
最新发布
m0_73179389的博客
06-19 406
前端页面使用的elment-plus的el-upload组件。当上传文件后，会调用handleChange 方法，可以在这里进行文件相关的操作。计算文件的MD5值。
Vue3-滑动到最右验证功能
地理信息的专栏
06-13 511
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
JS面试题第一章
2301_79858637的博客
06-19 121
undefined表示的是无的原始值。但是null表示的是无 对象 0。
vue面试题汇总之响应式理解
fyw1789的博客
06-12 442
vue在全局中写了一个用来运行函数的函数,有一个全局变量保存当前运行的是哪个函数,这样在getter的时候只要检查这个全局变量就知道是哪个函数在使用这个变量了,vue还建立了一个对映关系表当setter的时候把对映表中的函数重新运行一遍。vue2使用Object.defineProperty进行数据代理(getter和setter),vue3使用Proxy进行数据代理。会把函数放入异步队列,同一个渲染函数只会存在一个,这样就不会多次渲染造成效率问题。,当需要派发更新的时候不会立即运行函数,而是交给。
vue 生命周期的理解
10-25
Vue生命周期是指Vue实例从创建到销毁的整个过程，包括了多个阶段，每个阶段都有对应的生命周期函数。Vue生命周期的理解对于开发者来说非常重要，因为它可以帮助我们更好地掌握Vue实例的创建、更新和销毁过程，从而更...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值