为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第18天 前端工程师2022版...

【九月打卡】第18天 前端工程师2022版 就业必备基础技术面试分析

2022.09.22 22:58 49浏览

课程名称: Vue使用

课程章节:框架面试课

课程讲师: 双越

课程内容:

上次只记了三分之二的内容,这次再记下面的三分之一


11、生命周期(单个组件)

beforeCreate(创建前):【没数据】

created(创建后) :【(有数据)没编译】

beforeMount(挂载前):【有数据(有编译)没挂载】

mounted(挂载后):【有数据有编译(有挂载)】

beforeUpdate(更新前):【(数据更新)没渲染】

updated(更新后) :【数据更新(有渲染)】

beforeDestroy(销毁前):【实例可用】

destroyed(销毁后):【实例不可用】


12、生命周期(父子组件)

加载渲染过程:

1.⽗组件 beforeCreate

2.⽗组件 created

3.⽗组件 beforeMount ~~~

4.⼦组件 beforeCreate

5.⼦组件 created

6.⼦组件 beforeMount

7.⼦组件 mounted

8.⽗组件 mounted

更新过程:

1.⽗组件 beforeUpdate ~~~

2.⼦组件 beforeUpdate

3.⼦组件 updated

4.⽗组件 updated

销毁过程:

1.⽗组件 beforeDestroy ~~~

2.⼦组件 beforeDestroy

3.⼦组件 destroyed

4.⽗组件 destoryed


13、Vue高级特性

①v-model

颜色选择器通过自定义的v-model把data进行双向数据绑定

②动态组件

◆:is="component-name”用法

◆需要根据数据,动态渲染的场景。即组件类型不确定。

③异步组件

在用大的组件时如echarts时,需要异步加载组件

◆import0函数

◆按需加载,异步加载大组件

https://img2.sycdn.imooc.com/632c764d0001e11008240885.jpg

④mixin

mixin的优势:

可以在多个组件有相同逻辑的情况下使用,将相同逻辑抽离出来,然后混入

mixin的劣势: 

1.变量来源不明确,不利于阅读。特别是在代码量大,引入多个mixin的情况下。                       

 2.多mixin变量名会冲突,会覆盖。                       

 3.mixin和组件可能出现多对多的关系,复杂度高。一个mixin对多个组件,多个组件对多个mixin

14.vuex知识点


15.vue-router

h5 history配置

https://img4.sycdn.imooc.com/632c768f00013a2308240197.jpg

Vue-router路由配置动态路由

https://img1.sycdn.imooc.com/632c76b00001fcbf11550471.jpg

Vue-router路由配置懒加载(相当于异步加载,优化性能)

https://img3.sycdn.imooc.com/632c76d20001809606770600.jpg


16、总结

①v-show 和 v-if 的区别?什么时候用v-show,什么时候用 v-if?

v-if 是dom的完整销毁和重建,v-show是css切换(display:none)

频繁切换时使用v-show,运行较少改变时用v-if

②为何v-for 要用key?

首先,我们知道Vue中使用V-for一定要用key,且这个key不能是index或者random,但是具体原因是什么,我们需要在下节课中具体解释。

③描述Vue组件生命周期(有父子组件的情况)

生命周期(单个组件)

beforeCreate(创建前):【没数据】

created(创建后) :【(有数据)没编译】

beforeMount(挂载前):【有数据(有编译)没挂载】

mounted(挂载后):【有数据有编译(有挂载)】

beforeUpdate(更新前):【(数据更新)没渲染】

updated(更新后) :【数据更新(有渲染)】

beforeDestroy(销毁前):【实例可用】

destroyed(销毁后):【实例不可用】

生命周期(父子组件)

加载渲染过程:

1.⽗组件 beforeCreate

2.⽗组件 created

3.⽗组件 beforeMount ~~~

4.⼦组件 beforeCreate

5.⼦组件 created

6.⼦组件 beforeMount

7.⼦组件 mounted

8.⽗组件 mounted

更新过程:

1.⽗组件 beforeUpdate ~~~

2.⼦组件 beforeUpdate

3.⼦组件 updated

4.⽗组件 updated

销毁过程:

1.⽗组件 beforeDestroy ~~~

2.⼦组件 beforeDestroy

3.⼦组件 destroyed

4.⽗组件 destoryed

④Vue组件如何通讯?

1.父子组件通讯,用属性和触发事件的方式

2.两个组件没关系或层级比较深,用自定义事件的方式

3.vuex的通讯,

⑤描述组件渲染和更新的过程

这个问题暂时还不能回答

⑥双向数据绑定v-model的实现原理

这个问题暂时还不能回答


本节课暂时只能解决这些问题,剩下的问题还需要等学习了接下来的知识才能解答



点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
4
获赞与收藏
5

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消