vue生命周期和react生命周期对比。

生命周期指的是组件从初始化开始到结束的过程或者是生命周期是描述组件从开始到结束的过程，每个组件都具有生命周期，都对组件通过生命周期给予的钩子函数进行管理。钩子函数指的是系统某些状态和参数发生改变的时候，系统立马去通知对应处理的函数叫做vue的生命周期所有的生命周期钩子自动绑定Vue的 this 上下文到实例中，因此可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函...

resign_Lu

3118人浏览 · 2019-07-06 18:04:03

resign_Lu · 2019-07-06 18:04:03 发布

生命周期

指的是组件从初始化开始到结束的过程  或者是生命周期是描述组件从开始到结束的过程，每个组件都具有生命周期，都对组件通过生命周期给予的钩子函数进行管理。

钩子函数

	指的是系统某些状态和参数发生改变的时候，系统立马去通知对应处理的函数叫做

vue的生命周期

	所有的生命周期钩子自动绑定Vue的 this 上下文到实例中，因此可以访问数据，对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 。

分为11个周期，都是函数类型，常用的有8个阶段。在这里插入图片描述

vue常用8个钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="out">
        <h2>生命周期</h2>
        <p id="val">{{ title }}</p>
        <button @click="top">按钮</button>
    </div>

    <script>
        var out = new Vue({
            el:'#out',
            data:{
                title:'hello word',
            },
            methods:{
                top(){
                    this.title="hi"
                }
            },
            beforeCreate(){
                //不能获得实例化data里的值
                //页面加载出来就会执行
                console.log(this.title)
                console.log('创建之前')
                //页面没加载出来，可以写加载的loading图
            },
            created(){
                console.log(this.title)
                console.log('创建之后')
            },
            beforeMount(){
                //把当前实例化的Vue挂载到绑定的DOM元素上
                //this.$el是获取当前实例化内的所有DOM节点
                //此时DOM中的变量没有被渲染
                //页面加载出来就会执行
                console.log(this.$el)
                console.log('挂载之前')
            },
            mounted(){
                //此时DOM内的变量已经被渲染
                console.log(this.$el)
                console.log('挂载之后') 
            },
            beforeUpdate(){
                //数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
                //你可以在这个钩子中进一步地更改状态，
                //这不会触发附加的重渲染过程。
                //改变的是DOM元素里的数据变更
                //data里的数据变更不会触发
                //页面加载出来不会执行，当数据变更才会执行
                console.log(document.querySelector('#val').innerHTML)
                console.log('更新之前')
                //该钩子在服务器端渲染期间不被调用。
            },
            updated(){
                //此时都DOM已经更新
                //避免在此期间更改状态，因为这可能会导致更新无限循环。
                console.log(document.querySelector('#val').innerHTML)
                console.log('更新之后'); 
                //this.$destroy()//通过该方法摧毁整个实例化里的事件与数据变更
                //然后执行摧毁前的生命周期 函数
            },
            beforeDestroy(){
                //实例销毁之前调用。在这一步，实例仍然完全可用。
                console.log('催毁之前'); 
            },
            destroy(){
                //Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定
                 // 所有的事件监听器会被移除，所有的子实例也会被销毁。
                console.log('摧毁之后')
            }
        })
    </script>
</body>
</html>

剩下的三个周期分别是在Updated之后的有activated(keep-alive 组件激活时调用。)
,deactivated(keep-alive 组件停用时调用).
errorCaptured:当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

react生命周期

react组件经历总体阶段
1、mounted阶段加载阶段或者说初始化阶段这个阶段组件由jsx转换成真实dom
2、update阶段组件运行中阶段或者更新阶段当组件修改自身状态，或者父组件修改子组件属性的时候发生的阶段
3、umount阶段组件卸载阶段这个一般是组件被浏览器回收的阶段
在这里插入图片描述

在mounted阶段

低版本有五个钩子函数，高版本只有三个
getDefaultProps 取得默认属性（高版本移除）
getInitialState 初始化状态（高版本移除）
componentWillMount 即将进入dom
render 描画dom
componentDidMount 已经进入dom

componentWillMount(){
console.log('组件将要挂载')
// 可以进行交互
}
componentDidMount(){
console.log('组件挂载到DOM上')
// 可以进行交互
}

在那种钩子函数中进行交互更好呢？请查看–>WillMount() pk DidMount()

在update阶段

运行中阶段只有在父组件修改了子组件的属性或者说一个组件修改自身的状态才会发生的情况

1、组件将要接受新值componentWillReceiveProps（已加载组件收到新的参数时调用）

2、组件是否更新 shouldComponentUpdate （影响整个项目的性能，决定视图的更新）

3、组件即将更新 componentWillUpdate

4、必不可少的render

5、组件更新完毕时运行的函数 componentDidUpdate

componentWillReceiveProps(a){
console.log(a)
// 当属性发生变化会执行，一般在字符传值用的比较多。
console.log('组件将要接受新的属性值')
}
shouldComponentUpdate(a){
// 可以接受形参，为未改变的属性值
console.log(a)
// 组件是否允许更新 影响整个项目的性能，决定视图的更新
return true
}
componentWillUpdate(){
console.log('组件将要更新')
}
componentDidUpdate(){
console.log('组件更新完成')
}

在umount阶段

此阶段可将整个组件销毁
调用的钩子函数是

ReactDOM.unmountComponentAtNode('节点')

vue生命周期对比react生命周期

初始阶段：
在这里插入图片描述
二阶段

三阶段
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^