园龄：3年2个月粉丝：7 关注：4

vue2生命周期

1.有哪些生命周期：

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

2.一旦进入页面或组件会执行哪些生命周期：

beforeCreate

created

beforeMount

mounted

3.在哪个阶段有$el,$data:

从created开始有$data,从mounted开始有$el.

4.如果加入keep-alive会多两个生命周期：

activated

deactivated

5.如果加入keep-alive第一次进入组件会执行哪些生命周期，第二次或者第N次进入组件会执行哪些生命周期：

第一次：

beforeCreate

created

beforeMount

mounted

activated

第二次或第N次：

activated

6.如果要改版生命周期或者el和data出现的顺序要怎么做：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>生命周期原理</title>
</head>
<script src="./vue.js"></script>
 
<body>
    <div id="App">这是vue</div>
</body>
<script>
 
    new vue({
        el: '#App',
        data() {
            return {
                str: '124'
            }
        },
        beforeCreate() {
            console.log(this)//这里this是这个VUE实例
            console.log('beforeCreate', this.$data, this.$el)
        },
        Created() {
            console.log('Created', this.$data, this.$el)
        },
        beforeMount() {
            console.log('beforeMount', this.$data, this.$el)
 
        },
        mounted() {
            console.log('mounted', this.$data, this.$el)
 
        },
    })
</script>
 
</html>

class vue {
    constructor(options) {
        console.log(this)//这里this是这个VUE类
        options.beforeCreate.bind(this)()
        this.$data = options.data
        options.Created.bind(this)()
        options.beforeMount.bind(this)()
        this.$el = document.querySelector(options.el)
        options.mounted.bind(this)()
 
 
    }
}
//模拟一个vue ，vue本质上就是一个class类，里面的方法其实是在构造函数里面执行的