Vue.js 常见面试题
什么是SPA?
SAP意思是 单页面应用 。SPA 是一种应用程序,它提前下载好布局,并让页面在不同布局之间切换进而无需刷新就可以渲染整个页面。与此特点相对的,它将会从服务器中获取必要信息并替换页面中对应的内容。
什么是 Vue 指令
Vue 指令是用于扩展其功能的简单 HTML 属性。比如:
- v-if, v-else
- v-show
- v-model
- v-on
什么是双向绑定
双向绑定是 Vue 的能力之一,它可以同步更新输入值和脚本中存储的数据值。一般会用 v-model
指令实现。
<template>
<div>
<input type="text" v-model="message" /><br>
Your message: {{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
}
}
</script>
什么是虚拟DOM(VDOM)
粗略一看会感觉这个问题比较难,但其实答案很简单。虚拟 DOM 是一个 JavaScript 对象,这个对象保存了 UI(文档)信息并在需要的时候同步其变化到真实的 DOM (实际 UI)。更新 DOM 是一项高成本的操作,故而这种实现方式让页面速度大大提升。
什么是 Vue SFC?
SFC 是 Vue 单文件组件 功能的缩写。Vue 组件可以是一个简单的对象,如下:
Vue.component('button-counter', {
data: function() {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
对于更加复杂的应用,可以将所有的组件放到后缀为 .vue
的文件中并按需引入。文件内容如下所示:
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
Vue SFC 可以容纳组件模板(通常是 HTML),脚本和样式。这个功能可以帮助你更好的组织代码。
什么是 Vue 生命周期?
生命周期指的是 Vue 在运行过程中会按顺序调用一些事件函数,以便让编程人员可以在合适的时机运行其程序中的部分逻辑。下图会辅助你理解本概念:
如何将数据从后端导入到你的 Vue 程序中?
设计前端应用的主旨是让用户与你的数据进行交互,故导入数据至关重要。有很多种将数据导入 Vue 应用的方法,不过就两种比较常用:
- 把数据放到后端模板中并单独渲染出来
- AJAX 调用
这里不鼓励使用第一种方式,因为这可能会引发冲突。使用 AJAX 调用是更简单并且更标准的做法。进行 AJAX 调用时,可以使用 JavaScript 内置 fetch
函数,如果想要使用更高级的功能,可以使用 axios
这个第三方库。
什么是 Vue 中的侦听器?
侦听器是一个功能,它会在数据发生变化时被触发。
export default {
data() {
return {
message: ''
}
},
watch: {
message() {
console.log('Message got changed!')
}
}
}
什么是 Vue 的计算属性?
计算属性是特殊的数据字段,它是一个包含了其他字段的处理函数:
export default {
data() {
return {
username: 'Adnan'
}
},
computed: {
welcome() {
return 'Welcome ' + this.user
}
}
}
上述案例中计算属性 welcome
的值就是 Welcome Admin
了,并可以与数据属性以相同的方式使用 {{welcom}}
什么是 Vue 中的路由?
在 Vue 中,路由会将应用程序分为多个页面并把每个页面分配给一个组件。Vue 的路由依靠 Vue Router 实现,这是一个 Vue 团队设计的官方库。
什么是 Vue 中的过滤器?
过滤器用于渲染时处理数据。像英文大写就可用过滤器实现。
过滤器声明在管道(竖线)后:
<template>
<div>
{{ message | capitalize }}
</div>
</template>
过滤器也可用于数据绑定:
<template>
<div>
<div :id="myId | capitalize"></div>
</div>
</template>
如何创建自定义过滤器
过滤器既可以被全局定义(可以被整个 Vue 应用使用),也可以在组件内部定义。
全局定义:
Vue.filter('capitalize', function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
组件内声明:
filters: {
capitalize: function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
什么是 Vue 混入?
混入是一个对象,该对象可以扩展当前组件的功能。这个特性可以辅助你在不同组件之间共享功能。
// 定义一个混入对象
var myMixin = {
created: function() {
this.hello()
},
methods: {
hello: function() {
console.log('hello from mixin!')
}
}
}
// 定义一个使用混合对象的组件
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"
什么是 Vuex?
Vuex 是一个状态管理库。它可以助你更好的管理程序状态,减少不安全修改数据的风险。
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
推荐文章: