总结一下
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。
万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总
{{msg}}
new Vue({
el:‘#app’,
data() {
return {msg:‘欢迎幻影’};
}
})
data的第二、三种写法：
2、
data:{
mag:‘json对象’
}
3、
data:function(){
return {msg:‘欢迎幻影’};
}
5、案例2：数据双向绑定
{{msg}}
{{msg}}
{{msg}}
{{msg}}
new Vue({
el:‘#app’,
data() {
return {msg:‘欢迎幻影’};
}
})
呈现效果：输入框里面的内容改变，则其他上下数据也发生改变，也就是数据双向绑定
6、案例3：事件
{{msg}}
获取输入框内容
new Vue({
el:‘#app’,
data() {
return {msg:‘欢迎幻影’};
},
methods:{
getMsg(){
alert(this.msg);
}
}
})
呈现结果：可以获取输入框内的内容并出现弹框，尽管输入框的内容发生改变，弹框依旧能获得发生改变的数据
三、生命周期
库如何工作：
钩子函数的四个板块：
①、创建期created
②、挂载期，将虚拟dom与真实dom进行映射关系的建立
③、同步期，虚拟dom的数据要同步到真实dom上去
④、销毁期
生命周期.html文件：
number:{{number}}
{{detail()}}
var data = {
number:999,
msg:null
};
var vm = new Vue({
el:‘#d1’,
data:data,
methods:{
detail:function(){
return “使用方法来插值：”+this.msg;
}
},
beforeCreate:function(){
console.log(‘beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳’)
console.log(this.msg)//undefined
console.log(document.getElementsByClassName(“myp”)[0])//undefined
},
created:function(){
console.log(‘created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数’)
this.msg+=‘!!!’
console.log(‘在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取’)
console.log(‘接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染’)
},
beforeMount:function(){
console.log(‘beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated’)
this.msg+=‘@@@’
console.log(‘在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取’)
console.log(document.getElementsByClassName(“myp”)[0])//undefined
console.log(‘接下来开始render，渲染出真实dom’)
},
// render:function(createElement){
// console.log(‘render’)
// return createElement(‘div’,‘hahaha’)
// },
mounted:function(){
console.log(‘mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了’)
console.log(document.getElementsByClassName(“myp”)[0])
console.log(‘可以在这里操作真实dom等事情…’)
// this.$options.timer = setInterval(function () {
// console.log(‘setInterval’)
// this.msg+=‘!’
// }.bind(this),500)
},
beforeUpdate:function(){
//这里不能更改数据，否则会陷入死循环
console.log(‘beforeUpdate:重新渲染之前触发’)
console.log(‘然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染’)
},
updated:function(){
//这里不能更改数据，否则会陷入死循环
console.log(‘updated:数据已经更改完成，dom也重新render完成’)
},
beforeDestroy:function(){
console.log(‘beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)
// clearInterval(this.$options.timer)
},
destroyed:function(){
console.log(‘destroyed:组件的数据绑定、监听…都去掉了,只剩下dom空壳，这里也可以善后’)
}
});
四、模板模式在vue生命周期的使用
在eclipse里创个项目，建了一个模板类CodeTemplate :
读者福利
========
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
