vue-boundary.md

vue 处理边界情况

访问实例

• 通过 this.$root 设置和获取值，实现跨组件的数据通信。大项目推荐使用 vuex。
• this.$parent 子组件访问父组件实例。
  • 组件层级过深导致取值困难
• 通过 ref 访问子组件或者子元素实例
  • this.$refs 只有在组件渲染完成之后生效，并不是响应式的。
• 依赖注入
  • 父组件通过 provide 属性提供方法。子组件通过 inject 属性接收。
  • 优点
    • 祖先组件不需要知道哪些后代组件使用它提供的 property
    • 后代组件不需要知道被注入的 property 来自哪里
  • 缺点
    • 应用程序中的组件与它们当前的组织方式耦合起来，使重构变得更加困难。
    • 推荐使用 vuex

程序化的事件侦听器

可以监听 vue 的自定义的事件，例如生命周期函数等。让事件的完整流程逻辑放在一起，更加清晰易于管理。

• $emit 触发 v-on 绑定的事件
• $on(eventName, eventHandler) 侦听一个事件
• $once(eventName, eventHandler) 一次性侦听一个事件
• $off(eventName, eventHandler) 停止侦听一个事件

循环引用

解决方法：

• 在 beforeCreate 生命周期中去注册组件
  • 我们需要给模块系统一个点，在那里“A 反正是需要 B 的，但是我们不需要先解析 B。”
• import() 异步加载组件

模板定义的替代品

• 内联模板
• x-template

控制更新

• 强制更新
  • 一般不需要，判断是不是依赖了一个未被响应式跟踪的状态。检查数组和对象的变更检测注意事项。
  • 使用 $forceUpdate 去强制更新。

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

• 使用场景：
  • 需要多次渲染大量的、静态的 html。
• 除非要求极致性能，否则不要用。