Vue构造器及其实例化概念

Posted 2020-09-10 YanEr、

Vue构造器
1、Vue.js是一个构造函数，编程中称之为构造器
2、每一个new Vue() 都是一个Vue构造函数的实例，这个过程叫做实例化
3、构造函数需要将其实例化后才会启用 var vm = new Vue({ //...})
4、Vue构造器要求实例化时需要传入一个选项对象
5、选项对象包括数据(data)，模板(tamplate)，挂载元素(el)，方法(methods)，生命周期钩子等选项
附：Vue实例传入选项对象API文档(https://cn.vuejs.org/v2/api/)

属性与方法
1、data会代理其对象里的所有属性
2、只有data里的属性是响应式的，即通信是双向的，如demo中所示
3、Vue被实例化后，再创建的属性，将不会触发视图更新，如demo中所示：
如：<p>{{a}},{{b}},{{c}},{{d}}</p>
1）a,b,c都会在视图中显示
2）a在实例化后仍然保持数据响应
3）d尽管在console.log(data)中存在，但视图却找不到，且会报错
4）因此请不要试图在实例化后添加任何属性

实例属性与方法
1、Vue实例暴露了一些有用的实例属性与方法
2、为与代理属性区分，方前添加了前缀$
3、app.$data===data //->true
app.$el===document.getElementById("app") //->true
附：Vue实例属性和方法API参考(https://cn.vuejs.org/v2/api/)

实例生命周期
1、Vue实例化过程中需要经历一系列额初始化过程，和所有构造函数类似
例如：配置数据观测--编译模板--挂载实例到DOM--数据变化时更新DOM
2、实例化过程中会调用一些生命周期钩子，在此期间，Vue提供执行自定义逻辑的机会
例如：created、mounted、 updated 、destroyed

 

demo：
    <div id="app">
        <p>{{a}},{{b}},{{c}}</p>
    </div>

    <script>
        var data={
            a:1,
            b:2,
            c:3
        }
        var app=new Vue({
            el:"#app",
            data:data
        })
        
        console.log(app.a===data.a); //true

        app.a=5;
        console.log(data.a);  //5

        data.a=10;
        console.log(app.a);  //10

        data.d=12;
        console.log(data);

        console.log(app.$data===data);
        console.log(app.$el===document.getElementById("app"));
    </script>