总结
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
也有一些其它的钩子,在实例生命周期的不同阶段调用,如 mounted
、 updated
、destroyed
。钩子函数中的 this
指向调用它的 Vue
实例。一些童鞋可能会问 Vue.js
是否有“控制器”的概念?答案是,没有。组件的自定义逻辑可以分布在这些钩子中。
2.1 钩子函数生命周期
三、Vue 生命周期 mounted 和 created 的区别
3.1 什么是生命周期?
通俗来说,生命周期就是Vue
实例或者组件从创建到销毁所经历的一系列过程。虽然不太严谨,但是也基本上可以理解。
3.2 created 和 mounted 区别
官方图解如下:
从上图可看到两个节点:
created
:在模板渲染成html
前调用,即通常初始化某些属性值,然后再渲染成视图。mounted
:在模板渲染成html
后调用,通常是初始化页面完成后,再对html
的dom
节点进行一些操作。
通常created
使用的次数多,而mounted
是在一些插件或组件的使用中进行操作,比如插件chart.js
的使用: var ctx = document.getElementById(ID);
通常会有这一步,而如果你写入组件中,你会发现在created
中无法对chart
进行一些初始化配置,一定要等这个html
渲染完后才可以进行,那么mounted
就是不二之选。下面看一个例子(用组件)。
3.2 示例
Vue.component("demo1",{
data:function(){
return {
name:"",
age:"",
city:""
}
},
template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",
created:function(){
this.name="唐浩益"
this.age = "12"
this.city ="杭州"
var x = document.getElementById("name")//第一个命令台错误
console.log(x.innerHTML);
},
mounted:function(){
var x = document.getElementById("name")/</span>/第二个命令台输出的结果<span style="font-size: 14px;">
console.log(x.innerHTML);
}
});
var vm = new Vue({
el:"#example1"
})
可以看到输出如下:
可以看到都在created
赋予初始值的情况下成功渲染出来了。
但是同时看console
台如下:
可以看到第一个报了错,实际是因为找不到id,getElementById(ID)
并没有找到元素,原因如下:
在created
的时候,视图中的html
并没有渲染出来,所以此时如果直接去操作html
的dom
节点,一定找不到相关的元素。
而在mounted
中,由于此时html
已经渲染出来了,所以可以直接操作dom
节点,故输出了结果。
四、拓展阅读
总结
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端面试题汇总
JavaScript
前端资料汇总
373d068d8f5bef31e668ce.png)
前端资料汇总