vue.js 中 data, prop, computed, method，watch

var vm = new Vue({
    name:'root',
    el:"#app",
    // 数据
    data: { a: 1 } / Function, // data类型根实例为Object，组件中为Function
    props:[]/{}, // 设置父组件传递给子组件的数据限制
    computed:{}, // 计算属性
    watch:{}, // 监控属性
    methods:{}, // 事件操作
    // 资源
    directives:{}, // 内部指令
    filters:{}, // 内部过滤器
    components:{}, // 内部组件
    // 生命周期：实例创建 => 编译挂载 => 组件更新 => 销毁
    beforeCreate(){
        console.log('beforeCreate ==> 实例创建')
    },
    created(){
        // 可以操作data, 但未生成DOM（未挂载）发起异步请求，初始化组件状态数据 data
        console.log('created ==> 实例创建完成，属性已绑定')
    },
    beforeMount(){
        console.log('beforeMount ==> 模板编译/挂载之前')
    },
    mounted(){
        // 已生成DOM到document中，可访问this.$el属性
        console.log('mounted ==> 模板编译/挂载之后')
    },
    beforeUpdate(){
        console.log('beforeUpdate ==> 组件更新之前')
    },
    updated(){
        // 操作DOM $('#box1')
        console.log('updated ==> 组件更新之后')
    },
    activated(){
        // 操作DOM $('#box1')
        console.log('activated ==> 组件被激活时（for keep-alive组件）')
    },
    deactivated(){
        console.log('deactivated ==> 组件被移除时（for keep-alive组件）')
    },
    beforeDestroy(){
        // 解除事件绑定，销毁非Vue组件实例等 如：this.$off('event1') select2.destory()
        console.log('beforeDestroy ==> 组件销毁之前')
    },
    destroyed(){
        console.log('destroyed ==> 组件销毁之后')
    }
})