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 替我们做了哪些工作?
如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
wechat:{
type:String
},
QQ:{
type:String
},
CSDN:{
type:String
}
},
date:{
type:Date,
default:Date.now()
}
})
module.exports = Profile = mongoose.model(“profile”,profileSchema);
2.在router/api文件夹下新建Profile的路由文件profile.js,先写一个简单的test 案例,测试路由是否正常
const express = require(“express”);
const router = express.Router();
router.get(‘/test’, (req, res) => {
res.json({ msg: “profile works” })
})
3.在index.js文件中引入该路由
const profile = require(“./routes/api/profile”);
app.use(“/api/profile”,profile);
4.路由测试(记得带上没有过期的token)
1.用户输入个人信息。用postman模拟(记得带上未过期的token):
2.在profile.js文件中,把用户输入的信息全部收集存储到profileFields中
//$route POST api/profile/
//@desc add or modify profile msg
//@access private
router.post(“/”, passport.authenticate(“jwt”, { session: false }), (req, res) => {
const errors = {}
const profileFields = {}
profileFields.user = req.user.id;
// 字符串
if (req.body.handle) {
profileFields.handle = req.body.handle;
}
if (req.body.status) {
profileFields.status = req.body.status;
}
// 字符串数组
if (typeof req.body.skills !== “undefined”) {
profileFields.skills = req.body.skills.split(“,”);
}
// 对象-experience
// profileFields.experience = {}
// 此处不用手动创建空对象experience,否则,没有输入experience也会填充current,id,得到无意义数据experience:[{current:true, _id:12345678}]
if (req.body.current) {
profileFields.experience.current = req.body.current;
}
if (req.body.title) {
profileFields.experience.title = req.body.title;
}
if (req.body.company) {
profileFields.experience.company = req.body.company;
}
if (req.body.location) {
profileFields.experience.location = req.body.location;
}
if (req.body.from) {
profileFields.experience.from = req.body.from;
}
if (req.body.to) {
profileFields.experience.to = req.body.to;
}
if (req.body.description) {
profileFields.experience.description = req.body.description;
}
// 对象 social
if (req.body.wechat) {
profileFields.social.wechat = req.body.wechat;
}
if (req.body.QQ) {
profileFields.social.QQ = req.body.QQ;
}
if (req.body.CSDN) {
profileFields.social.CSDN = req.body.CSDN;
}
})
3.如果存在个人信息,则更新信息;如果没有,就新增信息
Profile.findOne({ user: req.user.id })
.then(profile => {
console.log(“profile”,profile);
if (profile) {
//用户信息存在,执行更新方法
Profile.findOneAndUpdate({ user: req.user.id }, { $set: profileFields }, { new: true })
.then(profile => res.json(profile))
} else {
//用户信息不存在,执行创建方法
Profile.findOne({ handle: profileFields.handle }).then(profile => {
new Profile(profileFields).save()
.then(profile => res.json(profile));
});
}
})
.catch(err => { res.status(404).json(err) })
4.postman测试结果
第一次send,由于没有添加过个人信息,因此此次是执行新增操作:
数据库查看:
将handle的值改成"test",再次send,此次是更新个人信息:
数据库查看:
1.get获取当前用户的个人信息,如果有,则显示,没有则提示用户没有个人信息
//$route GET api/profile/
//@desc return user profile msg
//@access private
router.get(“/”, passport.authenticate(“jwt”, { session: false }), (req, res) => {
// 能够操作此接口,代表用户是存在的,就会有用户id
// req.user.id是从认证获得的
profileFields.user = req.user.id;
// req.user.id是关联桥梁
Profile.findOne({ user: req.user.id })
.then(profile => {
if (!profile) {
errs.noprofile = “用户信息不存在”
return res.status(404).json(errs)
}
res.json({ profile })
})
.catch(err => { res.status(404).json(err) })
})
2.postman测试结果,同样要记得在Header里带上token:
1.创建验证:在validation文件夹下新建文件profile.js
需要验证的数据有:
-
在Profile.js定义数据格式时,曾指定handle、status和skills为必填项
-
在定义数据格式时,曾指定handle长度不能超过40位
-
CSDN链接需要是一个正确的url
const Validator = require(‘validator’);
const isEmpty = require(“./empty”);
module.exports = function validateProfileInput(data) {
let errors = {};
// 在Profile定义数据时指明,handle status skills是必填的三个字段
//如果输入空(没有输入),需要将其改为空字符串
js基础
1)对js的理解?
2)请说出以下代码输出的值?
3)把以下代码,改写成依次输出0-9
4)如何区分数组对象,普通对象,函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别?
8)Web Worker 和webSocket?
9)Javascript垃圾回收方法?
10)new操作符具体干了什么呢?
11)js延迟加载的方式有哪些?
12)WEB应用从服务器主动推送Data到客户端有那些方式?
,需要将其改为空字符串
js基础
1)对js的理解?
2)请说出以下代码输出的值?
3)把以下代码,改写成依次输出0-9
4)如何区分数组对象,普通对象,函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别?
8)Web Worker 和webSocket?
9)Javascript垃圾回收方法?
10)new操作符具体干了什么呢?
11)js延迟加载的方式有哪些?
12)WEB应用从服务器主动推送Data到客户端有那些方式?
[外链图片转存中…(img-OnfAqmik-1715790274387)]
[外链图片转存中…(img-7hnrKygP-1715790274388)]