前端笔记整理

vue

vue的核心、优点

1、组件化 ：可以实现页面上的功能复用

2、数据驱动 ：不用去操作DOM，只要数据跟新，视图就会跟着变化

3、虚拟DOM ： 不用频繁操作真实的DOM ，性能会高一些

v-model双向绑定原理

数据发生了变化，会同步视图，视图发生了变化，同步数据

v-model是一个特殊的指令，一般用于表单控件，可以实现双向数据绑定

<input v-model="msg"/>
<input v-bind:value="msg"v-on:input="msg=$event.target.value"/>
<input value="msg"@input="msg=$event.target.value"/>
​

单向数据流

在父向子传值的时候，如果改变父组件的值，子组件就会跟着变化，子组件的数据改变不会影响父组件的值

（就像河流从上游到下游，不能逆转） prop是只读的

注意：！！特殊情况！！如果是引用类似数据，子组件只要不修改数据的地址，可以在子组件修改属性

MVVM

MWM是三个单词的缩写model(数据，一般来自ajax或本地存储)+view(视图template)+viewmodel(ve实例)

mode1数据变了，视图会跟着改变，视图变了，如果用的是v-model,数据也会跟着变，viewmodel在中间起一个桥梁作 model和view就像现实中房东和租客一样，他们是不认识，通过中介 好处 数据驱动 -因为数据变了，视图会跟着变，所以在vue中不用操作D0M 解耦 -由于model和view是没有关系的，是通过viewmodel结合在一起的，，所以维护起来很方便，因为model 逻辑代码改了，view不用改

事件传参数

@click=-“fn”在回调函数直接通过参数可以拿到事件对象 @click="fn($event)"这个时候$event是固定写法

对$event的理解

在原生DoM原生事件中，$event指的是事件源对象 在组件自定义事件，$event'代表的是子组件抛出的数据

自定义指令：directive

vue 提供的系统指令满足不了我们的需求，那么我们就需要自定义指令

通过 Vue.directive 进行自定义指令的定义

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 数据更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。

生命周期

四个阶段8个钩子

回答：1. 什么是生命周期 组件实例从创建到销毁的过程就是生命周期

2. vue有四个阶段 创建 挂载 更新 销毁
3. 创建 有二个钩子 beforeCreate created 在工作一般用的是created 拿ajax数据
4. 挂载 有二个钩子 beforeMount mounted 在工作中可以在mounted 里面去操作DOM
5. 更新阶段 beforeUpdate updated 在工作的时候可以在updated里面 拿到最新的DOM效果
6. 销毁阶段 beforeDestroy destroyed 我们可以在beforeDestroy中 去清理当前组件中有的定时器和DOM监听的事件

如果面试官继续问，就需要答keep-alive相关的钩子二个 activated,deactivated

父子组件的生命周期执行顺序

创建执行顺序

更新阶段顺序

销毁阶段顺序

总结：永远是调用的时候是先父后子，完成的时候是先子后父

v-if 与 v-show的区别

相同点 ：他们连个都是用来控制显示和隐藏的效果

不同点： v-show是通过控制样式的display：none来实现的

v-if是通过创建和销毁来实现的

使用场景：v-show适用于频繁切换的场景使用

v-if在false的时候直接不创建，不适合频繁切换

v-if 与 v-for为什么不能使用在同一元素或组件上

因为v-for的层级更高，还没判断之前就已经循环一遍了，浪费性能

解决办法：

方式一：在外层嵌套templete，在这一层进行v-if的判断，然后再内部进行for循环

方式二：（如果循环条件出现在内部），我们可以用计算属性computed提前过滤掉不用显示的选项