前端知识点自我总结 二

一、vue实现组件的缓存

我们为什么需要组件缓存，因为在面向组件化开发中，我们会把整个项目拆分为很多业务组件，然后按照合理的方式组织起来。

组件化的概念可以很好的帮助开发者实现组件之间的切换，但是当我们的组件在频繁的切换过程中，组件的实例都是一直重新创建销毁的，当我们需要保留组件的状态的时候。

就可以用 <keep-alive><keep-alive> 包裹组件，这样就可以缓存不在活动状态的组件实例，用于保留组件状态或避免重新渲染

二、keep-alive有关的生命周期有哪些

主要的作用是保留组件状态或者避免重新渲染他们。

包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们

当组件在 keep-alive内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

1.activated：页面第一次进入的时候，钩子触发的顺序是created->mounted->activated 2.deactivated ：页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated生命周期函数：就是vue在某个时间段会自动执行的函数

created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次；
当页面存在keep-alive时，此时切换页面，页面不会刷新，那么如果想要页面重新渲染的话就要用到activated,deactivated
activated,deactivated只有存在keep-alive时才会存在

三、vue的生命周期

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

1.beforeCreate(){}在执行的时候，data还有methods都没有被初始化

2.created(){} data还有methods都被初始化好了，如果要调用methods方法或者操作data里面的数据，最早只能在created里面进行操作。

3.beforeMount(){} 表示模板已经在内存中编辑完成了，但是尚未渲染到模板页面中。即页面中的元素，没有被真正的替换过来，只是之前写的一些模板字符串。

4.mounted(){} 表示内存中模板已经真实的挂载到页面中去了，用户可以看到渲染好的界面了

注意这是一个生命周期函数的最后一个函数了，执行完这个函数表示 整个vue实例已经初始化完成了，组件脱离了创建阶段，进入运行阶段。

下面是运行期间的两个生命周期函数的钩子：

5.beforeUpdate(){} 表示我们的界面还没更新 但是data里面的数据是最新的。即页面尚未和最新的data里面的数据包吃同步。

6.update(){} 表示页面和data里面的数据已经包吃同步了 都是最新的。

7.beforeDestory(){} 当执行这个生命周期钩子的时候 vue的实例从运行阶段进入销毁阶段 此时实例身上的data 还有 methods处于可用的状态。

8.Destoryed(){} 表示组件已经完全被销毁了 组件中所有的实例方法都是不能用了

四、如何实现watch监听开始之后会被立即调用

watch里面由一个immediate属性，它的值是一个Boolean类型的数据，将它设置为true就可以实现在watch监听开始之后就会立即调用

五、如何深度监听对象的变化

 使用vue中的watch方法监听该对象，设置deep:true可以进行深度监听，当对象中的属性发生变化时，会调用handler方法

如果我们想实现监听对象或者数组中任意一个元素的变化，那么我们可以使用 双引号包裹 住 对象 名.属性值的方式来实现只监听对象数组中任意一元素的变化

六、v-model指令的底层

v-model就是一个语法糖,首先给元素动态绑定一个value属性,再给元素绑

定一个input事件

七、双向数据绑定的原理

双向数据绑定是通过数据劫持结合发布订阅者的模式和object.defineproprety()来劫持各个属性的setter、getter，如果数据有变动，就发布消息给订阅者触发监听。

八、Vue中操作data数组哪些方法可以触发更新视图，哪些不可以，不可以如何解决？

1.可以触发视图更新的数组方法有如下两种：

1.是会改变当前的数组，它们分别是push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.是不会改变当前的数组，返回一个新数组，它们是filter()、concat()、 slice()。

接下来是不可以更新视图的这里以下面两种作为代表：

1.比如利用索引直接设置一个数组项，这里举一个例子比如：This.Array[index]=newArray,

2.是直接修改数组长度的方法，比如This.Array.length=newLength

解决这两种的情况有$set和splice两种方法 ；

$set 方法：this.$set(this.array,index,newValue)

Splice方法：this.array.splice(index,1,newValue)

九、vue如何实现首屏加载的优化

十、自定义指令中bind和inserted钩子函数的区别

十一、vue生命周期及典型应用场景

 十二、vuex中的特性有哪些

vuex是实现组件全局数据管理的一种机制，可以方便组件之间的数据共享。

vuex的作用：

1 能够在vuex中集中管理共享的数据，方便开发和后期进行维护。

2 能够高效的实现组件之间的数据共享

3 存储在vuex中的数据时响应式的，当数据发生改变时，页面中的数据也会同步更新

三、Vuex中的核心特性
1、State：用于提供唯一的公共数据源，所有共享的数据都要放到Store中的state中存储。
在组件中访问state的方式有两种：

用this.$ store.state.全局数据名称，如this.$store.state.num
先在组件中按需导入mapState函数，如import { mapState } from
‘vuex’，然后将数据映射为计算属性，computed: { …mapState([‘全局数据名称’]) }
2、Mutation：用于变更 $store 中的数据，注意，在mutation中不能写异步代码。
在mutations中添加如下代码：

mutations: {
	//第一个形参永远都是state也就是$state对象
    //第二个形参是调用add时传递的参数
    add(state,step){
    	// 可对state中的数据进行修改
        state.count+=step;
    }
  }

然后在Add.vue组件中给按钮添加事件，this.$store.commit() 调用函数，使用代码如下：

<button @click="Add">+n</button>

methods:{
  Add(){
    //使用commit函数调用mutations中的对应函数，
    //第一个参数就是我们要调用的mutations中的函数名
    //第二个参数就是传递给add函数的参数
    this.$store.commit('add',10)
  }
}

第二种方式，首先在组件中按需导入mapMutations，即import { mapMutations } from
‘vuex’，然后将其映射为methods中的方法，即methods:{ …mapMutations([‘add’])
}，然后可直接在按钮中绑定此方法。如<button @click=“add”>+1 </ button>
 

3、actions：由于在mutations中不能编写异步代码，会导致vue调试器报错，所以可以在actions中来执行异步操作。
操作步骤有两种方式：

1. 打开store下的js文件，修改actions，如下：

ctions: {
  addAsync(context,step){
    setTimeout(()=>{
      context.commit('add',step);
    },1000)
  }
}

然后在Add.vue组件中给按钮添加事件，使用 this.$store.dispatch() 将调用函数并传参，代码如下：

<button @click="AddAsync">+1</button>

methods:{
  AddAsync(){
    this.$store.dispatch('addAsync',5)
  }
}

第二种方式，先在组件中按需导入import { mapActions } from
‘vuex’，然后映射到methods方法中，即methods:{ …mapMutations([‘subAsync’])
}获得mapMutations映射的subAsync函数，然后可直接在按钮中绑定此方法。<button
@click=“subAsync”>异步-1 </ button>
4、getters：用于对 store中的数据进行加工处理形成新的数据，它只用于包装数据，不会修改store中的原数据。
使用方式如下：

打开store下的js文件，添加getters

export default new Vuex.Store({
  .......
  getters:{
    //添加了一个showNum的属性
    showNum : state =>{
      return '最新的count值为：'+state.count;
    }
  }
})

然后打开Addition.vue中，添加插值表达式使用getters

<h3>{{$store.getters.showNum}}</h3>

也可以在Addition.vue中，导入mapGetters，并将之映射为计算属性

import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])
}

四 mutation和action的区别？
流程顺序区别：流程可拆分为两部分——“对应视图 -----> 修改State”，所以流程为 视图触发action，action触发mutation。
功能区别：mutation主要用于修改state中的数据，理论上是修改state的唯一途径。而action用于处理异步任务，通过异步操作变更数据。
二者有不同的限制：mutation必须同步执行，action可以异步，但不能直接操作state，可获取数据后调用mutation提交最终数据。
 

十三、如何理解虚拟DOM

其实虚拟dom就是一个普通的js对象

在vue中，每个组件都有一个render函数，每个render函数会返回一个虚拟dom树，也就是说每一个组件都对应一个虚拟dom树

2.为什么需要虚拟dom

在vue中，试图渲染会调用render函数，这种渲染不仅发生在组建创建的时候，同时发生在试图依赖的数据更新的时候，如果渲染的时候直接使用真实的dom，真实dom的创建更新插入等操作会带来巨大的性能损耗，从而极大的降低渲染的效率。
所以vue在渲染的时候，使用虚拟dom代替真是dom，主要解决渲染效率问题，

3.虚拟dom怎么转换成真实dom的

在一组件第一次渲染的时候，会生成虚拟dom🌲，然后会根据虚拟dom🌲创建真实dom，并把真实dom挂在到页面中合适的位置，此刻，每个虚拟dom就会对应一个真实dom。
如果一个组件受响应式数据变化的影响，需要重新渲染的时候，他仍然会重新调用render函数，创建出一个新的虚拟dom🌲，用新🌲和旧🌲对比，找到最小更新量，然后更新必要的虚拟dom节点，最后通过更新这些节点，去修改真实的dom。

4.模版和虚拟dom是什么关系

vue框架中又一个compile模块，他主要负责将模版转换为render函数，而render函数调用后将得到虚拟dom。

编译的过程

将模版字符串转换成AST
将AST转换成render函数

十四、webpack配置过哪些loader

CSS-loader

less-loader

url-loader

babel-loader

十五、事件循环是什么

事件循环:
js的特点是单线程，即同一时间只能干一件事情，当然这是基于他的主要运行环境是浏览器而这样设计的（创立js之初，主要运行在浏览器环境。其一这样的场景没必要用复杂的多线程；其二单线程设计避免了很多复杂的同步问题，如多线程同时操作dom）。但后来的发展，js现在也可以运行在非浏览器环境如nodejs中，但依然是单线程）。但单线程就意味着所有任务需要排队运行，如某一个任务耗时很长（如网络请求等），就会让后面的任务一直处于等待状态，为了解决这个问题，js中将任务分为两类：同步任务和异步任务。同步任务是在主线程上排队马上执行的任务，异步任务是延后执行（至少要等到同步任务执行完毕后），不进入主线程而在任务队列中的任务。运行机制是：
1. 所有同步任务都在主线程执行;
2. 任务队列中存放的是某些有了运行结果的异步任务的事件;
3. 所有同步任务执行完毕后，就读取任务队列中该事件对应的异步任务，开始执行;
4. 不断循环第3步。上面这个循环机制即事件循环机制。
宏任务和微任务:
宏任务：setTimeout、setInterval、dom事件、Ajax请求等
微任务：promise，async/await 等
执行时机：微任务 > DOM渲染 > 宏任务

十六、如何理解事件委托

利用事件冒泡机制处理指定一个事件处理程序，来管理某一类型的所有事件。

事件委托的好处

• 利用冒泡的原理，将事件加到父级身上，触发执行效果，这样只在内存中开辟一块空间，既节省资源又减少DOM操作，提高性能
• 可以为动态添加的元素绑定事件

十七、promise解决了什么问题

1.回调地狱问题
2.代码的可读性问题
3.信任问题

所谓回调地狱就是指把函数作为参数层层嵌套请求，这样层层嵌套，人们称之为回调地狱，代码阅读性非常差。举个列子

十八、如何处理异步

1 回调函数

2 事件监听

3 promise

十九、ES5和ES6的区别

es5和es6对于前端开发来说是经常都会使用的方法，他们为我们开发提供了很多便利的方法和写法，使我们的代码更加的优雅，作为一个新人就让我简单总结一下es5与es6的不同。

1. 变量

首先在变量方面es6为我们提供了let和const这两种新的声明方法，let和const的出现大大的避免了变量污染的问题，因为在es6的语法中，let和const是局部作用域变量声明，应该说他们带来了局部作用域的概念，用let和const声明的变量只会在声明的作用域中起作用，切不可以重复声明，这样可以防止我们在声明变量的时候会造成全局变量污染，也会防止我们声明重复，导致一个变量充当了两个变量使用，并且const声明的变量是只读类型的，意味着我们用const声明的变量只可以作为常量使用，而且这两个声明方法还存在着暂时死区，在es6出来之前我们用var来声明变量的时候会发生与解析即变量提升不复制，虽然没有值但是变量已经存在被定义了，但是const和let却不会，他们声明的变量不会提升，在你声明之前都不会被定义。

2. this指向

es6新增了箭头函数，箭头函数不会改变this的只想，这样我们在调用方法或者执行函数的时候就可以不用担心this指向，也不会为了缓存this而去声明that来执行方法了。

3. 模板字符串，es6提供的模板字符串可以极大为我们使用变量代替内容提供了便利，而es5 还没有模板字符串，所以很多混用都是通过‘’+变量+‘’这个模式完成的

4. es6还提供了解构赋值的功能，并且还支持默认值得使用为我们编写提供了很多的便利

二十、递归函数的应用

递归:自己调用自己的手段

递归函数:一个函数内部，调用了自己，循环往复 其实递归函数和循环很类似 需要有初始化，自增，执行代码，条件判断的，不然就是没有尽头的递归函数，我们叫做死递归

二十一、防抖节流的操作

// 防抖函数
/* 可以把多个顺序地调用合并成一次，即规定事件被触发的次数 */
function debounce(func, wait, immediate) {
  var timeout;
  return function () {
    var context = this, args = arguments;
    var later = function () {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}
// 节流函数
/* 只允许函数在x毫秒内执行一次 */
function throttle(func, wait, mustRun) {
  var timeout,
    startTime = new Date();
 
  return function () {
    var context = this,
      args = arguments,
      curTime = new Date();
 
    clearTimeout(timeout);
    // 如果达到了规定的触发时间间隔，触发 handler
    if (curTime - startTime >= mustRun) {
      func.apply(context, args);
      startTime = curTime;
      // 没达到触发间隔，重新设定定时器
    } else {
      timeout = setTimeout(func, wait);
    }
  };
}
var navcommonScrollFuc = debounce(function () {
  let left = $(document).scrollLeft();
  console.log(left)
  $(".navcommon_wrap").css('left', (-left) + 'px');
}, 500, false)
$(window).scroll(navcommonScrollFuc)
 

二十二、回流和重绘

回流：元素的大小或者位置发生改变（当页面布局发生改变的时候），触发了重新布局导致渲染树重新计算布局和渲染

​如添加或删除可见的DOM元素；
元素的位置发生变化；
元素的尺寸发生变化、
内容发生变化（如文本变化或图片被另一个不同尺寸的图片所代替）；
页面一开始渲染的时候（无法避免）；

​ 因为回流是根据视口大小来计算元素的位置和大小的，所以浏览器窗口尺寸变化也会引起回流

2、重绘：只改变自身样式，不会影响到其他元素

元素样式的改变(但宽高、大小、位置不变)
eg：   visibility、color、background-color等
 

二十三、301和302状态码区别

301 redirect: 301 代表永久性转移(Permanently Moved)。 
302 redirect: 302 代表暂时性转移(Temporarily Moved )。