Vue构造器及其实例化概念

Posted YanEr、

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue构造器及其实例化概念相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于Vue构造器及其实例化概念的主要内容,如果未能解决你的问题,请参考以下文章

片段事务中的实例化错误

Spring中的实例生成方式及其生命周期

vue 实例化定义路由

vue构造器以及实例属性

vue组件初始化过程

Java基础之构造方法及其应用