vue2.0生命周期函数

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="vue2.2.js"></script>
        <title>构造器的声明周期</title>
    </head>
    <body>
        <h1>构造器的声明周期</h1>
        <hr>
        <div id="app">
            {{count}}
            <p><button @click="add">加分</button></p>
        </div>
        <button onclick="vm.$destroy()">销毁</button>
        <script type="text/javascript">
            var vm = new Vue({
                el: ‘#app‘,
                data: {
                    count: 1
                },
                methods: {
                    add: function() {
                        this.count++;
                    }
                },
                beforeCreate: function() {
                    console.log(‘1-beforeCreate 初始化之后‘);
                },
                created: function() {
                    console.log(‘2-created 创建完成‘);
                },
                beforeMount: function() {
                    console.log(‘3-beforeMount 挂载之前‘);
                },
                mounted: function() {
                    console.log(‘4-mounted 被创建‘);
                },
                beforeUpdate: function() {
                    console.log(‘5-beforeUpdate 数据更新前‘);
                },
                updated: function() {
                    console.log(‘6-updated 被更新后‘);
                },
                activated: function() {
                    console.log(‘7-activated‘);
                },
                deactivated: function() {
                    console.log(‘8-deactivated‘);
                },
                beforeDestroy: function() {
                    console.log(‘9-beforeDestroy 销毁之前‘);
                },
                destroyed: function() {
                    console.log(‘10-destroyed 销毁之后‘)
                }

            })
        </script>
    </body>
</html>

create 和 mounted 相关:
beforecreated:el 和 data 并未初始化
created:完成了 data 数据的初始化,el没有
beforeMount:完成了 el 和 data 初始化
mounted :完成挂载 dom元素已经加载到HTML中

destroy 相关: 执行:vm.$destroy()
销毁完成后,我们再重新改变count的值,vue不再对此动作进行响应了。
但是原先生成的dom元素还存在,可以这么理解,执行了destroy操作,后续就不再受vue控制了。

生命周期总结:
beforecreate : 举个栗子:可以在这加个loading事件
created :在这结束loading,还做一些初始化,实现函数自执行
mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情
beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容-

时间: 2024-09-30 00:20:55

vue2.0生命周期函数的相关文章

vue2.0生命周期详解(前端网备份)

这篇大佬用图文分析详解vue2.0里面的生命周期<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>;页面中渲染的优先值:所以综合排名优先级:render函数选项 > template选项 > outer HTML. https://segmentfault.com/a/1190000011381906 下面这个链接的console更清晰https://www.cnblogs

vue1.0和vue2.0生命周期----整理一

## 1. 作用域区别 1.x 随意的定义作用域 2.x 不允许body 或者html 元素 ## 2. 生命周期 1.x: created 实例已经创建 beforeCompile 在编译之前 compiled 编译之后 ready 实例已经插入到文档之中 beforeDetroy 在销毁之前 destroyed 销毁之后 2.x: beforeCreate 刚刚创建这个实例 属性还没有绑定 this.msg 获取不到 created 创建完毕 属性已经绑定好了 this.msg可以获取到了

vue2.0生命周期好文章推荐

http://www.cnblogs.com/gagag/p/6246493.html https://segmentfault.com/a/1190000008010666

React 学习(四) ---- 生命周期函数

现在我们能修改状态,页面可以进行交互了,但是还有一种状态改变没有解决,那就是倒计时效果,时间一直在变化,组件状态也一直在改变,但我们什么都没有做,如果要实现这样的效果,需要怎么处理? 我们都知道,改变状态用的是setState,  上次讲的加减操作是在把它写到事件处理函数中来改变状态的,但现在没有什么事件供我们调用,因为我们没有做任何操作,它却一直在变化,现在要做的就是找一个机会或入口,来写setState 函数, 这个机会就是组件的生命周期函数. 生命周期也是来源于对我们对现实生活的思考, 对

vue2.0项目实战(3)生命周期和钩子函数详解

最近的项目都使用vue2.0来开发,不得不说,vue真的非常好用,大大减少了项目的开发周期.在踩坑的过程中,因为对vue的生命周期不是特别了解,所以有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚. 下面来总结一下vue的生命周期. vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执行. <!DOCTYPE html>

Vue2.0源码阅读笔记--生命周期

一.Vue2.0的生命周期 Vue2.0的整个生命周期有八个:分别是 1.beforeCreate,2.created,3.beforeMount,4.mounted,5.beforeUpdate,6.updated,7.beforeDestroy,8.destroyed. 用官方的一张图就可以清晰的了解整个生命周期: Vue最新源码下载:地址 二:源码分析 1.先看new Vue实例的方法 创建Vue实例的文件是: src/core/instance/index.js function Vue

Vue2.0 探索之路——生命周期和钩子函数的一些理解(转)

前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的. 因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚. 于是我开始先去搜索,发现vue2.0的生命周期没啥文章.大多是1.0的版本介绍.最后还是找到一篇不错的(会放在最后) vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0

Vue2.0 探索之路——生命周期和钩子函数的一些理解

前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的. 因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚. 于是我开始先去搜索,发现vue2.0的生命周期没啥文章.大多是1.0的版本介绍.最后还是找到一篇不错的(会放在最后) vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0

vue2.0学习笔记之生命周期

beforeCreate 组件实例刚刚被创建,属性都没有 created  实例已经创建完成,属性已经绑定 beforeMount 模板编译之前 mounted 模板编译之后,代替之前ready beforeUpdate        组件更新之前 updated                 组件更新完毕 beforeDestroy       组件销毁前 destroyed              组件销毁后 <!DOCTYPE html> <html lang="en