Vue面试题整理（二）

web前端
文章发布日期
2025-07-10
热度
117
本文共计
3186字
预计阅读
16分钟

29. 说说你对双向绑定的理解，以及它的实现原理吗?

29.1 双向绑定的概念

vue中双向绑定靠的是指令v-model，可以绑定一个动态值到视图上，同时修改视图能改变数据对应的值（能修改的视图就是表单组件）经常会听到一句话：v-model是 value+input 的语法糖。

29.2 表单元素中的v-model

内部会根据标签的不同解析出不同的语法。并且这里有“额外”的处理逻辑

  • 例如 文本框会被解析成 value +input事件
  • 例如 复选框会被解析成 checked+change事件

29.3 组件中的v-model

组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。对于组件而言 v-model 就是value + input 的语法糖。可用于组件中数据的双向绑定。
名字也可以修改:

js 复制代码 
Vue.component('base-checkbox',{
  model:{
    prop:"checked'
    event: 'change
  },
  props:{
    checked: Boolean
  },
  template:`
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
      >
  `
})

那组件中如果有多个数据想做双向数据绑定怎么办？很遗憾在vue2中不支持使用多个v-model的。vue3中可以通过以下方法进行绑定。

js 复制代码 
<my v-model:a="a" v-model:b="b" v-model:c="c"></my>

30. Vue 中 .sync 修饰符的作用?

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”，这时可以使用 .sync 来实现，v-model 默认只能双向绑定一个属性，这里就可以通过.sync修饰符绑定多个属性。

js 复制代码 
`<my :value.sync= xxxx"></my>` ;
// 编译的结果是 with(this){return _c('my',{attrs:{"value":xxxx},on:{"update:value":function(Sevent){xxxx=Sevent}}}}

vue3 中.sync 语法被移除

31. Vue 中递归组件理解

vue 复制代码 
<el-menu>
  <el-menu-item>根1</el-menu-item>
  <el-submenu>
    <template slot="title">根2</template>
    <el-menu-item>根2-1</el-menu-item>
    <el-menu-item>根2-2</el-menu-item>
  </el-submenu>
  <el-menu-item>根3</el-menu-item>
  <el-menu-item>根4</el-menu-item>
</el-menu>

1.1 模板递归

vue 复制代码 
<el-menu>
  <template v-for="item in data">
    <resub :data="item" :key="item.id"></resub>
  </template>
</el-menu>

编写递归组件 resub，在组件中调用自己

vue 复制代码 
<el-submenu :key="data.id" v-if_"data.children">
  <template slot-"title">{{data.title}}</template>
  <template vfor="item in data.children">
    <resub :key="item.id" :data="item"></resub>
  </template>
</el-submenu>

32. 组件中写 name 选项有哪些好处及作用?

  • 增加 name 选项会在components属性中增加组件本身，实现组件的递归调用。
  • 可以标识组件的具体名称方便调试和查找对应组件。
  • children.filter(item=>item.options.name === 'xxX')
js 复制代码 
Sub.options.components[name] = Sub;//子组件会通过name属性，将自己也注册到组件中

33. Vue 常用的修饰符有哪些有什么应用场景?

  • 表单修饰符 lazy、trim、number
  • 事件修饰符 stop、prevent、self、once、capture、passive、Vue2中的 .native（Vue3弃用）
  • 鼠标按键修饰符 left、right、middle
  • 键值修饰符 对 keyCode 处理
  • Vue2中的 .sync（Vue3弃用）

34. 自定义指令的应用场景

34.1 指令的概念

Vue 除了内置指令之外，同时 vue 也允许用户注册自定义指令来对 Vue 进行扩展。指令的目的在于可以将操作 DOM 的逻辑进行复用。

34.2 指令的生命周期

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted：被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。
  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。 指令的值可能发生了改变，也可能没有。
  • componentupdated：指令所在组件的 VNode 及其子VNode 全部更新后调用。
  • unbind：只调用一次，指令与元素解绑时调用。

34.3 常见的指令编写

  • 图片懒加载 v-lazy
  • 防抖 v-debounce
  • 按钮权限 v-has
  • 拖拽指令 v-draggable mousemove.mouseup monsedown.dragenter、dragover、drop。可视化拖拽编辑器
  • 点击事件处理 v-click-outside
vue 复制代码 
<div v-click-outside="hide">
  <input type="text" @focus="show" />
  <div v-if="isshow">显示面板</div>
</div>
js 复制代码 
vue.directive(clickoutside,{
  bind(el, bindings, vnode) {
    el.handler = function(e){
      if(!el.contains(e.target)){
        let method = bindings.expression;
        vnode.context[method]();
        }
      };
    document.addEventListener("click", el.handler);
},
unbind(el){
  document.removeEventListener("click",el.handler);
  },
});

35. 说说你对 nextTick 的理解?

35.1 nextTick 概念

  • Vue 中视图更新是异步的，使用 nextTick方法可以保证用户定义的逻辑在更新之后执行。
  • 可用于获取更新后的 DOM，多次调用 nextTick 会被合并。
vue 复制代码 
<template>
  <div id="counter">{{ count }}</div>
</template>
<script>
export default {
  name:"App",
  components:{},
  data(){
    return {
      count: 0,
    };
  },
  mounted(){
    this.$nextTick(()=>{
      console.log(document.getElementById("counter").innerHTML);
    });
    this.count = 100;
  },
};
</script>

评论 (0)

写下你的评论...
0 / 500

暂无评论，快来抢沙发吧！