vue-生命周期函数

最新推荐文章于 2022-10-24 10:11:45 发布
最新推荐文章于 2022-10-24 10:11:45 发布
阅读量154 收藏
点赞数
分类专栏： web前端 文章标签： vue 生命周期 钩子函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/banxia117/article/details/82627110
版权

vue中所有的钩子函数

  • beforeCreate (创建前)
  • created (创建后)
  • beforeMount (载入前)
  • mounted (载入后)
  • beforeUpdate (更新前)
  • updated (更新后)
  • beforeDestroy (销毁前)

  • destroyed (销毁后)

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <title>vue生命周期</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
    <div id="app">
        <input v-model="message"></input>
        <h1>{{message}}</h1>
    </div>
</body>
<script>
    var vm=new Vue({/*创建vue对象*/
        el:"#app",/**挂载目标**/
        data:{
            message:'Hello World!'
        },
        computed:{/*实现某一属性的实时计算*/
            messgae1:function(){
                return this.message.spilt(" ").reverse().join(" ");
            }
        },
        watched:{/*检测某一属性值的变化*/

        },
        methods:{/*组件内部的方法*/

        },
        // 实例初始化之后(刚刚创建了实例,还没初始化data,methods,computed...)
        beforeCreate:function(){
            console.group('------beforeCreated创建前状态------');
            // console.log(this); // 在事件钩子中,this代表当前对象实例
            console.log("%c%s","coloe:red","el     : "+ this.$el); //undefined
            console.log("%c%s","color:red","data    :" + this.$data); //undefined
            //此时vue中有值但未被初始化,{{message}}未被解析
            console.log("%c%s","color:red","message: " + this.message); //undefined
        },
        /**
                    * 1. 在beforeCreate和created钩子之间, 程序开始监控Data对象数据的变化及vue内部的初始化事件
                    *
                    **/
                    // 创建了实例, 初始化了data, methods,computed...,并且启动了数据监听
                    created:function(){
                            console.group('------created创建完毕------');
                            console.log("%c%s","coloe:red","el     : "+ this.$el); //undefined
                            console.log("%c%s","color:red","data    :" + this.$data); //已被初始化
                            // 此时{{message}}还未被解析,我们可以手动添加msg的值
                            console.log("%c%s","color:red","message: " + this.message); //已被初始化
                        },
                        /**
                        * 2. 在created和beforeMount之间, 判断是否有el选项, 若有则继续编译,无,则暂停生命周期;
                        * 然后程序会判断是否有template参数选项,若有, 则将其作为模板编译成render函数. 若无, 则将外部html作为模板编译(template优先级比外部html高)
                        **/
                        // 在数据挂载之前,可以对数据做最后一次修改
                        beforeMount:function(){
                            console.group('------beforeMount挂载前状态------');
                            console.log("%c%s","coloe:red","el     : "+ this.$el); //已被初始化
                            console.log("%c%s","color:red","data    :" + this.$data); //已被初始化
                            console.log("%c%s","color:red","message: " + this.message); //已被初始化
                        },
                        /**
                        * 3. 在beforeMount和mounted之间. 程序将上一步编辑好的html内容替换el属性指向的dom对象或者选择相对应的html标签里面的内容
                        * 
                        **/
                        //数据挂载(渲染)之后,即model中的数据显示到了view中
                        mounted:function(){
                            console.group('------mounted 挂载结束状态------');
                            console.log("%c%s","coloe:red","el     : "+ this.$el); //已被初始化
                            console.log(this.$el);
                            console.log("%c%s","color:red","data    :" + this.$data); //已被初始化
                            // 此时在页面中打印出'Hello World!'
                            console.log("%c%s","color:red","message: " + this.message); //已被初始化
                        },
                        // 以上四个阶段在一次渲染之后就不会再执行了
                        /**
                        * 4. mounted和beforeUpdate之间, 程序实时监控数据变化
                        *
                        */
                        beforeUpdate:function(){
                            console.group('beforeUpdate 更新前状态=============>>');
                            console.log("%c%s","coloe:red","el     : "+ this.$el); 
                            console.log(this.$el);
                            console.log("%c%s","color:red","data    :" + this.$data); 
                            // 未执行,因为值没变,一旦发生改变,beforeUpdate就会被反复执行
                            console.log("%c%s","color:red","message: " + this.message); 
                        },
                        /**
                        * 5. beforeUpdate和updated之间, 实时更新dom
                        *
                        **/
                        // 模型发生改变,并且数据渲染之后执行,每次改变都会激发
                        updated: function(){
                            console.group('updated 更新完成状态============>>');
                            console.log("%c%s","coloe:red","el     : "+ this.$el); 
                            console.log(this.$el);
                            console.log("%c%s","color:red","data    :" + this.$data); 
                            console.log("%c%s","color:red","message: " + this.message); 
                        },
                        beforeDestory:function(){
                            console.group('beforeDestory 销毁前状态============>>');
                            console.log("%c%s","coloe:red","el     : "+ this.$el); 
                            console.log(this.$el);
                            console.log("%c%s","color:red","data    :" + this.$data); 
                            console.log("%c%s","color:red","message: " + this.message); 
                        },
                        /**
                        * 6. 实例销毁 (一般我们等不到它销毁)
                        *
                        **/
                        destoryed:function(){
                            console.group('destoryed 销毁完成状态============>>');
                            console.log("%c%s","color:red","el     : "+ this.$el); 
                            console.log(this.$el);
                            console.log("%c%s","color:red","data    :" + this.$data); 
                            console.log("%c%s","color:red","message: " + this.message);
                        },
                    })  
        </script>
</html>

    看完没有明白的请看下边链接:

    https://segmentfault.com/a/1190000008010666

banxia117
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue生命周期函数
weixin_47106572的博客
06-11 216
官方图详解 <body> <div id="app"> <h3 id="h3">{{msg}}</h3> <input type="button" value="修改msg" @click="msg='No'"> </div> <script> var vm = new Vue({ el:'#app',
vue的生命周期函数
weixin_40669758的博客
03-05 153
VUE的生命周期函数表示vue在实例化到销毁过程自动执行的函数 2.第一个生命周期函数beforeCreate,表示vue实例在完全创建之前自动执行的函数，这时data和methods还没有初始化 <div id="app"> <div id="name">{{name}}</div> <input type="button" @click="...
【Vue】Vue基础自用笔记&Day04_①Vue组件②Vue插槽
一个普通人的博客
09-22 430
什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。 一个优秀的组件 / 模块应该做到：高内聚，低耦合耦合性：每个模块之间相互联系的紧密程度，模块之间联系越紧密，则耦合性越高，模块的独立性就越差内聚性：一个模块中各个元素之间的联系的紧密程度，如果各个元素（语句、程序段）之间的联系程度越高，则内聚性越高，即‘高内聚’如一个项目中有15个模块，需要在另一个项目中调用其中的一个模块，但是必须把全部的15个模
VUE组件封装Tips
weixin_42214717的博客
10-24 1912
在开发项目时我们往往都需要去封装一些组件出来。但如果封装的不好，组件的封装会使得维护起来特别麻烦，适得其反，那让我们看看封装组件时应该注意哪些事项吧。
浅谈高内聚低耦合
热门推荐
王永迪的专栏
06-15 1万+
高内聚低耦合，是软件工程中的概念，是判断设计好坏的标准，主要是面向对象的设计，看类的内聚性是否高，耦合度是否低
Vue面试系列之五：谈一谈对vue组件化的理解？
jmsLU的博客
08-11 597
首先，这个问题比较大，对于这种问题，我们可以从多个方面进行分析概括； 其次，要注意回答思路，可以从以下几个方面进行阐述： 组件化的定义； 组件化的优点； 组件化的使用场景和注意事项等； vue中组件化的一些特点; 1. 组件化的定义 组件定义: 源码位置：src\core\global-api\assets.js 组件定义的方式： // 全局组件定义 Vue.component('comp'，{ template:'<div>this is a component&l
React 和 Vue 到底谁更牛？听听尤雨溪怎么说
前端大全
12-13 8873
（给前端大全加星标，提升前端技能）来源：开源中国www.oschina.net/news/102645/react-vs-vuejs知乎上近日有人发起了一个 “react...
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
vue-devtools
最新发布
03-27
你可以查看每个组件的状态，包括props、data、computed属性、methods以及生命周期钩子函数。点击组件可以查看其模板和渲染后的DOM结构。 2. **状态管理**：如果你使用了Vuex进行状态管理，Vue Devtools还可以帮助你...
vue-生命周期+工程化开发(三)-小黑记账单
02-11
在Vue.js框架中，"生命周期"是指一个Vue实例从创建到销毁的过程，它涉及到一系列的初始化、更新和销毁阶段。了解Vue的生命周期对于优化代码、解决问题以及深入理解组件的工作原理至关重要。在这个“vue-生命周期+...
vue 生命周期函数
12-21
在Vue应用中，每个组件都有其特定的生命周期，生命周期函数是理解Vue工作原理的关键部分。本篇文章将深入探讨Vue组件的生命周期及其相关的知识点。 1. **Vue组件生命周期** Vue组件从创建到销毁的过程可以分为几个...
Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解
08-28
参数：选项对象可以包含，数据(data)、挂载元素(el)、方法(methods)、模版(template)、生命周期函数等等。 1.2 数据与方法 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的...
Vue进阶系列 --- 页面架构优化
帕尼尼的博客
07-08 7398
写在前面 玩vue已经快一年了，回首第一次遇见vue的时候，还是大二的暑假，一晃已经走完了大三。我们都知道编程的学习是分软功和硬功的。外练筋骨皮，内练一口气就是这个道理。 那么什么是硬功呢？硬功就是Vue语法的掌握，JS语法的掌握等等。 那么什么是软功呢？算法思想，编程思想，架构思想。 思想思想，对咯，软功就是思和想。一个没有思想的程序员，只知道重复搬砖，不知道造轮子，组...
Vuex数据放在Module实现数据高内聚低耦合
grand_brol的博客
09-14 252
index.js文件 import Vue from 'vue' import Vuex from 'vuex' import customModule from './module/custom' Vue.use(Vuex) export default new Vuex.Store({ strict: process.env.NODE_ENV !== 'production', state: { }, mutations: { }, actions: { }, mod
Activity生命周期的作用及意义
qq_42447950的博客
08-05 2645
前言       Activity生命周期是研究Android开发最基础的知识点之一，熟练掌握生命周期的特性可以在实际开发中避免踩坑。比如，一些UI的初始化和回收操作、框架库的注册于反注册（摧毁）、线程的启动和停止等。另外，本文在最后章节还会讲解系统回收造成的问题。本文就是针对各生命周期进行分析和解答，帮助大家完全掌握生命周期。   推荐阅读： Android 源码分析Applicati...
低耦合高内聚 - 不要把所有东西都放在 vuex中
weixin_30826095的博客
07-29 488
我就举一个例子。比如，我想看电视，是否需要遥控器？？请认真思考这个问题。 看似电视与“我”已经解耦了。然而，我需要通过遥控器去看电视，我的目的是看电视，但是我却需要依赖遥控器这个中间件。这就变相地将“我”与电视的依赖关系，变成了我与遥控器的依赖关系。虽然“我”与电视解耦了，但是“我”与遥控器却紧密联系在一起。 那么回到最初的问题，我的目的是看电视。我是否一定需要与电视解耦呢？答案是不一定！以此...
-webkit-内核兼容处理
banxia117的博客
10-22 5911
如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家 ： 1. viewport： 也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域， 这是真正有效的区域。由于移动设备屏...
Position属性四个值的区别和用法
banxia117的博客
09-07 2306
static(静态定位) 默认值, 没有定位, 元素出现在正常流中 ( 忽略 top, bottom, left, right 或者 z-index 声明 ) relative(相对定位) 生成相对定位的元素, 通过top, bottom, left, right 的设置相对于其正常 ( 原先本身 )进行定位, 可通过 z-index 进行层次分级. absolute(绝对定位)...
关于无法打开IIS Express 服务器的问题
banxia117的博客
12-01 262
@[关于visual studio 2015在打开项目时提示无法启动 IIS Express 服务器] 无法打开IIS Express 服务器 这一般出现在重装系统之后，或者项目是从别的电脑上复制过来的。解决方法就是在解决方案文件夹下找到并删除“.vs”文件夹（可能是隐藏文件夹），重新打开项目，就能正常运行了。 ...
vue中得生命周期函数
08-17
在 Vue 中，组件的生命周期函数用来控制组件的创建、更新和销毁等过程。以下是常用的 Vue 组件生命周期函数： 1. `beforeCreate`：在实例初始化之后，数据观测和事件配置之前被调用。此时组件的数据和方法都还未...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值