【2021面试】vue篇

1、vue的生命钩子

回答该问题时，最好能将每个周期内做的事情讲出来，因为有时面试官会让你详细讲每个周期内发生了什么

beforeCreated()：在实例创建之间执行，数据未加载状态。
created()：在实例创建、数据加载后，能初始化数据，DOM渲染之前执行。
beforeMount()：虚拟 DOM 已创建完成，在数据渲染前最后一次更改数据。
mounted()：页面、数据渲染完成，真实 DOM 挂载完成。 beforeUpadate()：重新渲染之前触发。
updated()：数据已经更改完成，DOM 也重新 render 完成，更改数据会陷入死循环。
beforeDestory()：销毁前执行（实例仍然完全可用）。
destoryed()：销毁后执行。
除此之外，还有两个组件的生命周期比较容易忽略
keep-alive组件中：
activated()：当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated
deactivated()：页面退出时触发，当再次进入（前进或者后退）时，只触发activated

2、组件通信传值

父子组件
    1、父—> 子：props
    2、子—> 父：$emit / $on （事件传递）
    3、$parent / $children
    4、ref
兄弟组件
    1、小型传值：利用中间件，一个空的Vue实例，通过$emit / $on的事件传递方式
    2、大型传值：利用vuex，可以对数据进行处理，并且共享状态
跨级通信
    1、provide / inject
    2、$attrs / $listeners

3、vue的指令有哪些

带有v-前缀的，功能是拿来响应DOM的行为，例如：
v-bind（绑定属性）
v-if、v-show（控制元素的显示和隐藏）
v-model（绑定表单元素的值）
v-once（执行一次性插值，当数据改变时，插值处的内容不会更新）
v-on:click（绑定事件）

4、v-if和v-show区别

共同之处：都是动态显示DOM元素
不同之处：
    1、v-if是动态的向DOM树内添加或者删除DOM元素（有一个局部编译/卸载的过程）
    2、v-show是通过设置DOM元素的display样式属性控制显隐（只是简单的基于css切换）

5、vue双向绑定的机制（必问）

主要回答：
    vue数据双向绑定是通过数据劫持 Object.defineProperty() 结合发布者-订阅者模式的方式来实现的，利用Object.defineProperty()来劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体实现过程：
    a、首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。
    b、如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。
    c、因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。
    d、我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。

    总结来说就是：vue 通过数据属性的 数据劫持和发布订阅的模式实现，大致可以理解成由3个模块组成，observer完成对数据的劫持，compile完成对模板片段的渲染，watcher作为桥梁连接二者，订阅数据变化及更新视图

6、mvvm理解/mvc理解

1）MVVM
含义：分为Model、View、ViewModel三者
    Model 代表数据模型，数据和业务逻辑都在Model层中定义
    View 代表UI视图，负责数据的展示
    ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作
    Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom
2）MVC
含义：分为Model、View、Controller三者
    Model 引用系统数据，管理系统功能并通知View更改用户操作
    View 用户接口，用于显示数据
    Controller 将用户操作映射到Model，并操作视图

7、v-for中的key值在dom上有什么作用

key的作用主要是为了高效的更新虚拟DOM

8、v-if和v-for的优先级

v-for 比 v-if 具有更高的优先级：这意味着 v-if将分别重复运行于每个 v-for循环中，将会影响速度，尤其是当只需要渲染很小一部分的时候


必要情况下应该替换成computed属性

9、computed、methods、watch区别

1）watch（一个数据影响多个数据）
    a、支持异步操作
    b、不支持缓存，数据变，直接会触发相应的操作
    c、接受两个参数，第一个参数是最新值，第二个参数是之前的值
2）computed （一个数据受多个数据影响）
    a、只有当数据变化时才会重新渲染，否则就会直接拿取缓存中的数据，它是基于data中声明过的数据通过计算得到的
    b、如果一个属性是由其他属性计算而来的，也就是说依赖其他的属性
    c、处理复杂的逻辑运算
    d、默认的只有调用getter方法
    e、不支持异步操作
3）methods 是定义函数的，需要手动调用才能执行

10、Vue 组件 data 为什么必须是函数

c因为js本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会相互影响了

11、自己实现v-model的功能

思路：
1、组件绑定input事件，通过$emit方法将value值发送出去
2、通过watch监听这个value值的变化

12、组件化开发/模块化开发的区别

• 组件是具体的。按照一些小功能的通用型和可服用行来抽象组件。组件化更多的关注ui部分，比如用户看到的弹窗，页脚，按钮等等，这些组件可以组合成新的组件。目的在于，提高代码的复用性，每个组件的耦合性底。
• 模块是抽象的。按照项目业务划分的。将同一类型的代码整合在一起（例如用户信息模块，登陆模块等），所以模块的功能相对复杂一些，不同模块之间会存在依赖关系。

13、vue制作一个过滤器

思路：
1）在html的mustache模版引擎中使用管道符号
2）在vue实例中添加filter属性
3）属性内用函数的形式添加你要实现的展示方式
过滤器不改变真正的 data，而只是改变渲染的结果，并返回过滤后的版本

{{messsge | cap}}

filter: {
    // value：通过管道传来的数据，也就是你要处理的数据
    // 后面的参数就是调用过滤器时在圆括号里的参数
    cap: function(value, arg1, arg2){
        return 处理后的数据;
    }
}

14、单页面有什么好处

含义：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端
优势：
    a、用户体验好、快，内容的改变不需要重新加载整个页面，对服务器压力较小
    b、良好的前后端分离
    c、页面效果会比较炫酷
缺点：
    a、不利于seo
    b、前进、后退、地址栏、书签等，都需要程序进行管理，页面的复杂度很高，需要一定的技能水平和开发成本高
    c、初次加载时耗时多

15、vue的路由模式有哪些，并且阐述它们的区别

vue-router的核心是：改变视图的同时不会向后端发出请求
三种路由模式:
    1、hash：使用 URL hash 值来作路由。比如这个 URL：http://www.abc.com/#/hello hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面
    2、history：不带hash值，依赖 HTML5 History API 和服务器配置（刷新后404的情况）
    3、abstract：支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式

16、vue的路由的hash和history模式中如何监听变化

hash模式：利用hashchange监听hash的改变，window.addEventListener(‘hashchange’, () => {});
history模式：利用onpopstate，但是pushState、replaceState不会触发

<script type="text/javascript">
        var appdiv = document.getElementById("app")
        window.addEventListener("hashchange", function (e) {
            console.log(e.newURL)
                        // #/login
            console.log(location.hash)
            switch (location.hash) {
                case "#/login":appdiv.innerHTML="我是登录页面";
                    break;
                case "#/register":appdiv.innerHTML="我是注册页面";
                break;
            }
        })
    </script>

17、nextTick原理

    Vue 在更新 DOM 时是异步执行的，只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次，这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环tick中， Vue 刷新队列并执行实际(已去重)的工作。Vue 在内部尝试对异步队列使用原生Promise.then和 MutationObserver以及setImmediate, 如果执行环境不支持，会采用setTimeout(fn, 0)代替


异步更新的原因：
如果只要每次数据改变，视图就进行更新，会有很多不必要的渲染，比如一段时间内，你无意中修改了 message修改了很多次，其实只要最后一次修改后的值更新到DOM就可以了，假如是同步更新的，每次 message 值发生变化，那么都要触发 setter->Dep->Watcher->update->patch ，这个过程非常消耗性能

一般问到这块的时候，会牵扯出来，事件循环机制

18、vue的数据流是单向还是双向的

数据流指的是，组件之间的数据流动。
react和vue都是单向数据流