vue API 知识点（3） --- 实例 总结
一、实例 property
1.vm.$data
Vue 实例观察的数据对象，Vue 实例代理了对其 data 对象 property 的的访问
2.vm.$props
当前组件接收到的 props 对象。Vue实例代理了对其 props 对象 property 的访问
3.vm.$el
Vue 实例使用的根 DOM 元素
4.vm.$options
用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处
示例：通过这种方式我们可以自定义一些属性，通过 $options 获取自定义属性
export default { name: 'testComponent', // demo 是自定义属性 可以 通过 vm.$options.demo 获取到属性值 demo: '自定义属性', //------ data () { return {} }, mounted () { //使用 vm.$options 可以获取 实例上自定义的 属性 console.log( this.$options.demo, '$options'); //自定义属性 console.log( this.aaa); //111 } }
5.vm.$parent
获取父实例（如果有父实例）
6.vm.$root
获取当前组件树的根 Vue 实例，如果当前实例没有父实例，此实例将会是自己
7.vm.$children
获取当前实例的直接子组件。获取到的值，并不能保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。
8.vm.$slots
用来访问被插槽分发的内容。每个具名插槽有其相应的 property （例如：v-slot: foo 中的内容将会在vm.$slots.foo中被找到）。default property 包括了所有没有被包含在具名插槽中的节点。或 v-slot: default 的内容
请注意插槽不是响应式的。如果需要一个组件可以在被传入的数据发生变化时重新渲染，我们建议改变策略，依赖诸如 props 或 data 等响应性实例选项
示例：
创建一个 lv-spa 组件
<template> <div> <slot name='header'></slot> <h1>一级标题</h1> </div> </template>
使用组件
<div id='a'> <!-- 老版本具名插槽 --> <lv-spa> <p slot='header'> 我是header </p> </lv-spa> <!-- 新版本具名插槽 --> <lv-spa> <!-- 注意：这里的 v-slot 指令只能写在 template 标签上面，而不能放置到 p 标签上 --> <template v-slot:header> <p>我是header</p> </template> </lv-spa> </div>
具名插槽的缩写
v-slot: 可以替换成 # 号
<div id='a'> <lv-spa> <template #header> <p>我是header</p> </template> </lv-spa> <lv-spa> <!-- # 后面必须有参数，否则会报错。即便是默认插槽，也需要写成 #default --> <template #default> <p>我是header</p> </template> </lv-spa> </div>
作用域插槽：就是让插槽的内容能够访问子组件中才有的数据。
声明一个组件 zn-div
<template> <div> <slot name='znnnn' :name='name' :age='age'></slot> <h1>一级标题</h1> </div> </template>
使用
<div id='a'> <!-- 老版本使用具名插槽 --> <zn-div> <div slot='znnnn' slot-scope='people'> <h3>我的名字：{{ people.name }}</h3> <h3>我的年龄：{{ people.age }}</h3> </div> </zn-div> <!-- 新版本具名插槽 --> <zn-div> <template #znnnn='people'> <h3>我的名字：{{ people.name }}</h3> <h3>我的年龄：{{ people.age }}</h3> </template> </zn-div> </div>
9.vm.$scopedSlots
用来访问作用域插槽。对于包括默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。
vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用。平时开发过程中用到的比较少。
10.vm.$refs
一个对象，持有注册过 ref attribute 的所有 DOM 元素的组件实例
11.vm.$isServer
当前 Vue 实例是否运行于服务器
12.vm.$attrs
包含父作用域中不作为 prop 被识别（且获取的）的 attribute 绑定（class 和 style 除外）。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定（class 和 style 除外），并且可以通过 v-bind='$attrs' 传入内部组件--在创建高级别的组件时非常有用，平时开发基本用不到
13.vm.$listeners
包含了父作用域中的（不含 .native 修饰器的）v-on 事件监听器。它可以通过 v-on='$listeners' 传入内部组件--在创建更高层次的组件时非常有用，平时开发基本用不到
二、实例方法/数据
1.vm.$watch
计算属性。这篇文章有详细的介绍
2.vm.$set 和 vm.$delete
vm.$set 向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。他必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通新增 property
三、实例方法/事件
1.vm.$on
监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数
2.vm.$once
监听一个自定义事件，但是只触发一次，一旦触发之后监听器就会被移除
3.vm.$off
移除自定义事件监听器
如果没有提供参数，则移除所有的事件监听器
如果只提供了事件，则移除该事件所有的监听器
如果同时提供了事件与回调，则只移除这个回调的监听器
4.vm.$emit
触发当前实例上的事件，附加参数都会传给监听器回调。（通常在子组件传递给父组件的时候使用）
四、实例方法/生命周期
1.vm.$mount
如果 Vue 实例在实例化时没有收到 el 选项，则它处于 未挂载 状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例
如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的元素，并且你必须使用原生 DOM API 把它插入文档中
这个方法返回实例自身，因而可以链式调用其他实例方法
2.vm.$forceUpdate()
迫使 Vue 实例重新渲染，注意它仅仅影响实例本身和插槽内容的子组件，而不是所有子组件
3.vm.$nextTick()
将回调延迟到下次 DOM 更新循环之后执行，在修改数据之后立即使用它，然后等待 DOM 更新，它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上
4.vm.$destroy()
完全销毁一个实例。清理它与其他实例的连接，解绑它的全部指令及事件监听器。
触发 beforeDestroy 和 destroyed 的钩子
在大多数场景中不应该调用这个方法，通常使用 v-if v-for 指令以数据驱动的方式控制子组件的生命周期
