2021前端常见面试题

1. vue 组件的生命周期？

beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
        // console.log(this.msg)
        // this.show()
        // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
      },
      created() { // 这是遇到的第二个生命周期函数
        // console.log(this.msg)
        // this.show()
        //  在 created 中，data 和 methods 都已经被初始化好了！
        // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
      },
      beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
        // console.log(document.getElementById('h3').innerText)
        // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
      },
      mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
        // console.log(document.getElementById('h3').innerText)
        // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
      },
 
 
      // 接下来的是运行中的两个事件
      beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了】
        /* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg) */
        // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
      },
      updated() {
        console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg)
        // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
      }

2. created 和 mounted 有什么区别？(挂载完成之后 this.$el 获取当前组件的 dom 元素)

1. mounted一般是在html渲染完成后的操作，此时el，data都已经加载完成，一般对dom的操作都写在mounted中，例如获取innerHTML，初始化echarts的时候。  
2. created一般是在html渲染前的操作，此时el还是undefined，data已经存在。这里不能对dom进行操作  

3. keep-alive:keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素。

当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

4. slot 插槽(就是组件的占位符)：slot（匿名插槽，具名插槽）与slot-scope（作用域插槽）

1. .单个插槽 -> 匿名插槽
2. 具名插槽:  

需要多个插槽时，可以利用 元素的一个特殊的特性：name来定义具名插槽
3. 作用域插槽——带数据的插槽
单个插槽和具名插槽中插槽上不绑定数据，所以父组件提供的模板既要包括样式又要包括数据，而作用域插槽是子组件提供数据，父组件只需要提供一套样式

5. 组件之间传值

1. 父传子：通过属性进行传递（在子组件标签上绑定自定义属性名，值是父组件要传递的数据，在子组件内部通过props属性接收属性名）  
2. 子传父：通过事件派发（在子组件标签上绑定自定义事件，子组件内部通过$emit给该事件推送数据，父组件内部通过函数接收）  
3. 平行组件（事件总线）：使用eventbus事件总线，在代码中创建一个空白的vue实例，所有事件派发和监听都在此实例上进行。

6. 计算属性？主要用一些简单的计算。–计算属性只有在它的相关依赖发生改变时才会重新求值。

7. 计算属性和 methods 有什么区别？–>总结：computed计算属性的缓存原理在我们处理大量数据的时候使用可以大大提高效率，不必在数据没有发生改变的时候重新获取数据的值，可直接获取到结果，并且只执行绑定依赖的方法。methods里方法在依赖的值改变后，只有设置触发才会重新执行methods里相关的方法。

1. 计算属性方法调用不用加();methods需要；
2. 执行机制  

computed里的方法在初始化执行过后，只要任何值有更新，那么所有在computed计算属性里和其相关的值都会更新。
methods只有在调用的时候才会执行对应的方法，不会自动同步数据。
computed计算属性跟methods在内部的函数写起来没有什么区别，只是在调用的时候不一样

8. 过滤器?

 1. 过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具  
 2. 过滤器怎么串联使用

//在双花括号中 

{{ message | capitalize }}

//在 `v-bind` 中 

<p v-bind:id="rawId | formatId"></p>

//也可以串联多个过滤器 

{{ message | filterA | filterB }}

9. vue 中怎么定义组件，组件定义需要注意什么事情？

10. 在 vue 中如何定义一个类似于 element-ui 的组件库？

11. vue-router

路由的两种模式：history，hash
路由传参：params，query
params传参的时候可以在路由配置的时候设置占位符
query传参就是标准的url传参形式
如果我们想刷新页面之后路由传递的参数还存在就必须使用query传参或者params传参的时候设置路由占位符
路由守卫
beforeEach
afterEach
在路由守卫里可以做登录判断？元属性(meta)

12. vuex

*****
单项数据流
vuex中的数据流向(参照官网给的图能说明)
vuex中主要的五大模块(state,getters,actions,mutations,modules)
mapState
mapActions
mapMutations

13. vue 中的 mvvm 是怎么实现的:

MVVM拆开来即为Model-View-ViewModel，有View，ViewModel，Model三部分组成。View层代表的是视图、模版，负责将数据模型转化为UI展现出来。Model层代表的是模型、数据，可以在Model层中定义数据修改和操作的业务逻辑。ViewModel层连接Model和View。
对数据（Model）进行劫持，当数据变动时，数据会出发劫持时绑定的方法，对视图进行更新。

14. diff 算法：当数据发生改变时，set方法会让调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图。

15. 虚拟dom：virtual DOM是将真实的DOM的数据抽取出来，以对象的形式模拟树形结构

16. vue 中为什么不用 jQuery

17. vue 中怎么操作 dom 元素($el,$refs)

18. vue 中怎么获取父组件的内容($root)

19. vue 中父组件怎么调用子组件的方法($refs 选中子组件，直接调用方法名)

20. 当页面应用程序刷新之后怎么保证数据还是存在的？你怎么缓存页面数据(sessionStorage,localStorage)