在 Vue.js 开发中，有一些特殊情况和边缘场景需要特别注意。本章将介绍这些边缘情况及其解决方案。

访问元素和组件

访问根 DOM 元素

在组件中，$el 属性指向组件的根 DOM 元素：

export default {
  mounted() {
    // 访问组件的根 DOM 元素
    this.$el.focus()
  }
}

访问子组件实例

使用 ref 特性来注册引用：

<template>
  <div>
    <base-input ref="usernameInput"></base-input>
  </div>
</template>

<script>
export default {
  methods: {
    focusUsernameInput() {
      // 访问子组件实例
      this.$refs.usernameInput.focus()
    }
  }
}
</script>

访问子组件的属性和方法

// 子组件
export default {
  name: 'BaseInput',
  data() {
    return {
      value: ''
    }
  },
  methods: {
    focus() {
      this.$refs.input.focus()
    },
    reset() {
      this.value = ''
    }
  }
}

// 父组件
export default {
  methods: {
    resetChildInput() {
      // 调用子组件的方法
      this.$refs.usernameInput.reset()
    }
  }
}

递归组件

组件可以在模板中递归调用自身，但需要设置 name 选项：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
      <!-- 递归调用自身 -->
      <tree-item
        v-if="item.children"
        :items="item.children"
      ></tree-item>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeItem', // 必须设置 name 选项
  props: ['items']
}
</script>

防止无限递归

确保递归有终止条件：

export default {
  name: 'NestedComponent',
  props: ['depth'],
  template: `
    <div>
      <p>Depth: {{ depth }}</p>
      <nested-component
        v-if="depth < 3"  <!-- 设置终止条件 -->
        :depth="depth + 1"
      />
    </div>
  `
}

内建组件

component 元素

使用 is 特性动态切换组件：

<template>
  <div>
    <component :is="currentComponent" :data="componentData"></component>
    
    <button @click="switchComponent">切换组件</button>
  </div>
</template>

<script>
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import Contact from '@/components/Contact.vue'

export default {
  components: {
    Home,
    About,
    Contact
  },
  data() {
    return {
      currentComponent: 'Home',
      componentData: {}
    }
  },
  methods: {
    switchComponent() {
      const components = ['Home', 'About', 'Contact']
      const currentIndex = components.indexOf(this.currentComponent)
      this.currentComponent = components[(currentIndex + 1) % components.length]
    }
  }
}
</script>

使用字符串模板

export default {
  components: {
    // 使用字符串模板
    'async-component': () => import('@/components/AsyncComponent.vue')
  },
  template: `
    <div>
      <async-component v-if="showAsyncComponent"></async-component>
    </div>
  `
}

异步组件

高级异步组件

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: import('./LoadingComponent.vue'),
  // 加载失败时使用的组件
  error: import('./ErrorComponent.vue'),
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

带有错误处理的异步组件

const AsyncComponentWithErrorHandling = () => ({
  component: () => import('./HeavyComponent.vue'),
  loading: {
    template: '<div>Loading...</div>'
  },
  error: {
    props: ['error'],
    template: `
      <div>
        <p>Error: {{ error }}</p>
        <button @click="$emit('retry')">Retry</button>
      </div>
    `,
    methods: {
      retry() {
        // 重新加载组件
        this.$emit('retry')
      }
    }
  },
  delay: 0,
  timeout: 10000
})

模板引用

函数式组件中的 ref

函数式组件没有实例，所以 this.$refs 不会包含函数式组件的引用：

// 函数式组件
export default {
  functional: true,
  render(h, { props }) {
    return h('div', props.text)
  }
}

// 父组件中
<template>
  <functional-component ref="funcComp" />
</template>

// this.$refs.funcComp 将是 undefined

在 v-for 中使用 ref

当 ref 和 v-for 一起使用时，$refs 上得到的值将是一个包含相应元素的数组：

<template>
  <ul>
    <li v-for="item in items" :ref="`item-${item.id}`" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  },
  mounted() {
    // 访问特定的元素
    const firstItem = this.$refs['item-1'][0]
    console.log(firstItem)
  }
}
</script>

保护原始响应性

Object.freeze() 的使用

对于大型的静态数据列表，使用 Object.freeze() 可以避免将其转换为响应式数据：

export default {
  data() {
    return {
      users: []
    }
  },
  async created() {
    const users = await api.getLargeUserList()
    
    // 对于不会改变的大型列表，使用 freeze 遞免响应式转换
    this.users = Object.freeze(users)
  }
}

遵活的响应式控制

export default {
  data() {
    return {
      // 静态数据 - 使用 freeze 遞免响应式转换
      staticConfig: Object.freeze({
        apiUrl: 'https://api.example.com',
        version: '1.0.0'
      }),
      
      // 动态数据 - 保持响应式
      dynamicData: {
        currentUser: null,
        notifications: []
      }
    }
  }
}

处点管理

自动聚焦

<template>
  <input ref="input" v-focus>
</template>

<script>
export default {
  directives: {
    focus: {
      inserted: function (el) {
        el.focus()
      }
    }
  }
}
</script>

程序化聚焦

export default {
  mounted() {
    // 组件挂载后自动聚焦
    this.$nextTick(() => {
      this.$refs.input && this.$refs.input.focus()
    })
  },
  methods: {
    focusInput() {
      this.$refs.input.focus()
    }
  }
}

程序化事件处理

动态事件监听

export default {
  mounted() {
    // 动态添加事件监听器
    this.handler = (event) => {
      console.log('Document clicked', event)
    }
    document.addEventListener('click', this.handler)
  },
  beforeDestroy() {
    // 记得移除事件监听器
    document.removeEventListener('click', this.handler)
  }
}

全局事件总线

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

// 组件 A
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('custom-event', { data: 'Hello' })
    }
  }
}

// 组件 B
export default {
  created() {
    EventBus.$on('custom-event', this.handleMessage)
  },
  beforeDestroy() {
    EventBus.$off('custom-event', this.handleMessage)
  },
  methods: {
    handleMessage(payload) {
      console.log('Received:', payload)
    }
  }
}

组件定义的边缘情况

动态组件注册

export default {
  created() {
    // 动态注册组件
    this.$options.components.DynamicComponent = {
      template: '<div>Dynamic Component</div>'
    }
  }
}

条件组件注册

import BaseComponent from '@/components/BaseComponent.vue'

export default {
  components: {
    // 条件注册组件
    ...(process.env.NODE_ENV === 'development' ? {
      DebugPanel: () => import('@/components/DebugPanel.vue')
    } : {})
  }
}

错误边界

组件级错误处理

<template>
  <div>
    <div v-if="error" class="error">
      <p>Something went wrong: {{ error.message }}</p>
      <button @click="handleReset">Try again</button>
    </div>
    <div v-else>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ErrorBoundary',
  data() {
    return {
      error: null
    }
  },
  errorCaptured(err, vm, info) {
    // 处获子组件的错误
    this.error = err
    console.error('Error captured:', err, info)
    
    // 返回 false 可以阻止错误继续向上传播
    return false
  },
  methods: {
    handleReset() {
      this.error = null
    }
  }
}
</script>

全局错误处理

// main.js
import Vue from 'vue'

// 全局错误处理
Vue.config.errorHandler = function (err, vm, info) {
  // 处理错误
  console.error('Global error:', err)
  console.error('Error info:', info)
  
  // 发送错误报告到服务器
  if (process.env.NODE_ENV === 'production') {
    reportErrorToService(err, info, vm)
  }
}

// Promise 错误处理
window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled promise rejection:', event.reason)
})

性能考虑

遵活使用 v-if 和 v-show

<template>
  <!-- 频繁切换使用 v-show -->
  <div v-show="showSidebar" class="sidebar">
    <!-- Sidebar content -->
  </div>
  
  <!-- 很少改变的条件使用 v-if -->
  <admin-panel v-if="isAdmin" />
</template>

遵活使用 key

<template>
  <!-- 使用 key 强制重新创建组件 -->
  <component :is="currentView" :key="currentViewKey"></component>
  
  <!-- 在列表中使用稳定的 key -->
  <div v-for="item in items" :key="item.id">{{ item.name }}</div>
</template>

高级模式

高阶组件 (HOC)

// hoc/withDataFetching.js
export function withDataFetching(WrappedComponent, fetchFunction) {
  return {
    name: `With${WrappedComponent.name}Data`,
    props: WrappedComponent.props || {},
    data() {
      return {
        data: null,
        loading: true,
        error: null
      }
    },
    async created() {
      try {
        this.data = await fetchFunction(this.$props)
      } catch (error) {
        this.error = error
      } finally {
        this.loading = false
      }
    },
    render(h) {
      return h(WrappedComponent, {
        props: {
          ...this.$props,
          data: this.data,
          loading: this.loading,
          error: this.error
        },
        on: this.$listeners
      })
    }
  }
}

// 使用高阶组件
const EnhancedUserList = withDataFetching(UserList, api.fetchUsers)

渲染属性模式

<template>
  <div>
    <data-provider :url="apiUrl" v-slot="{ data, loading, error }">
      <user-list 
        v-if="data" 
        :users="data.users" 
        :loading="loading"
        :error="error"
      />
    </data-provider>
  </div>
</template>

<script>
// DataProvider.vue
export default {
  name: 'DataProvider',
  props: ['url'],
  data() {
    return {
      data: null,
      loading: true,
      error: null
    }
  },
  async created() {
    try {
      this.data = await fetch(this.url).then(r => r.json())
    } catch (error) {
      this.error = error
    } finally {
      this.loading = false
    }
  },
  render() {
    return this.$scopedSlots.default({
      data: this.data,
      loading: this.loading,
      error: this.error
    })
  }
}
</script>

这些边缘情况的处理方式可以帮助你构建更加健壮和灵活的 Vue.js 应用。

贡献者: WhileSun

上一页异步组件

下一页基础路由