首页 > 其他分享 >vue2生命周期

vue2生命周期

时间:2022-11-29 17:13:04浏览次数:57  
标签:el 生命周期 beforeCreate vue2 mounted data options

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

  

标签:el,生命周期,beforeCreate,vue2,mounted,data,options
From: https://www.cnblogs.com/SadicZhou/p/16935910.html

相关文章