Vue 处理边界情况(十二)

转载https://www.jianshu.com/p/09e31bac0054
没有在实际中用到 不是特别理解
有时间看看VueX

Vue 处理边界情况

访问根实例

1 .this.$root
2 .所有的子组件都可以将这个实例作为一个全局的store来访问或者使用
3 .小型的小项目其实可以直接这样共享数据，大型的项目还是要使用Vuex来管理状态

访问父组件实例

1 .$parent 可以用来从一个子组件访问父组件的实例
2 .只要明确父子关系其实可以随便用的吧，如果父子变成孙子结构那就不行了。所以还需要加一个hack

访问子组件实例或子元素

1 .refs
2 .refs只会在组件渲染之后生效，避免在模板或者计算属性里面访问refs

依赖注入

1 .provide 允许我么你指定我们想要提供给后代组件的数据/方法
2 .inject 在任何后代组件里，我们都可以是用inject选项来接收指定的我们想要添加在这个实力上的属性
3 .是一个更大范围的有效的prop
4 .祖先元素不需要知道哪些后代组件会使用他提供的属性
5 .后代组件不需要知道被注入的属性来自哪里

程序化的事件侦听器

1 .正常使用一个组件的时候

mounted: function () {
  // Pikaday 是一个第三方日期选择器的库
  this.picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })
},
// 在组件被销毁之前，
// 也销毁这个日期选择器。
beforeDestroy: function () {
  this.picker.destroy()
}

2 .问题

1 .建立的代码独立于我们的清理代码，比较难的程序化的清理我们建立的所有东西
2 .需要在组件实例中保存这个picker，但是可以的话最好只有在生命周期钩子里面可以访问到他。这个好像还是有点需要，因为我需要他暴露出来的一些接口，然后在里面操作的

3 .解决方法

mounted: function () {
  var picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })
this.$once('hook:beforeDestroy', function () {

picker.destroy()

})

}

循环引用

递归组件

1 .组件是可以在自己的模板中调用自身的。只需要给组件加一个name属性
2 .一定要确保判断是否递归的组件的那个值最后是false,不然就会无限递归

 <ul v-if="isFolder" v-show="open">
//这个判断一定要最后是fasle
                   <nav-list 
                            v-for="(cell,index) in ullist.children"
                            :ullist="cell"
                            :depth="depth+1"
                            :key="index">
                    </nav-list>
 </ul>

组件之间的循环引用

1 .两个组件在渲染时互为对方的后代和祖先组件，是一个悖论
2 .使用Vue.component全局注册组件的时候时没有问题的
3 .https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E7%BB%84%E4%BB%B6%E4%B9%8B%E9%97%B4%E7%9A%84%E5%BE%AA%E7%8E%AF%E5%BC%95%E7%94%A8

模板定义的替代品

1 .不知道搞这些其他的模板还有什么用处，目前使用.vue模板
2 .

控制更新

1 .this.$forceUpdate()
2 .如果你需要在Vue中做一次强制更新，99%的情况就是你在某个地方做错了事
3 .数组和对象的使用方法不对或者事依赖了一个没有被响应系统追踪的状态