一 vue的生命周期如下图所示(很清晰)初始化、编译、更新、销毁

二 vue生命周期的栗子

注意触发vue的created事件以后,this便指向vue实例,这点很重要

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vue生命周期</title>

        <script src="../js/vue.js"></script>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    </head>

    <body>

        <div class="test" style="border: 1px black dashed;padding: 8px;">

            {{a}}

        </div>

        <div class="test2" style="border: 1px red solid;margin-top: 10px;padding: 8px;">

            我是内容二

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el: ".test",

                data: {

                    a: "我是内容,在控制台输入myVue.a=123456,可以改变我的值"

                },

                beforeCreate: function () {

                    console.log("建立前");

                },

                created: function () {

                    //在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。

                    //但是还没有开始 DOM 编译，$el 还不存在,但是实例存在,即this.a存在,可打印出来 。

                    console.log("建立");

                },

                beforeMount: function () {

                    console.log("渲染前");

                },

                mounted: function () {

                    console.log("渲染后");

                },

                beforeUpdate: function () {

                    console.log("更新前");

                },

                updated: function () {

                    console.log("更新后");

                },

                beforeDestroy: function () {  //触发方式,在console里面打myVue.$destroy();

                    //在开始销毁实例时调用。此时实例仍然有功能。

                    console.log("销毁前");

                },

                destroyed: function () {   //触发方式,在console里面打myVue.$destroy();其中myVue.$destroy(true)是删除DOM节点,会触发detached函数,但是实例仍然存在

                    //在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，注意是解绑不是销毁,所有的子实例也已经被销毁。

                    console.log("已销毁");

                }

        });

        </script>

    </body>

</html>

一、react生命周期

React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁

  • 初始化

1、getDefaultProps()

设置默认的props，也可以用ufaultProps设置组件的默认属性.

2、getInitialState()

在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props

3、componentWillMount()

组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。

4、 render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。

5、componentDidMount()

组件渲染之后调用，只调用一次。

  • 更新

6、componentWillReceiveProps(nextProps)

组件初始化时不调用，组件接受新的props时调用。

7、shouldComponentUpdate(nextProps, nextState)

react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候

8、componentWillUpdata(nextProps, nextState)

组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state

9、render()

组件渲染

10、componentDidUpdate()

组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。

  • 卸载

11、componentWillUnmount()

组件将要卸载时调用，一些事件监听和定时器需要在此时清除。

vue生命周期和react生命周期对比的更多相关文章

  1. Vue 与Angular、React框架的对比

    首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分 ...

  2. 【React学习笔记】React生命周期梳理（16.X前后两种）

    React生命周期 「16版本以前的:」 生命周期流程图 组件从生成到被挂在到页面上的一系列过程 根据流程图打印的执行顺序图: 流程讲解: 初始化流程 start 开始创建组件 在这个周期中做的事情 ...

  3. React 生命周期

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

  4. React生命周期简单详细理解

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

  5. React 生命周期及使用场景

    对比版本:16.4.0 VS 16.3.0 VS 16.2.0 发现最近几次React版本更改比较大,在为17.0的大版本作准备.总结了一下React生命周期函数的变化. 综合对比图如下: 各版本分别 ...

  6. 22.2、react生命周期与react脚手架(二)

    一.类:es6 <script type="text/babel"> class Person{ age = 10; constructor(name){ this.n ...

  7. React生命周期执行顺序详解

    文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...

  8. React生命周期钩子

    最近的工作都很忙,所以很少完整的时间可以用来总结和回顾知识点,今天就趁着是周末,我准备在这里复习和回顾一下React的基础.工作中主要用的vue比较多,在工作中使用React也已经是一年前了,当时用的 ...

  9. react生命周期方法有哪些？

    react生命周期方法有哪些? React 16.3+ getDerivedStateFromProps:在调用render()之前调用,并在每次渲染时调用.需要使用派生状态的情况是很罕见的 comp ...

随机推荐

  1. postgraSql支持View可以修改的两种方法。

    http://www.postgresqltutorial.com/postgresql-views/ Creating PostgreSQL updatable views – gives you ...

  2. Hibernate缓存策略

    Hibernate的一级缓存又称为Session缓存,其适用范围是在当前的会话之中,其生命周期和Session相同,随着Session的销毁,一级缓存也会随之销毁.一级缓存是不能取消的,Hiberna ...

  3. 【java基础】随手写的一个日期计算，新手可以看看

    随手写的一个例子, 只是练习下自己的代码布局以及思路.. 1. 先写下简单的测试 2. 根据常用的不用修改的变量抽取出来, 作为常量(常量的命名可能有点不规范,谅解~) 3. 方法的作用不一样, 抽取 ...

  4. Node.js在windows平台的安装

    nodejs官网:https://nodejs.org/en/ 下载安装: node-v8.4.0-x64.msi 检查 path 中是否已经配置nodejs的安装路径,如果没有要配置. node   ...

  5. non-fragile：oc2.0特性

    Runtime Versions and Platforms There are different versions of the Objective-C runtime on different ...

  6. [转] 从此不再惧怕URI编码：JavaScript及C# URI编码详解

    混乱的URI编码 JavaScript中编码有三种方法:escape.encodeURI.encodeURIComponent C#中编码主要方法:HttpUtility.UrlEncode.Serv ...

  7. javascript-数字转罗马数字

    阿拉伯数字与罗马数字转换 罗马数字表示 XXI, 21 个位数举例I, 1 ]II, 2] III, 3] IV, 4 ]V, 5 ]VI, 6] VII, 7] VIII,8 ]IX, 9 ·十位数 ...

  8. 锐捷交换机RG-3760-24 的简单配置与VLAN搭建

    要做的事 将交换机和主机连通. 建立vlan,并将主机配置到vlan当中. 连接主机和交换机 安装配置软件 选用SecureCRT 8.0来配置交换机,可在网上下载. 插入配置线 把配置线插入cons ...

  9. 来看看Uber的司机支持服务签到及预约系统的架构设计思路

    Uber的Greenlight Hubs(GLH)在全球拥有超过700个分支机构,为合作车主提供从账户和支付到车辆检查和车主注册等各方面的人工支持.为了给合作车主创造更好的体验并提高客户满意度,Ube ...

  10. java中匿名内部类总结

    在java的世界里,提供了匿名内部类语法糖,用于帮助大家简化代码,本文简要从接口,抽象类以及常规类以代码的形式描述其常用模式. 1. 接口模式 public interface IWriter { v ...