内置变量与生命周期

MVVM

组件：model(领域模型) + ViewModel(绑定与监听） + view(视图)

Vue中的MVVM

view	viewModel	Model
DOM	VUE(Data Bindings and DOM Listeners)	Plain JS Objects

内置变量

创建Vue对象时，会定义内置变量值。
也可以通过"$ + 变量名"来获取内置变量，进行修改。

el

类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM。

data

类型：Object | Function(组件当中data必须是一个函数)
作用：Vue实例对应的数据对象。

methods

类型：{[key:string]:Function}
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

生命周期

vue对象创建过程包含了一个完整的生命周期，有一系列的回调函数。

生命周期.png

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello life cycle</title>
</head>
<body>
<div id="app"></div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello life cycle'
        },
        //在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前被调用
        beforeCreate: function () {
            console.log('beforeCreate')
        },
        //在实例创建完成后被立即调用
        //在这一步，实例已经完成以下的配置：数据观测(data observer)，属性和方法的运算，event/watcher事件回调。
        //然而，挂载阶段还没开始，$el属性目前不可见。
        created: function () {
            console.log('created')
        },
        //在挂载开始之前被调用，相关的渲染函数首次被调用
        beforeMount: function () {
            console.log('beforeMount')
        },
        //el被新创建的vm.$el替换，挂载成功
        mounted: function () {
            console.log('mounted')
        },
        //DOM发生修改之前
        beforeUpdated:function () {
            console.log('beforeUpdated')
        },
        //DOM发生修改之后
        updated:function () {
            console.log('updated')
        },
        //组件激活
        activated:function () {
            console.log('activated')
        },
        //组件未激活
        deactived:function () {
            console.log('deactived')
        },
        //页面销毁之前
        beforeDestroy:function () {
            console.log('beforeDestroy')
        },
        //页面销毁之后
        destroyed:function () {
            console.log('destroyed')
        },
        //子组件发生错误时执行
        errorCaptured:function () {
            console.log('errorCaptured')
        }
    })
</script>
</body>
</html>