vue的生命周期

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

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

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

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

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

3、组件即将更新 componentWillUpdate

4、必不可少的render

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

在umount阶段

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

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

初始阶段：

二阶段

三阶段

React 与 Vue 生命周期的对比

vue的生命周期

vue常用8个钩子函数

react生命周期

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

猜你喜欢