vue构造器以及实例属性

Posted 2020-09-17 我爱小明

一、构造器

1、vue.js就是一个构造器，通过构造器Vue来实例化一个对象；例如：var vm = new Vue({});

2、实例化Vue时，需要传入一个参数（选项对象）；

3、参数：选项对象可以包含，数据(data)、挂载元素(el)、方法(methods)、模版(template)、生命周期函数等等；

4、扩展构造器Vue，从而用预定义选项创建可复用的组件构造器，所有组件都是被扩展的Vue的实例，使用Vue.extend({})来扩展；

　　注意：尽管可以命令式地创建扩展实例，不过在多数情况下建议将组件构造器注册为一个自定义元素，然后声明式地用在模板中。

二、属性与方法

1、每个Vue的实例都会代理其data对象里的所有属性，被代理的属性是响应的；

2、如果实例创建之后添加新的属性到实例上，不会触发视图更新；

3、不要在实例属性或者回调函数中（如 vm.$watch(‘a‘, newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父上下文，所以 this 不会像预想的一样是 Vue 实例，而是 this.myMethod 未被定义。

4、Vue实例暴露了一些有用的实例属性和方法，带有前缀 $ ,便于与代理的data区分

　　a、vm.$el：类型（htmlElement）挂载元素，Vue实例的DOM根元素；

var vm = new Vue({
    el: "#app",
    data: {
        a: ‘hello‘,
        b: ‘hi‘
    }
});
console.log(vm.$el === document.getElementById(‘app‘));  // true

　　b、vm.$data：类型（Object），Vue实例观察的数据对象

var data = { a: ‘hello‘, b: ‘hi‘ }
var vm = new Vue({
    el: "#app",
    data: data
});
console.log(vm.$data === data);  // true
console.log(vm.$data.a);  // ‘hello‘
console.log(vm.$data.b);  // ‘hi‘

　　c、vm.$props：类型（Object），不清楚怎么用，哭哭哭。。。求指教。。。

<div id="app">
    <child :bmsg="bmsg"></child>
    <child bmsg="hi"></child>
</div>
<script type="text/javascript">
var vc = Vue.component(‘child‘,{
    props:[‘bmsg‘],
    template: ‘<h1>{{bmsg}}</h1>‘
})
var vm = new Vue({
    el: "#app",
    data: {
        bmsg: ‘hello‘
    }
});
console.log(vc.$props);  //undefined
console.log(vm.$props);  //undefined

　　d、vm.$options：类型（Object），用于当前Vue实例的初始化选项，在选项中需要包含自定义属性的时候很有用。

var vm = new Vue({
    el: ‘#app‘,
      customOption: ‘foo‘,
      created: function () {
        console.log(this.$options.customOption) // ‘foo‘
      }
});
console.log(vm.$options); // Object {components: Object, directives: Object, filters: Object, el: "#app", customOption: "foo"…}
console.log(vm.$options.customOption); // ‘foo‘
console.log(vm.$options.el);  // ‘#app‘

　　e、vm.$parent：类型（Vue实例），父实例。

　　f、vm.$root：类型（Vue实例），当前组件树的根Vue实例，如果没有父实例，就是实例本身。

　　h、vm.$children：类型（Array(Vue实例)），当前实例的直接子组件

　　　　需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

　　i、vm.$slots：类型（{ [name: string]: ?Array<VNode> }），用来访问被 slot 分发的内容。每个具名 slot 有其相应的属性（例如：slot="foo" 中的内容将会在 vm.$slots.foo 中被找到）。default 属性包括了所有没有被包含在具名 slot 中的节点。

　　j、vm.$scopedSlots：；

　　k、vm.$refs：类型（Object），一个对象，其中包含了所有拥有 ref 注册的子组件；

　　l、vm.$isServer：类型（boolean），当前Vue实例是否运行于服务器；