vue生命周期和react生命周期对比【推荐】
个人认为，react和vue的业务逻辑是差不多，vue在react上封装了更简洁的方法，使用起来更加的便捷，如：提供了便捷的指令（v-for,v-if,v-model），还提供了更多的属性（computed,watch），我还是比较喜欢用react的，更接近js原生，更容易于理解它。
一 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,可以改变我的值"
},
created: function () {
//在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。
//但是还没有开始 DOM 编译，$el 还不存在,但是实例存在,即this.a存在,可打印出来 。
console.log("建立");
},
beforeCompile: function () {
console.log("未开始编译");
},
compiled: function () {
//在编译结束后调用。此时所有的指令已生效，因而数据的变化将触发 DOM 更新。但是不担保 $el 已插入文档。
console.log("编译完成");
},
ready: function () {
//在编译结束和 $el 第一次插入文档之后调用，如在第一次 attached 钩子之后调用。注意必须是由 Vue 插入（如 vm.$appendTo() 等方法或指令更新）才触发 ready 钩子。
console.log("一切准备好了");
},
attached :function () { //myVue.$appendTo(".test2")暂时触发不了,不知道怎么解决
//在 vm.$el 插入 DOM 时调用。必须是由指令或实例方法（如 $appendTo()）插入，直接操作 vm.$el 不会 触发这个钩子。
console.log("插入DOM成功");
},
detached :function () { //触发事件 myVue.$destroy(true),其中参数true控制是否删除DOM节点或者myVue.$remove()
//在 vm.$el 从 DOM 中删除时调用。必须是由指令或实例方法删除，直接操作 vm.$el 不会 触发这个钩子。
console.log("删除DOM成功");
},
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生命周期对比，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
Vue 2.0中生命周期与钩子函数的一些理解
前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的. 因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚. 于是我开始先去搜索,发现vue2.0的生命周期没啥文章.大多是1.0的版本介绍.最后还是找到一篇不错的(会放在最后) vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0
-
Vue实例中生命周期created和mounted的区别详解
前言 本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期. 在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注
-
深入理解Vue生命周期、手动挂载及挂载子组件
本文介绍了Vue生命周期和手动挂载,分享给大家,具体如下: 1.vue的生命周期: 2.$mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载. 例如: 方法一: <div id="app"> {{name}} </div> <button onclick="test()">挂载</button> <scrip
-
React组件生命周期详解
调用流程可以参看上图. React组件提供了生命周期的钩子函数去响应组件不同时刻的状态,组件的生命周期如下: 实例化 存在期 销毁期 实例化 首次调用组件时,有以下方法会被调用(注意顺序,从上到下先后执行): getDefaultProps 这个方法是用来设置组件默认的props,组件生命周期只会调用一次.但是只适合react.createClass直接创建的组件,使用ES6/ES7创建的这个方法不可使用,ES6/ES7可以使用下面方式: //es7 class Component { stat
-
详解Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑. Vue 实例 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,它可以包含数据(data).模板(template).挂载元素(el).方法(methods).生命周期钩子(lifecyclehook)等选项. Vue 实例化的选项 需要注意的
-
老生常谈js-react组件生命周期
组件的生命周期可分成三个状态: •Mounting:已插入真实 DOM •Updating:正在被重新渲染 •Unmounting:已移出真实 DOM 生命周期的方法有: •componentWillMount 在渲染前调用,在客户端也在服务端. •componentDidMount : 在第一次渲染后调用,只在客户端.之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问. 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeou
-
Vue.js每天必学之构造器与生命周期
构造器 每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例: var vm = new Vue({ // 选项 }) 一个 Vue 实例其实正是一个 MVVM 模式中所描述的 ViewModel - 因此在文档中经常会使用 vm 这个变量名. 在实例化 Vue 时,需要传入一个选项对象,它可以包含数据.模板.挂载元素.方法.生命周期钩子等选项.全部的选项可以在 API 文档中查看. 可以扩展 Vue 构造器,从而用预定义选项创建可复用的组件构造器: var MyC
-
vue生命周期和react生命周期对比【推荐】
个人认为,react和vue的业务逻辑是差不多,vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提供了便捷的指令(v-for,v-if,v-model),还提供了更多的属性(computed,watch),我还是比较喜欢用react的,更接近js原生,更容易于理解它. 一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h
-
React生命周期与父子组件间通信知识点详细讲解
目录 声明周期 声明周期解析 生命周期函数 Constructor componentDidMount componentDidUpdate componentWillUnmount 不常用的生命周期函数 认识组件间的通信 参数propTypes 限制单个元素 默认 Prop 值 对于函数式组件 子组件传递父组件 声明周期 很多的事物都有从创建到销毁的整个过程,这个过程称之为是生命周期: React组件也有自己的生命周期,了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能: 生命周期和
-
react生命周期(类组件/函数组件)操作代码
1.react代码模式分为两种 类组件和函数组件(生命周期也有所不同) 2.类组件(写法如下) import React from 'react' export default class App1 extends React.Component{ state = { username:'', password:'' } setUser = (event) => { this.setState({username:event.target.value}) } setPass = (event)
-
Vue组件和Route的生命周期实例详解
先讲点实际的 实用点的钩子: Created:vue实例被生成后的一个生命周期钩子函数.(页面初始化数据加载一般写这里); beforeCreate:给个loading界面 created撤销loading; beforeDestory:你确认删除XX吗? destoryed:当前组件已被删除,清空相关内容 关于Vue组件生命周期,翻译后图示: module.exports = { //props: ['父组建传的值'], data:function(){ lifecycle.push("dat
-
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
在Vue中,自定义指令的生命周期,有5个事件钩子:1-bind 被绑定, 2-inserted 被插入, 3-update 开始更新, 4-componentUpdated 更新完成,5-unbind 解除绑定.我们可以设置指令在某一个事件发生时的具体行为. 例子如下: 页面一进后, 在控制台中设置一个新值:通过控制台设置的新name 再设置一个新值:通过控制台设置的新name 最后点击解绑,解除绑定(解除绑定之后,id="app"的Dom和vm的实例之间解除mvvm的绑定关系): 代
-
React生命周期原理与用法踩坑笔记
本文实例讲述了React生命周期原理与用法.分享给大家供大家参考,具体如下: React生命周期 生命周期概览 生命周期的状态 组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲 Unmounting:已移出真实 DOM componentWillMount 在渲染前调用,在客户端也在服务端. 生命周期介绍 componentDidMount : 在第一次渲染后调用,只在客户端.之后组件已经生成了对应的DOM结构,可以通过this.getDOMN
-
react 生命周期实例分析
本文实例讲述了react 生命周期.分享给大家供大家参考,具体如下: 组件挂载: componentWillMount(组件将要挂载到页面)->render(组件挂载中)->componentDidMount(组件挂载完成后) 组件更新: 1.shouldComponentUpdate(render之前执行,参数为ture时执行render,为false时不执行render) componentWillUpdate(shouldComponentUpdate之后执行) componentDid
-
Flutter组件生命周期和App生命周期示例解析
目录 引言 无状态组件(StatelessWidget) 有状态组件(StatefulWidget) StatefulWidget生命周期详细分析 1. createState 2. initState 3. didChangeDependencies 4. build 5. didUpdateWidget 6. deactivate 7. dispose 8. reassemble App生命周期 结束语 引言 在Flutter开发中,所有的组件和页面都继承自Widget,所以探索页面的生命周
-
微信APP生命周期及页面生命周期示例详解
目录 官方文档 小程序的启动流程 app生命周期 页面的生命周期 页面的生命周期(图) 官方文档 https://developers.weixin.qq.com/doc/search.html?query=生命周期&doc_type=miniprogram&jumpbackUrl=%2Fdoc%2F 小程序的启动流程 我们画一个图来表示一下,整个小程序的启动流程,我们就知道了: app生命周期 执行App()函数也就是注册一个App 1 在注册app的时候,可以判断小程序的进入场景 2
-
React生命周期函数深入全面介绍
目录 1. 注意 2. 图解 3. 生命周期函数 3.1 constructor构造函数 3.2 static getDerivedStateFromProps(nextProps, prevState)方法 3.3 挂载时和更新时的生命周期函数执行顺序 3.4 componentWillUnmount函数的使用 3.5 shouldComponentUpdate优化渲染方案 1. 注意 函数组件无生命周期,生命周期只有类组件才拥有. 2. 图解 完整的生命周期主要为三个部分,分别为挂载时.更新