前段框架及项目面试的介绍三

古城微笑少年丶 2022-10-23 05:58 117阅读 0赞

## Vue 使用 ##

#### 一、基本使用，组件使用 ———— 常用，必须会的 ####

#### 二、高级特性 ——— 不常用， 但体现深度 ####

#### 三、Vuex 和 Vue-router 使用 ####

##### 自己去看文档不行吗？ #####

> 行，但这种是一种最低效的方式  
> 文档是一个备忘录，是给会用的人查阅的，并不是入门的教程  
> 文档全面冗长且细节过多，不能突出面试考点

### 回顾之前上篇 Vue 面试题 ###

> v-show 和 v-if 的区别  
> 为何 v-for 中药用 key  
> 描述 Vue 组件生命周期 （有父子组件的情况）  
> Vue 组件如何通讯  
> 描述组件渲染和更新的过程  
> 双向数据绑定 v-model 的实现原理

#### 针对上篇的题目 ####

> 先自己思考，不着急解答  
> 可能会涉及 Vue 的原理（本着应用和严厉就是分不开的）  
> 这几道题是开胃菜，后面还有真题演练大餐

### Vue 基本使用 ###

> 日常使用，必须掌握，面试必考（不一定全考）  
> 梳理知识点，从冗长的文档中摘出考点和重点  
> 考察形式不限（参考后面的面试真题），但是都在范围这内

### 思维导图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center]

#### 自己用 vue-cli 创建一个新的项目（或下载老师代码都行） ####

> 插值，表达式  
> 指令，动态属性  
> v-html ：会有 xss 风险，会覆盖子组件

#### computed 和 watch ####

> computed 有缓存，data 不变则不会重新计算  
> watch 如何深度监听  
> watch 监听医用类型，拿不到 oldVal

#### class 和 style ####

> 使用动态属性  
> 使用驼峰式写法

#### 条件渲染 ####

> v-if v-else 的用法，可使用变量，也可以使用 === 表达式  
> v-if 和 v-show 的区别？  
> v-if 和 v-show 的使用场景？

#### 循环（列表）渲染 ####

> 如何遍历对象? ———— 也可以用 v-for  
> key 的重要性，key 不能乱写（如 random 或者 index）  
> v-for 和 v-if 是不能一起使用的！

#### 事件 ####

> event 参数，自定义参数  
> 事件修饰符，按键修饰符  
> 【观察】事件被绑定到那里

##### 事件修饰符 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center 1]

##### 按键修饰符 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center 2]

#### 表单 ####

> v-model  
> 常见表单项 textarea checkbox radio select  
> 修饰符 lazy number trim

#### 总结 ####

> 必须掌握 ，否则面试不会通过的  
> 重点和考点

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/2b559c3f14394b799a2c8dd30b0791b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221023/7a165a3e2bce46b7bf7ba071e7d0d39c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221023/3b88227429eb4363b30dcc73699f3598.png