vue 官方文档 - 处理边界情况

1. 处理边界情况

官方文档 - 处理边界情况

1.1. 访问元素 & 组件

1.1.1. 访问根组件

所有子组件都可以通过 this.$root 访问 main.js 的那个根实例

⛔：大型应用建议使用 vuex 来管理！

1.1.2. 访问父组件

所有子组件可以通过 this.$parent 访问 上一级父组件，但是嵌套层级太深就会出现一个问题

1.1.3. 访问子组件实例或元素

可以通过给子组件设置一个 ref，来进行访问，比如可以在父组件写一个聚焦函数，让子组件里面的 input 进行聚焦

// Father.vue
this.$refs.baseInput.$refs.input.focus()

1.1.4. 依赖注入

父组件写 provide，后代子孙组件都使用 inject 来进行接收，和 react 的 context 差不多

<!-- Father.vue -->
<script>
export default {
  name: 'Father',
  provide() {
    return {
      messageDad: this.message
    }
  }
}
</script>

<!-- Son.vue -->
<script>
export default {
  name: 'Son',
  inject: ['messageDad'] // 传过来的 prop 不能和 自身 data 里面的 prop 同名，不然无法接收到
}
</script>

⛔：由于这些属性是非响应式的，因此建议使用 vuex 来管理！

1.2. 程序化的事件监听器

我们知道，$emit 可以被 v-on(@) 进行侦听到，还有如下事件监听器，具体用法如下：

• $on(eventName,eventHandler) 侦听某个事件
• $once(eventName,eventHandler) 侦听一次某个事件
• $off(eventName,eventHandler) 停止侦听某个事件

<script>
export default {
  created(){
    this.$once('test', (message)=>{ // 开启某个监听器，监听 test 调用
      console.log(message); // 只会输出一次 hi once
    })
  },
  methods: {
    handleClick() {
       this.$emit('test', 'hi once') // 通过这个触发监听
    },
    test(arg){
      return arg
    }
  },
};
</script>

1.3. 循环引用

1.3.1. 递归组件

递归组件只能通过 name 来调用，有一个合适的场景就是 侧边栏无限递归

1.3.2. 组件直接的循环引用

官网的文件目录结构案例就会涉及到循环引用，解决办法有三：

• 全局注册
• beforeCreate
• webpack 的异步 import

1.4. 模板定义的替代品

1.4.1. 内联模板

就是在 Father.vue 中指定模板内容，最终替换到 Son.vue 的 template 部分

⛔：作用域会难以理解，建议还是在 Son.vue 中定义好模板内容

1.4.2. X-Template

没研究哈

1.5. 控制更新

1.5.1. 强制更新

由于 vue2 的响应式原理使用的是 Object.defineProperty，因此数组和对象的响应式原理是有问题的，$forceUpdate可以手动强制更新

<template>
  <div class="home">
    userList: {{ userList }}
    <hr>
    <button @click="handleClick">添加 user</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [],
    };
  },
  watch:{
    userList:{
      handler(val){
        console.log('监听到变化：',val);
      }
    }
  },
  methods: {
    handleClick() {
      const {length} = this.userList
       this.userList[length]={ // 这种方式是无法监听到的
         name: `yuwan${length}`,
         age: 22
       }
       this.$forceUpdate() // 通过这个强制使组件重新渲染
    },
  },
};
</script>

1.5.2. v-once

有些组件如果是大量的静态内容，可以给这个组件根元素添加一个 v-once

⛔：不要过度使用它，毕竟别人不熟悉 v-once 时候，还不晓得到底是啥原因导致它不更新