Web前端最全vue基础：渲染&表单数据&过滤器&指令&生命周期，字节跳动前端一面

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

---

二、列表渲染

=========================================================================

列表渲染主要用v-for对数组里面的数组进行遍历，用于展示列表数据

语法：v-for=“(item, index) in xxx” :key=“yyy”

可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

			<!-- 遍历数组 -->

			<h2>人员列表（遍历数组）</h2>

			<ul>

				<li v-for="(p,index) of persons" :key="index">

					{{p.name}}-{{p.age}}

				</li>

			</ul>



			<!-- 遍历对象 -->

			<h2>汽车信息（遍历对象）</h2>

			<ul>

				<li v-for="(value,k) of car" :key="k">

					{{k}}-{{value}}

				</li>

			</ul>



			<!-- 遍历字符串 -->

			<h2>测试遍历字符串（用得少）</h2>

			<ul>

				<li v-for="(char,index) of str" :key="index">

					{{char}}-{{index}}

				</li>

			</ul>

			

			<!-- 遍历指定次数 -->

			<h2>测试遍历指定次数（用得少）</h2>

			<ul>

				<li v-for="(number,index) of 5" :key="index">

					{{index}}-{{number}}

				</li>

			</ul>

new Vue({

				el:'#root',

				data:{

					persons:[

						{id:'001',name:'张三',age:18},

						{id:'002',name:'李四',age:19},

						{id:'003',name:'王五',age:20}

					],

					car:{

						name:'奥迪A8',

						price:'70万',

						color:'黑色'

					},

					str:'hello'

				}

			})

列表渲染用的key，如果列表需要经常排序等操作，不能用index，应该用数组的对象的id作为key，否则可能不仅效率低下，而且会出现bug

---

1、列表过滤

---

列表除了显示出来，还可能会有过滤的操作，也就是前端实现搜索框搜索的操作，这里面用到的原理就是过滤

对于过滤的操作，可以用watch监视属性实现、用computed计算属性实现

		<!-- 准备好一个容器-->

		<div id="root">

			<h2>人员列表</h2>

			<input type="text" placeholder="请输入名字" v-model="keyWord">

			<ul>

				<li v-for="(p,index) of filPerons" :key="index">

					{{p.name}}-{{p.age}}-{{p.sex}}

				</li>

			</ul>

		</div>

---

1.1、用watch监视属性实现列表过滤

		new Vue({

				el:'#root',

				data:{

					keyWord:'',

					persons:[

						{id:'001',name:'马冬梅',age:19,sex:'女'},

						{id:'002',name:'周冬雨',age:20,sex:'女'},

						{id:'003',name:'周杰伦',age:21,sex:'男'},

						{id:'004',name:'温兆伦',age:22,sex:'男'}

					],

					filPerons:[]

				},

				watch:{

					keyWord:{

						immediate:true,

						handler(val){

							this.filPerons = this.persons.filter((p)=>{

								return p.name.indexOf(val) !== -1

							})

						}

					}

				}

			}) 

---

1.2、用computed计算属性实现列表过滤

			//用computed实现

			new Vue({

				el:'#root',

				data:{

					keyWord:'',

					persons:[

						{id:'001',name:'马冬梅',age:19,sex:'女'},

						{id:'002',name:'周冬雨',age:20,sex:'女'},

						{id:'003',name:'周杰伦',age:21,sex:'男'},

						{id:'004',name:'温兆伦',age:22,sex:'男'}

					]

				},

				computed:{

					filPerons(){

						return this.persons.filter((p)=>{

							return p.name.indexOf(this.keyWord) !== -1

						})

					}

				}

			}) 

---

2、列表排序

---

列表排序则是通过一个点击事件，对数组里面的数据进行排序

		<!-- 准备好一个容器-->

		<div id="root">

			<h2>人员列表</h2>

			<input type="text" placeholder="请输入名字" v-model="keyWord">

			<button @click="sortType = 2">年龄升序</button>

			<button @click="sortType = 1">年龄降序</button>

			<button @click="sortType = 0">原顺序</button>

			<ul>

				<li v-for="(p,index) of filPerons" :key="p.id">

					{{p.name}}-{{p.age}}-{{p.sex}}

					<input type="text">

				</li>

			</ul>

		</div>

			new Vue({

				el:'#root',

				data:{

					keyWord:'',

					sortType:0, //0原顺序 1降序 2升序

					persons:[

						{id:'001',name:'马冬梅',age:30,sex:'女'},

						{id:'002',name:'周冬雨',age:31,sex:'女'},

						{id:'003',name:'周杰伦',age:18,sex:'男'},

						{id:'004',name:'温兆伦',age:19,sex:'男'}

					]

				},

				computed:{

					filPerons(){

						const arr = this.persons.filter((p)=>{

							return p.name.indexOf(this.keyWord) !== -1

						})

						//判断一下是否需要排序

						if(this.sortType){

							arr.sort((p1,p2)=>{

								return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age

							})

						}

						return arr

					}

				}

			}) 

---

3、监测数据的原理

---

Vue会监视data中所有层次的数据

• 监测对象中的数据：

*   通过setter实现监视，且在new Vue就传入监测数据

    *   如果在对象中后追加的属性，Vue默认不做响应式处理

    *   如需给后添加的属性做响应式，请使用如下API：

        *   Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value)

• 监测数组中的数据：

*   在Vue修改数组中的某个元素一定要用如下方法：

    *   使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

    *   Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

---

三、收集表单数据

===========================================================================

收集表单数据一般通过v-model来实现数据的双向绑定

• 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。

• 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。

• 若：<input type="checkbox"/>

*   1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

*   2.配置input的value属性:

    *   v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

    *   v-model的初始值是数组，那么收集的的就是value组成的数组

---

四、过滤器

========================================================================

过滤器本质上就是一个函数，可以将某些数据例如时间转化为特定的样式

			<!-- 过滤器实现（传参） 参数为格式化样式，不传也行 -->

			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>

			<h3 :x="msg | mySlice">123456</h3>

			//局部过滤器

			// 本质就是一个函数 

			filters:{

				// str形参默认值

				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){

					// console.log('@',value)

					return dayjs(value).format(str)

				}

			}

		//全局过滤器

		Vue.filter('mySlice',function(value){

			return value.slice(0,4)

		})

---

五、指令

=======================================================================

1、内置指令：v-cloak

---

特点：

1. 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

---

2、内置指令：v-once

---

特点：

1. v-once所在节点在初次动态渲染后，就视为静态内容了。

2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

---

3、内置指令：v-pre

---

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】