Vue生命周期简介

生命周期的钩子函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

<div id="app">

    <p>{{message}}</p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    var app = new Vue({

        el: "#app",

        data: {

            message: "hello gaoxin!!"

        },

        beforeCreate: function () {

            console.group("beforeCreate  创建实例之前===========");

            console.log("el: " + this.$el); // undefined

            console.log("data: " + this.$data); // undefined

            console.log("message: " + this.message);

        },

        created: function () {

            console.group("Created:  创建实例完成===========");

            console.log("el: " + this.$el); // undefined

            console.log("data: " + this.$data); // 已被初始化

            console.log("message: " + this.message); // 已被初始化

        },

        beforeMount: function () {

            console.group("beforeMount  挂载前状态==========");

            console.log("el: " + this.$el); // 已被初始化

            console.log("data: " + this.$data); // 已被初始化

            console.log("message: " + this.message); // 已被初始化

        },

        mounted: function () {

            console.group("Mounted  挂载结束状态=============");

            console.log("el: " + this.$el); // 已被初始化

            console.log("data: " + this.$data); // 已被初始化

            console.log("message: " + this.message); // 已被初始化

        },

        beforeUpdate: function () {

            console.group("beforeUpdate  更新前状态=========");

            console.log("el: " + this.$el);

            console.log("data: " + this.$data);

            console.log("message: " + this.message);

        },

        updated: function () {

            console.group("Updated  更新完成状态");

            console.log("el: " + this.$el);

            console.log("data: " + this.$data);

            console.log("message: " + this.message);

        },

        beforeDestroy: function () {

            console.group("beforeDestroy  实例销毁之前");

            console.log("el: " + this.$el);

            console.log("data: " + this.$data);

            console.log("message: " + this.message);

        },

        destroyed: function () {

            console.group("Destoryed  实例销毁之后");

            console.log("el: " + this.$el);

            console.log("data: " + this.$data);

            console.log("message: " + this.message);

        }

    })

</script>

</body>

</html>

生命周期钩子函数

　　

Vue的生命周期
-- beforeCreate
-- created
-- beforeMount
-- mounted
-- beforeUpdate
-- updated
-- beforeDestroy
-- destroyed
node.js
跑在本地的js解释器
类比你下载Python

Vue第五篇 Vue的生命周期的更多相关文章

  1. 第4章-Vue.js 交互及实例的生命周期

    一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...

  2. 一起学习vue源码 - Vue2.x的生命周期(初始化阶段)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  3. 【05】Vue 之 实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  4. Vue的项目搭建及请求生命周期

    目录 Vue的项目搭建及请求生命周期 Vue-CLI的项目搭建 环境搭建 项目创建 pycharm运行Vue项目 Vue项目的大体结构 Vue的请求生命周期 两个小用法 Vue的项目搭建及请求生命周期 ...

  5. Java多线程（五）线程的生命周期

    点我跳过黑哥的卑鄙广告行为,进入正文. Java多线程系列更新中~ 正式篇: Java多线程(一) 什么是线程 Java多线程(二)关于多线程的CPU密集型和IO密集型这件事 Java多线程(三)如何 ...

  6. Vue基础知识之指令和生命周期（一）

    优点:轻量易学,灵活. 核心:通过尽可能简单的API来实现响应的数据绑定和组合的视图组件. 1.数据绑定:数据改变,驱动视图的自动更新. 2.视图组件化:把整个网页拆分成一个个区块,每个区块都可以看成 ...

  7. Vue源码之组件化/生命周期(个人向)

    大致流程 具体流程 组件化 (createComponent) 构造⼦类构造函数 const baseCtor = context.$options._base // plain options ob ...

  8. vue自定义指令directives使用及生命周期

    生命周期 bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作. inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于docu ...

  9. VUE【二、选项和生命周期】

    vue对象,类似于一个viewModel,是处理页面显示的数据模型的对象 其中会有很多选项,以下为较常用的: 选项 1.data-数据 vue实例会代理其data对象里的所有属性 2.methods- ...

  10. Vue.JS快速上手（组件生命周期）

    一.什么是组件 组成网页独立功能基本单元(片段), 复用.维护.性能, Vue.js中的组件就是一个Vue的实例,Vue中的组件包含data/methods/computed. 一个Vue.js的应用 ...

随机推荐

  1. ubuntu 20.04安装mysql5.7

    ubuntu 22.04系统安装mysql5.7 一.查看系统默认安装的数据库版本 apt-get update apt-cache policy mysql-server ubuntu 20.04自 ...

  2. 华企盾DSC防泄密软件：svn、git更新后有感叹号常见处理方法

    1.查看客户端日志检查TSVNcache.exe进程是否是legal:1 2.TSVNcache.exe进程是否允许访问未配置加密进程的后缀 3.svn服务器不是加密进程也未装网络驱动,或者加密类型未 ...

  3. 如何实现CesiumJS的视效升级？

    CesiumJS作为一款强大的地理可视化引擎,为我们提供了丰富的地球数据可视化和交互展示的能力.然而,随着用户需求的不断增加和技术的不断进步,如何进一步提升CesiumJS的视觉效果成为了一个重要的问 ...

  4. NetSuite 开发日记 —— 估价单（Estimate）新建项目（Project）自动填入项目字段

    Background 用户在估价单(Estimate)点击「项目」字段旁边+按钮新建项目(Project),在项目的自定义字段中自动填入估价单ID 用户在项目记录存在切换自定义表格行为 Analysi ...

  5. ElasticSearch之Refresh API

    使用本方法,显式的执行refresh操作. 默认情况下,ElasticSearch启动后台任务,周期性执行refresh操作,周期使用参数index.refresh_interval控制. 本方法触发 ...

  6. cp {,bak}用法（转载）

    cp filename{,bak} cp filename{,.bak} 这个命令是用来把filename备份成filename.bak的 等同于命令 cp filename filename.bak ...

  7. 当物联网遇上云原生：K8s向边缘计算渗透中

    摘要:K8s正在向边缘计算渗透,它为边缘侧的应用部署提供了便利性,在一定程度上转变了边缘应用与硬件之间的关系,将两者的耦合度降低. 本文分享自华为云社区<云原生在物联网中的应用[拜托了,物联网! ...

  8. 小熊派：用OpenHarmory3.0点亮LED

    摘要:作为一个代表性的完整的开发,本案例可以分成3大部分:代码文件的规划,LED灯的驱动开发,点亮LED的业务开发. 本文分享自华为云社区<在小熊派Micro上用OpenHarmory3.0点亮 ...

  9. 为啥你写的代码老有大串的if/else？

    摘要:控制语句,到底何错之有呢? 本文分享自华为云社区<业务代码如何才能不再写出大串的if/else?>,作者: JavaEdge . 控制结构?没错!你最爱的 if.for都是一类坏味道 ...

  10. React Native UI界面还原，组件布局与动画效果

    写React Native UI和写 Android XML layout 布局 ,个人感觉是大同小异 在<ReactJS到React-Native,架构原理概述>里面提过 web 环境中 ...