一、Vue对象实例化
JS代码:
new Vue({
/* DOM挂载点 */
el: '#app',
/* 使用哪个模板 */
template: '<div>{{fruit}}</div>',
/* 给模板传递的数据 */
data: {
fruit: 'apple'
}
})
其中Vue函数称为构造函数，使用new就可以实例化出来一个实例化对象。
二、Vue的生命周期
刚刚接触Vue.js, 之前使用React.js知道需要搞清楚它的生命周期及其每个钩子函数的含义。
Vue生命周期.png
| 钩子函数 | Description |
|---|---|
| beforeCreate | 组件实例刚被创建，组件属性计算之前，如data属性等 |
| created | 组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在 |
| beforeMount | 模板编译/挂载之前 |
| mounted | 模板编译/挂载之后 |
| beforeUpdate | 组件更新之前 |
| updated | 组件更新之后 |
| activated | for keep-alive, 组件被激活时调用 |
| deactivated | for keep-alive, 组件被移除时调用 |
| beforeDestory | 组件销毁前调用 |
2.1生命周期的探究
对于执行顺序和什么时间执行，看上面的图会比较没有太多的耐心，因此先看一下钩子函数的执行然后再回头看图会更容易理解。
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
var app1 = new Vue({
el: '#app',
router,
data: {
message: 'kuaixiang'
},
beforeCreate: function () {
console.group('beforeCreate 创建之前:')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
created: function () {
console.group('created 创建完毕:')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
beforeMount: function () {
console.group('beforeMount 挂载前:')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
mounted: function () {
console.group('mounted 挂载结束:')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前:')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
updated: function () {
console.group('updated 更新完成:')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
beforeDestory: function () {
console.group('beforeDestory 销毁之前:')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
destroyed: function () {
console.group('destroyed 销毁完成:')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
template: '<App/>',
components: { App }
})
console.log(app1)
这段代码验证了再Vue.js中的生命周期的每个阶段，需要再结合图来看每个钩子函数。
参考文献
