Vue 2.0修仙之路 — 生命周期和钩子函数

生命周期过程

名称	含义
before Created	创建之前 el 初始化data
Created	创建
before Mounted	挂载之前
Mounted	挂载
before Updated	更新之前
Updated	更新
before Destroyed	销毁之前
Destroyed	销毁

HTML代码

    
    
    


    

        
{{msg}}
        
    

JS 代码

window.onload = function(){
    var data = {
        msg:'hello vue.js',
        value:'app'
    }
    var methods = {

    }
    // 构造器 构造函数 创建一个实例  vm是Vue的实例 Vue是VM的构造器
    var vm = new Vue({
        el:'#app',
        data:data,
        // 实例创建成功自动执行
        created:function(){
            console.log("实例创建成功！")
        },
        mounted:function(){
            console.log("数据挂载完成！")
        },
        updated:function(){
            console.log("数据修改成功！")
        },
        methods:methods
    })
    console.log(data.msg === vm.msg);
    console.log(data.msg);
    // 设置属性会改变原始属性
    vm.msg = "world vue.js";
    console.log(data.msg);

    // 访问el和data属性
    console.log(vm.$el === document.getElementById("app"));
    console.log(vm.$data === data);

    // 监听属性改变的方法
    vm.$watch('value',function(newvalue,oldvalue){
        console.log("value值在改变！");
        console.log(newvalue,oldvalue);
    })
    
    /*针对生命周期提供了 钩子函数
        
        created 
        Mounted
        Updated
        Destroyed

    */
}

原网址：Vue之生命周期函数：https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA/