跳到主内容

Vue基础面试题

本文介绍了 Vue 的基础面试题知识点集合，包括为什么 data 必须是函数而不是一个对象，v-model 的原理，v-show 与 v-if 的区别 computed 和 watch 的区别和运用的场景，class 与 style 如何动态绑定，Vue 生命周期有哪些，什么阶段能发起 ajax 请求等问题

为什么 data 必须是函数而不是一个对象​

其实通过源代码看出，在 Vue 声明组件状态的时候，data 可以是一个对象，也可以是一个函数

function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
    ...
}

如果是根组件的时候，data 可以是一个对象，但是如果是子组件的时候，data 只能是一个函数，主要是为了防止多个组件使用同一个 data 对象造成数据污染，通过函数就可以在组件使用获取到新的状态

v-model 的原理​

v-model 是 vue 的一个语法糖

<input type="text" v-model="message" />
<!--等同于下面-->
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value" />

v-show 与 v-if 有什么区别？​

相同点：都是控制元素的显示和隐藏，值都是 boolean 类型

不同点： v-show控制的元素 css 的display属性，v-if 控制 html 元素的插入和移除，会导致浏览器回流和重绘

使用场景​

v-if 使用在条件渲染不太频繁的情况下，如果控制元素显示隐藏的频率很高，使用 v-show 更有利于性能优化，可以减少浏览器的回流和重绘

computed 和 watch 的区别和运用的场景​

  • computed

计算属性，可以依赖于多个属性值，computed 属性会缓存，只有当依赖属性变化，才会重新计算新的值

  • watch

监听属性，监听组件 data 或者 props 的属性值，每次响应属性值变化就会调用，可以在需要异步操作的时候使用，比如 input 输入变化，执行搜索操作

class 与 style 如何动态绑定？​

class 一般通过对象或者数组来实现

  • 当使用对象时，当 [value] 为 true 的时候使用 [key]，语法如下
v-bind:className="{ active: isActive, error: isError }"

当 isActive = true; isError = false; 时 class 值为 active

  • 当使用数组时，使用三目运算符号来控制，语法如下
v-bind:className="[isActive ? active : '', error]"

当 isActive = true; isError = false; 时 class 值为 active

同理 style 属性也可以通过对象或者数组来实现

谈谈你对 Vue 生命周期的理解？​

生命周期有哪些？​

直接看图，简单明了

Vue生命周期

除了上述官方图写的声明周期之外，还有两个生命周期 activited 和 deactivated，主要使用在 keep-alive 组件上，分别是缓存组件被激活和失活的时候调用

Vue 中什么阶段才能调用 DOM？​

在 mounted 函数就可以访问到 DOM 元素，因为此时模板已经渲染到页面上

什么阶段能发起 ajax 请求？​

  • 在 Vue 内部的 data 初始化完成后就可以获取数据并改变状态，即在 created 钩子函数之后的生命周期之后都可以。

  • 为了方便以后进行服务端渲染，建议在数据初始化阶段调用，即在 created 函数调用，因为在服务端 beforeMount 和 mounted 等钩子不会触发

keep-alive 是什么？​

keep-alive 是 Vue 官方提供的组件，可以在组件卸载的时候缓存起来，等下次需要渲染的时候，从缓存中读取后直接渲染，可以提高渲染的速度。

keep-alive 提供 include 和 exclude 属性，值可以是字符串或者正则，用来控制组件是否要被缓存，exclude 优先级大于 include，还有 max 属性，用来控制缓存的组件数量

Vue 常用的修饰符有哪些？​

比较常用的修饰符有

表单修饰符

.lazy，.trim，.number，

事件修饰符

.stop，.prevent，.self，.once，.capture，.passive，.native

更多修饰符介绍可以查看Vue 修饰符

如果您有什么看法或意见，欢迎通过右边的反馈悬浮框反馈
本文为原创，未经同意授权，禁止任何媒体或个人自媒体以及任何声明式转载
商业侵权必究，如需授权请联系340443366@qq.com
原文链接：https://www.1024nav.com/front-junior/framework-vue-basic
云服务器云服务器