有关 Vue 的基础知识

👁 2021-03-02

熟悉有关Vue的内容

1 单页面应用

2 MVVM与MVC的区别

MVVM包括view视图层、model数据层、viewmodel层。ViewModel通过实现一套数据响应式机制自动响应Model中数据变化，同时Viewmodel会实现一套更新策略自动将数据变化转换为视图更新，通过事件监听响应View中用户交互修改Model中数据。这样在ViewModel中就减少了大量DOM操作代码。MVVM在保持View和Model松耦合的同时，还减少了维护它们关系的代码，使用户专注于业务逻辑，兼顾开发效率和可维护性。在提高开发效率、可读性同时还保持了优越的性能表现。
MVC是包括view视图层、controller控制层、model数据层。View 传送指令到 Controller 完成业务逻辑后，要求 Model 改变状态，Model 将新的数据发送到 View，用户得到反馈。它的优点是分层清晰，缺点是数据流混乱，灵活性带来的维护性问题。

3 Vue的响应式原理

4 Vue双向数据绑定

5 Vue组件间通信的方式

兄弟组件通信方式

6 Vue 组件的data为什么是一个函数

7 Vue中v-for和v-if为何不能连用

8 Vue父子组件挂载的顺序

9 keep-alive组件的使用

10 Vue 计算属性与监听器、方法的比较

11 React与Vue的区别

12 v-if与v-show的区别

详细信息请看官方文档
1.v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
2.v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
3.相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
4.一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，
则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

13 Vue中的key的作用

key值大多情况下使用在循环语句中，从本质来讲主要作用大概有以下两点：
1.主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes，相当于唯一标识ID。
2.Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，因此使用key值可以提高渲染效率，同理，改变某一元素的key值会使该元素重新被渲染。

14 Vuex的使用

15 Vue的单向数据流

16 Vue2.x的生命周期

详细查看官方文档
beforeCreate（创建前）在数据观测和初始化事件还未开始。
created（创建后）完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来。
beforeMount（载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted（载入后）在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate（更新前）在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后）在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前）在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后）在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
1.什么是vue生命周期？
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
2.vue生命周期总共有几个阶段？/ vue生命周期具体的名字和过程？
它可以总共分为8个阶段：beforeCreate创建前、created创建后, beforeMount载入前、mounted载入后，beforeUpdate更新前、updated更新后，beforeDestroy销毁前、destroyed销毁后。
3.vue生命周期的作用是什么？
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
4.第一次页面加载会触发哪几个钩子？
会触发下面这几个beforeCreate, created, beforeMount, mounted 。
5.DOM 渲染在哪个周期中就已经完成？
DOM 渲染在 mounted 中就已经完成了。

17 vue-router的两种模式

18 vue-router的导航钩子函数

详细信息请看官方文档
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
1.全局导航钩子
全局导航钩子主要有两种钩子：前置守卫、后置钩子。
注册一个全局前置守卫：

const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
    // do someting
});

这三个参数 to 、from 、next 分别的作用：
1.to: Route，代表要进入的目标，它是一个路由对象
2.from: Route，代表当前正要离开的路由，同样也是一个路由对象
3.next: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数
注意：next 方法必须要调用，否则钩子函数无法 resolved

对于全局后置钩子：

router.afterEach((to, from) => {
    // do someting
});

不同于前置守卫，后置钩子并没有 next 函数，也不会改变导航本身。
2.路由独享的守卫
可以在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({
routes: [
    {
    path: '/login',
    component: Login,
    beforeEnter: (to, from, next) => {
        // ...
    }
    }
]
})

3.组件内的守卫

可以在路由组件内直接定义以下路由导航守卫：

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

//官方文档案例

const Foo = {
    template: `...`,
    beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
    },
    beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
    },
    beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
    }
}

一个小案例：如果访问登录之后的路由或请求，必须首先登录才能够访问。

// 挂在路由导航守卫
router.beforeEach((to, from, next) => {
    // to代表要访问的路径
    // from代表从哪个路径来
    // next代表一个函数，表示放行 next()放行,next('/login)强制跳转
    if (to.path === '/login') return next()
    // 获取token
    const tokenStr = window.sessionStorage.getItem('token')
    if (!tokenStr) return next('/login')
    next()
})

19 Vue 虚拟DOM

为什么要用虚拟DOM：数据驱动视图，控制DOM操作次数。
虚拟DOM简单的说就是一颗树，一颗以javaScript对象（VNode）作为基础的树，用对象的属性来描述节点，因此这个对象至少包含标签名、属性和子元素对象。
虚拟DOM 的最终目的是将虚拟的节点渲染到视图上，其实它主要做了两件事：
(1)提供与真实DOM节点对应的虚拟节点VNode；
(2)将虚拟节点VNode和旧虚拟节点(oldVNode)进行对比，然后更新视图；
虚拟DOM的优势：
(1)具备跨平台的优势。
(2)减少DOM操作，js运行的效率高。虚拟DOM本质上其实就是js 和 dom 之间的一个缓存，通过diff算法计算出真正需要更新的节点，最大限度的减少DOM操作
(3)提升渲染的性能；dom操作的减少，可以避免更多的回流和重绘等，更加高效的提高性能。

参考链接

Vue 中的 Virtual Dom

20 nextTick的原理

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
详细查看官方文档

nextTick接受一个回调函数作为参数，他的作用是将回调延迟到下次DOM更新周期之后执行。在开发项目会遇到这样的场景：当更新状态后，需要对新DOM做一些操作，但这时获取不到更新后的DOM。

为什么Vue.js使用异步更新队列？
在VUE.js中，当状态发生变化时，watcher会得到通知，然后触发虚拟DOM的渲染流程。而watcher触发渲染流程不是同步的，而是异步的。Vue.js中有一个队列，每当需要渲染时，会将watcher推入这个队列中，在下次事件循环中再让watcher触发渲染的流程。

如果在同一轮事件循环中有两个数据发生变化，那么组件的watcher会收到两份通知，从而进行两次渲染。事实上，并不需要两次渲染，虚拟DOM会对整个组件进行渲染，所以只需要等所有状态都修改完毕后，一次性将整个组件的DOM渲染到最新。
Vue.js的实现方式是将接收到通知的watcher实例添加进队列缓存起来，并且在添加到队列之前检查是否已经存在相同的watcher，只有不存在时，才将watcher实例添加进队列中。然后再下一次事件循环中，Vue.js会让队列中的watcher触发渲染流程并清空队列。这样就可以保证即便是在同一事件循环中有两个状态发生改变，watcher最后也只执行一次渲染流程。

“下次更新周期”：下次微任务执行时更新DOM。vm.$nextTick其实是将回调添加进微任务中，只有在特殊情况下才会降级成宏任务，默认会添加进微任务中。使用微任务因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕，还有因为微任务不会与浏览器默认事件冲突。

1.什么时候会用到vue.nextTick()
（1）created()钩子函数中，进行dom操作，要放在vue.nextTick()回调函数中。
原因：created()钩子函数执行的时候,dom其实并未进行任何渲染。
（2）mounted钩子函数中，在数据变化中要执行某个操作，而这个操作需要随数据改变而改变数据结构。
原因：设置数据改变，vm.someData = ‘new value’, dom并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时，才会进行必要的dom更新。此时如果想要根据更新的dom状态去做某些事情时，就会出现问题。
为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) ，这样回调函数在 DOM 更新完成后就会调用。

参考链接
【面试】web前端经典面试题试题及答案-vue

21 Vue 插件的使用

详细请看官方文档
1.创建文件夹libs，在该目录下创建MyPlugin.js
2.创建一个对象

let MyPlugin = {}
export default MyPlugin

3.为插件暴露一个install方法，添加全局方法、过滤器、实例方法等

MyPlugin.install = function(Vue,options){

    // 1. 添加全局方法或 property
    Vue.myGlobalMethod = function () {
        console.log('全局方法')
    }

    // 2. 添加全局资源
    Vue.directive('my-directive', {
        bind () {
            console.log('指令绑定成功')
        }
    })


    // 3. 添加实例方法
    Vue.prototype.$myMethod = function (methodOptions) {
        console.log('实例方法')
    }

    // 4. 注入组件选项
    Vue.mixin({
        created: function () {
            console.log('created')
        }
    })

}

4.main.js中引入MyPlugin.js，然后通过全局方法 Vue.use() 使用插件

import MyPlugin from './libs/MyPlugin.js'
Vue.use(MyPlugin)

22 vue-loader是什么

vue-loader 是 webpack 的一个 loader，用于处理 .vue 文件，是解析.vue文件的一个加载器。

23 对Vue.js的template编译的理解

参考链接

对Vue.js的template编译的理解

24 对vue的性能优化方法

1.路由懒加载
2.keep-alive组件缓存
3.在进行频繁切换时使用v-show
4.v-if与v-for不要一起使用，可以嵌套
5.图片懒加载
6.使用第三方插件如element-ui进行按需加载，避免体积过大

25 对Vue3.0新特性的了解

根据尤大的PPT总结，Vue3.0改进主要在以下几点:
1.更快
虚拟DOM重写、优化slots的生成、静态树提升、静态属性提升、基于Proxy的响应式系统
2.更小:通过摇树优化核心库体积
3.更容易维护:TypeScript+模块化
4.更加友好
跨平台:编译器核心和运行时核心与平台无关，使得Vue更容易与任何平台(Web、Android、iOS)一起使用
5.更容易使用
改进的TypeScript支持，编辑器能提供强有力的类型检查和错误及警告
更好的调试支持独立的响应化模块
Composition API

参考链接

有关vue的视频

26 对Vue的理解

详细请看官方文档
1.渐进式JavaScript框架
2.易用、灵活和高效
（1）渐进式JavaScript框架:
与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
（2）易用性
vue提供数据响应式、声明式模板语法和基于配置的组件系统等核心特性。这些使我们只需要关注应用的核心业务即可，只要会写js、html和css就能轻松编写vue应用。
（3）灵活性
渐进式框架的最大优点就是灵活性，如果应用足够小，我们可能仅需要vue核心特性即可完成功能;随着应用规模不断扩大，我们才可能逐渐引入路由、状态管理、vue-cli等库和工具，不管是应用体积还是学习难度都是一个逐渐增加的平和曲线。
（4）高效性
超快的虚拟 DOM 和 diff 算法使我们的应用拥有最佳的性能表现。
追求高效的过程还在继续，vue3中引入Proxy对数据响应式改进以及编译器中对于静态内容编译的改进都会让vue更加高效。