简历写精通 Vue 却频频挂面试?这篇真题救你 offer(三)

// Vue 2 编译结果（v-for 优先）{  render(h) {    return this.users.map(user =>      user.isActive ? h('li', user.name) : null    );  }}// Vue 3 编译结果（v-if 优先）{  setup() {    return () =>      this.isActive        ? this.users.map(user => h('li', user.name))        : null;  }}

export default {  data() {    return {      users: [        { id: 1, name: '张三', isActive: true },        { id: 2, name: '李四', isActive: false }      ],      searchKeyword: '',      currentPage: 1,      pageSize: 10    };  },  computed: {    // ✅ 过滤逻辑集中管理    filteredUsers() {      let result = this.users;      if (this.searchKeyword) {        result = result.filter(u => u.name.includes(this.searchKeyword));      }      return result;    },    // ✅ 分页单独处理    paginatedUsers() {      const start = (this.currentPage - 1) * this.pageSize;      return this.filteredUsers.slice(start, start + this.pageSize);    }  }};

<!-- ❌ 错误：用 index 作为 key，列表变动时会错位 --><liv-for="(user, index) in users":key="index">{{ user.name }}</li><!-- ✅ 正确：用唯一标识作为 key --><liv-for="user in users":key="user.id">{{ user.name }}</li>

// 初始列表[1: 'A', 2: 'B', 3: 'C']  // key: 0, 1, 2// 头部插入新元素[0: 'X', 1: 'A', 2: 'B', 3: 'C']  // key: 0, 1, 2, 3// Vue 用 key 0 找到 'X'，用 key 1 找到 'A'...// 看起来好像"全部都更新了"，但实际上 key 没变，Vue 会复用 DOM

<!-- 方案1：v-memo（Vue 3.2+）记忆化，避免不必要重渲染 --><divv-for="item in items"v-memo="[item.id, item.edited]":key="item.id">  {{ item.name }}</div><!-- 方案2：虚拟滚动，只渲染视口内的条目 --><RecycleScroller:items="items":item-size="50"key-field="id">  <template #default="{ item }">    <div>{{ item.name }}</div>  </template></RecycleScroller>

<!-- 身份1：v-if/v-for 的分组容器，不渲染到 DOM --><templatev-if="show">  <h1>标题</h1>  <p>内容</p></template><!-- 身份2：插槽模板，标记插槽内容 --><MyComponent>  <template #header>    <h1>自定义标题</h1>  </template></MyComponent>

// ✅ 单向数据流：子组件不能直接修改 propexport default {  props: ['count'],  methods: {    handleClick() {      this.count++; // ❌ 警告：避免直接修改 prop      this.$emit('update:count', this.count + 1); // ✅ 通过事件通知父组件    }  }};

<!-- 父组件 --><CustomInputv-model="searchText" />

<!-- 编译后等价于 --><CustomInput  :modelValue="searchText"  @update:modelValue="searchText = $event"/>

// 子组件 CustomInputexport default {  props: ['modelValue'],  emits: ['update:modelValue'],  template: `    <input      :value="modelValue"      @input="$emit('update:modelValue', $event.target.value)"    />  `};

<!-- 父组件：双向绑定多个字段 --><LoginForm  v-model:username="form.username"  v-model:password="form.password"  v-model:remember="form.remember"/>

// 子组件 LoginFormexport default {  props: ['username', 'password', 'remember'],  emits: ['update:username', 'update:password', 'update:remember'],  template: `    <form>      <input        :value="username"        @input="$emit('update:username', $event.target.value)"      />      <input        type="password"        :value="password"        @input="$emit('update:password', $event.target.value)"      />      <input        type="checkbox"        :checked="remember"        @change="$emit('update:remember', $event.target.checked)"      />    </form>  `};

// 祖先组件export default {  provide() {    return { theme: this.theme };  }};// 后代组件（不限制层级）export default {  inject: ['theme'],  template: `<div :class="theme">...</div>`};

<template>  <ChildComponentref="child" /></template>

export default {  mounted() {    // 通过 ref 访问子组件实例    this.$refs.child.someMethod();    this.$refs.child.someData; // 访问子组件 data  }};

<br class="Apple-interchange-newline"><div></div>// 子组件export default {  data() { return { count: 0 }; },  methods: {    increment() { this.count++; }  },  // Vue 3 显式暴露  expose: ['increment']};