vue处理边界情况

访问元素 & 组件

在绝大多数情况下，我们最好不要触达另一个组件实例内部或手动操作 DOM 元素。不过也确实在一些情况下做这些事情是合适的。

访问根实例

在每个 ​​new Vue​​​ 实例的子组件中，其根实例可以通过 ​​$root​​ property 进行访问。例如，在这个根实例中：

// Vue 根实例new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ... */ } }, methods: { baz: function () { /* ... */ } }})

所有的子组件都可以将这个实例作为一个全局 store 来访问或使用。

// 获取根组件的数据this.$root.foo// 写入根组件的数据this.$root.foo = 2// 访问根组件的计算属性this.$root.bar// 调用根组件的方法this.$root.baz()

​​对于 demo 或非常小型的有少量组件的应用来说这是很方便的。不过这个模式扩展到中大型应用来说就不然了。因此在绝大多数情况下，我们强烈推荐使用 Vuex 来管理应用的状态。​​

访问父级组件实例

访问子组件实例或子元素

this.$refs.usernameInput

依赖注入（provide和inject）

我们希望在任何后代组件中，我们都可以接受指定的我们想要添加在这个实例上的property：

父级实例：

provide: function () { return { getMap: this.getMap }}

后代组件：

inject: ['getMap']

优点

祖先组件不需要知道哪些后代组件使用它提供的 property后代组件不需要知道被注入的 property 来自哪里

控制更新

​​如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。​​

你可能还没有留意到​​数组​​​或​​对象​​的变更检测注意事项，或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。

然而，如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新，那么你可以通过 ​​$forceUpdate ​​来做这件事。

通过 v-once 创建低开销的静态组件

渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加 v-once attribute 以确保这些内容只计算一次然后缓存起来，就像这样：

Vue.component('terms-of-service', { template: `

​​再说一次，试着不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如，设想另一个开发者并不熟悉 v-once 或漏看了它在模板中，他们可能会花很多个小时去找出模板为什么无法正确更新。 ​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。