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类，里面的方法其实是在构造函数里面执行的

　　

posted @ 2022-11-29 17:00  SadicZhou  阅读(84)  评论(0)    收藏  举报