vue面试实现功能

Vue 面试常见功能实现

双向数据绑定

使用 v-model 实现表单输入与数据的双向绑定。适用于输入框、单选、多选等表单元素。

<template>
  <input v-model="message" placeholder="Edit me">
  <p>Message is: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

条件渲染

通过 v-if、v-else 或 v-show 控制元素的显示与隐藏。v-if 是惰性的，v-show 始终渲染。

<template>
  <div v-if="show">Visible</div>
  <div v-else>Hidden</div>
  <button @click="toggle">Toggle</button>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    }
  }
}
</script>

列表渲染

使用 v-for 渲染数组或对象，需配合 :key 提升性能。

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1' },
        { name: 'Item 2' }
      ]
    }
  }
}
</script>

事件处理

通过 v-on（简写 @）监听 DOM 事件，触发方法或直接执行表达式。

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!')
    }
  }
}
</script>

计算属性

使用 computed 处理复杂逻辑，缓存结果避免重复计算。

<template>
  <p>Reversed message: {{ reversedMessage }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

侦听器

通过 watch 监听数据变化，执行异步或开销较大的操作。

<script>
export default {
  data() {
    return {
      question: '',
      answer: ''
    }
  },
  watch: {
    question(newVal) {
      this.answer = 'Thinking...'
      setTimeout(() => {
        this.answer = 'Answer to ' + newVal
      }, 1000)
    }
  }
}
</script>

组件通信

父组件通过 props 传递数据，子组件通过 $emit 触发事件。

<!-- Parent.vue -->
<template>
  <Child :msg="parentMsg" @notify="handleNotify"/>
</template>

<script>
export default {
  data() {
    return {
      parentMsg: 'From parent'
    }
  },
  methods: {
    handleNotify(msg) {
      console.log(msg)
    }
  }
}
</script>

<!-- Child.vue -->
<template>
  <button @click="$emit('notify', 'Child clicked')">
    {{ msg }}
  </button>
</template>

<script>
export default {
  props: ['msg']
}
</script>

生命周期钩子

在特定阶段执行代码，如 created 发起请求，mounted 操作 DOM。

<script>
export default {
  data() {
    return {
      data: null
    }
  },
  created() {
    fetchData().then(res => {
      this.data = res
    })
  },
  mounted() {
    console.log('Component mounted')
  }
}
</script>

插槽

使用 <slot> 实现内容分发，支持默认内容和命名插槽。

<!-- Parent.vue -->
<template>
  <Child>
    <template v-slot:header>
      <h1>Header</h1>
    </template>
    <p>Default content</p>
  </Child>
</template>

<!-- Child.vue -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

路由导航

通过 Vue Router 实现页面跳转，使用 router-link 和编程式导航。

<template>
  <router-link to="/about">About</router-link>
  <button @click="goHome">Home</button>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/')
    }
  }
}
</script>

状态管理

使用 Vuex 集中管理状态，通过 mapState、mapActions 简化调用。

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

自定义指令

注册全局或局部指令，操作 DOM 元素。

<template>
  <input v-focus>
</template>

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

Mixins

复用组件选项，合并到组件逻辑中。

<script>
const myMixin = {
  created() {
    console.log('Mixin hook')
  }
}

export default {
  mixins: [myMixin]
}
</script>