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