课程名称: 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函数
◆按需加载,异步加载大组件
④mixin
mixin的优势:
可以在多个组件有相同逻辑的情况下使用,将相同逻辑抽离出来,然后混入
mixin的劣势:
1.变量来源不明确,不利于阅读。特别是在代码量大,引入多个mixin的情况下。
2.多mixin变量名会冲突,会覆盖。
3.mixin和组件可能出现多对多的关系,复杂度高。一个mixin对多个组件,多个组件对多个mixin
14.vuex知识点
15.vue-router
h5 history配置
Vue-router路由配置动态路由
Vue-router路由配置懒加载(相当于异步加载,优化性能)
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的实现原理
这个问题暂时还不能回答
本节课暂时只能解决这些问题,剩下的问题还需要等学习了接下来的知识才能解答