Vue 是一种用来构建用户界面的前端框架，已经成为了前端开发中不可或缺的技能之一。在面试中，掌握 Vue 的知识是非常重要的一个点。在这篇文档中，我们将为大家提供一些常见的 Vue 面试题，让大家能够更好地掌握 Vue 的知识。
Vue.js 中 computed 和 watch 的区别？
computed
当我们需要绑定的属性为某个方法的返回值时，我们可以使用计算属性 computed。计算属性会缓存所依赖的属性的值，只有在相关属性改变时，才会重新计算。
例如：
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}在 Vue 实例中，我们可以通过 this.fullName 来访问这个属性的值。
watch
当我们需要对某个属性值进行监听并触发一些操作时，我们可以使用 watch。watch 监听的属性值发生变化时，会触发所关联的回调函数。
例如：
watch: {
firstName: function (newVal, oldVal) {
this.fullName = newVal + ' ' + this.lastName
},
lastName: function (newVal, oldVal) {
this.fullName = this.firstName + ' ' + newVal
}
}在上面的例子中，我们监听了 firstName 和 lastName 属性，并在其值发生变化时重新计算 fullName 的值。
怎样在 Vue 中定义组件？
Vue 组件是一个可复用的、有逻辑的代码单元，由 HTML 模板、JavaScript 逻辑和 CSS 样式组成。在 Vue 中定义一个组件相对简单，只需要通过 Vue.extend() 方法创建一个扩展实例，就可以定义一个组件。
例如：
var MyComponent = Vue.extend({
template: '<div>这是一个 Vue 组件</div>'
})在上面的例子中，我们定义了一个名为 MyComponent 的组件，其模板内容为一个简单的 div 标签。
Vue 中常用的路由有哪些？
Vue 中常用的路由有以下两种：
Vue-Router
Vue-Router 是 Vue.js 官方的路由插件，它通过在 URL 中映射路径到组件来构建单页面应用。Vue-Router 提供了一些核心的概念和 API，使得路由配置非常简单。
例如：
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
})在上面的例子中，我们定义了两个路由，分别对应 /home 和 /about 两个路径。
Vuex-Router
Vuex-Router 是一个采用 Vuex 和 Vue-Router 的状态管理器，可以让我们在应用中管理所有组件的状态。
例如：
const router = new VuexRouter({
routes: [
{ path: '/login', component: Login },
{ path: '/dashboard', component: Dashboard }
]
})在上面的例子中，我们定义了两个路由，分别对应 /login 和 /dashboard 两个路径。
Vue 中的组件通信有哪些方式？
Vue 中的组件通信有以下几种方式：
父子组件通信
父子组件之间通信最常用的方式是通过 props 和 emit() 方法。
兄弟组件通信
兄弟组件之间通信需要借助父组件作为中介，通过 props 和 emit() 方法来实现通信。
跨级组件通信
如果组件之间没有明显的父子关系时，我们可以通过事件中心来实现组件通信。
例如：
const bus = new Vue()
// 发送事件
bus.$emit('my-event', data)
// 监听事件
bus.$on('my-event', handler)在上面的例子中，我们通过事件中心来实现组件之间的通信。
Vue 中组件的生命周期钩子有哪些？
Vue 中组件的生命周期钩子有以下几个：
beforeCreate
Vue 实例创建之前，发生在实例初始化之后，事件/生命周期钩子事件对象均不可使用。
created
Vue 实例创建之后，数据观测和初始化问题均已完成，事件/生命周期钩子事件对象可使用。
beforeMount
组件挂载之前，发生在挂载开始之前，事件/生命周期钩子事件对象均可使用。
mounted
组件挂载之后，事件/生命周期钩子事件对象均可使用。
beforeUpdate
组件更新之前，事件/生命周期钩子事件对象均可使用。
updated
组件更新之后，事件/生命周期钩子事件对象均可使用。
beforeDestroy
组件销毁之前，事件/生命周期钩子事件对象均可使用。
destroyed
组件销毁之后，事件/生命周期钩子事件对象均不可使用。
总结
在本文中，我们介绍了一些常见的 Vue 面试题，包括常见的概念、常用的路由和组件通信方式以及组件生命周期钩子等。希望大家通过本文的学习，能够更好地掌握 Vue 的知识，更好地应对 Vue 相关的面试问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f20b0968c7c53b0137405