一 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. Angular4.0--创建类实例

    src/app/hero.ts文件: export class Hero { constructor( public id: number, public name: string) { } } sr ...

  2. poj1322 Chocolate 【 概率DP 】

    题目链接:poj1322 Chocolate [概率DP ] 题意:袋中有C种颜色巧克力,每次从其中拿出一块放桌上,如果桌上有两块相同颜色巧克力则吃掉,问取出N块巧克力后,求桌上正好剩下M块巧克力的概 ...

  3. C# Windows服务的安装和卸载批处理

    @ECHO "请按任意键开始安装后台服务. . ."@ECHO "清理原有服务项. . ."%SystemRoot%\Microsoft.NET\Framewo ...

  4. [转] 有关java中两个整数的交换问题

    转载申明:本文主要是用于自己学习使用,为了完善自己的只是框架,没有任何的商业目的. 原文来源:有关Java中两个整数的交换问题 如果侵权,麻烦告之,立刻删除. 在程序开发的过程,要交换两个变量的内容, ...

  5. Mysql数据库的简单语法

    Mysql数据库是目前使用最为广泛的数据对,对于小型企业的支持度,比oracle数据库友好很多. mysql数据库的基本语法 1:创建并且使用数据库 找出服务器上当前存在什么数据库: SHOW DAT ...

  6. HDU 2717 Catch That Cow(常规bfs）

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=2717 Catch That Cow Time Limit: 5000/2000 MS (Java/Oth ...

  7. HDU 2092 （将表达式变成一元二次方程形式）

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=2092 整数解 Time Limit: 1000/1000 MS (Java/Others)    Me ...

  8. iOS应用启动原理图解 及ARC强弱引用

    iOS应用启动原理图解(红色箭头表示strong强引用,绿色箭头代表weak若引用) 只要将UI控件拖到Storyboard里控制器的大view上,Xcode会自动将这些控件以强引用的形式加入到sel ...

  9. EF Core 2.1 中的 Eager loading、Explicit loading和LazyLoading (转自MSDN)

    Entity Framework Core allows you to use the navigation properties in your model to load related enti ...

  10. Vue教程：过滤器filters（五）

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...