Vue 面试题
1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
我们先安装一下路由插件
yarn add vue-router@next
和 vue2 一样，我们同样要在 src 目录下新建 router 文件夹，添加 index.js 文件
// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
// createRouter 创建路由实例
const router = createRouter({
history: createWebHashHistory(),
// hash模式：createWebHashHistory，
//history模式：createWebHistory
routes: [
{
path: '/',
component:()=>import('@/views/login')
//这里用到了路由的懒加载
}
]
})
// 抛出路由实例, 在 main.js 中引用
export default router
写法区别
// Vue-Router 3.x
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: [
// 路由配置不变
]
})
// Vue-Router 4.0
const router = createRouter({
history: createWebHashHistory(),
routes: [
]
})
还要就是进行跳转时，不过4.0一样支持3.x的写法
// Vue-Router 3.x
export default {
methods: {
goToHome() {
this.$router.push('Home')
}
}
}
// Vue-Router 4.0
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
const goToHome = () => router.push('Home')
return { goToHome }
}
}
yarn add vuex@next
和 vue2 一样，我们同样要在 src 目录下新建 store文件夹，添加 index.js 文件
import { createStore } from ‘vuex’;
import getters from ‘./getters’
import mutations from ‘./mutations’
import actions from ‘./actions’
import state from ‘./state’
export default createStore({
state,
getters,
mutations,
actions
});
yarn add vant@next -S
添加之后，我们再添加按需引入的插件（推荐使用按需引入，减少代码提及）：
yarn add babel-plugin-import -D
在项目根目录添加 babel.config.js 如下所示：
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
] }
然后要在main.js中引入
❤️ 谢谢支持
喜欢的话别忘了 关注、点赞哦~。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
