访问元素&组件（手动操作其他组件的数据）
在绝大多数情况下，我们最好不要触达另一个组件实例内部或手动操作 DOM 元素，一些特殊情况：
访问根实例：this.$root
- 在每个
new Vue实例的子组件中，其根实例可以通过$rootproperty 进行访问。- 在子组件中直接通过this.$root即可获取new Vue()出来的根实例对象
- 在绝大多数情况下，我们强烈推荐使用 Vuex 来管理应用的状态。
访问父组件实例：this.$parent(和$root使用方式一样，可以获取父组件的实例对象)
对于直接操作数据的问题，总会出现问题：当组件层级过深时，你并不确定到底几层parent
访问子组件实例或子元素：this.$refs.自定义子组件ID
即便存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。
为了达到这个目的，通过
ref这个 attribute 为子组件赋予一个 ID 引用。例子如下：这仅作为一个用于直接操作子组件的“逃生舱”,你应该避免在模板或计算属性中访问 $refs
<base-input ref="usernameInput"></base-input>调用当前组件实例: this.$refs.usernameInput 即可获取当前组件实例对象实例场景：当需要再父组件点击子组件输入框时，触发输入框的聚焦事件在父组件方法中：methods: {// 用来从父级组件聚焦输入框focus: function () {this.$refs.usernameInput.focus()}}依赖注入（provide 和 inject）
1.
provide选项允许我们指定我们想要提供给后代组件的数据/方法：provide: function () { return { getMap: this.getMap } }
2. 然后在任何后代组件里，我们都可以使用
inject选项来接收指定的我们想要添加在这个实例上的 property：inject: ['getMap']
特点：
- 祖先组件不需要知道哪些后代组件使用它提供的 property
- 后代组件不需要知道被注入的 property 来自哪里
影响：
- 依赖注入还是有负面影响的。它将你应用程序中的组件与它们当前的组织方式耦合起来，使重构变得更加困难
- 通过 Vuex这样的状态管理插件来控制组件间的数据改动，可解决影响
程序化的事件监听器
- 通过
$on(eventName, eventHandler)侦听一个事件 - 通过
$once(eventName, eventHandler)一次性侦听一个事件 - 通过
$off(eventName, eventHandler)停止侦听一个事件
何时用：
- 你通常不会用到这些，但是当你需要在一个组件实例上手动侦听事件时，它们是派得上用场的。
组件间的循环引用
在本地注册组件的时候，你可以使用 webpack 的异步 import：components: {TreeFolderContents: () => import('./tree-folder-contents.vue')
}强制更新：$forceUpdate
1. 在极少数的情况下需要手动强制更新，那么你可以通过$forceUpdate来做这件事
2. 可能依赖了一个未被 Vue 的响应式系统追踪的状态
通过v-once创建低开销的静态组件
使用情况：组件包含了大量静态内容。在根元素上添加
v-onceattribute 以确保这些内容只计算一次然后缓存起来说明：当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的
<template>
<div v-once><h1>Terms of Service</h1>... a lot of static content ...</div>
</template>