Mvvm

模型 model、 视图 View 、 viewmodel 是作为模型和视图的桥梁，当模型层数据改变，vm会检测到并通知视图层进行响应的修改

Vue双向绑定的原理

Vue双向绑定就是：数据变化更新视图 ，视图变化更新数据

Vue双向绑定是通过 数据劫持 和 观察者模式 来实现的

说说你对SPA 的理解

SPA（single-page-applicatiion） ，单页应用

它是一种网络应用程序或网站的模型，它通过动态重写当前页面，与用户交互 ； 这种方案避免了页面之间切换打断用户的体验

优势：

  • 具有桌面应用的及时性，网站的可移植性和可访问性
  • 用户体验好，快，内容的改变不需要重新加载整个页面
  • 良好的前后端分离，分工更明确

简述一下VUE生命周期

也就是从开始的创建，初始化数据，编译模板，挂载dom-渲染、更新、渲染 准备销毁

一 、创建前/后

在 beforeCreated，data和method 还没有初始化

在created生命周期函数执行的时候 data和method以及初始化完成

二、渲染前、后

在beforeMount生命周期函数执行的时候，已经变量好了模板字符串，但还没有真正的渲染到页面中去

在mounted生命周期函数执行时，已经渲染完成，可以看到页面

三、数据更新前、后

在 beforeUpdate 执行的时候，以及拿到最新的数据，但是还没渲染视图

在 updated 执行的时候，已经吧更新后的数据渲染到视图上去

四、数据销毁前、后

在beforeDestory 生命周期函数执行的时候，实例准备进入销毁阶段。，此时data，methods 还是可用

在destroyed 执行的时候 已销毁

v-for 循环为什么一定要绑定key？

页面上的标签都对应着虚拟dom对象虚拟dom就是js对象）循环中，如果没有唯一的key，页面上删除一条标签，由于并不知道删除的是拿一条，所以要把全部的虚拟dom重新渲染，如果知道key为x的标签被删除掉，只需要把渲染dom为x的标签删除即可

组件中的data为什么要定义一个函数而不是一个对象

组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，不会产生数据污染；

Vue实例是挂载到那个标签上的？

vue实例最后会挂载在body标签里面，所以在vue中是获取不了body标签的

Vue中computed 和 watch 的区别是什么？

watch：监测的是属性值，只要属性值发生变化，会触发回调函数来执行一系列的操作

computed：监测的是依赖值，依赖值不变的情况下会直接读取缓存进行复用，变化的情况下才会重新计算

组件间通讯的方案

  • 通过props传递
  • 通过$emit 触发自定义事件
  • 使用ref
  • EventBus 中央事件总线
  • $parent 或 $children
  • Vuex

NextTick 是什么？

在DOM更新循环结束之后 执行延迟回调，在修改数据之后立即使用这方法，获取更新后的DOM

理解：Vue在更新dom的 时是异步执行的，当数据发生变将开启一个异步更新队列，视图层需要等待队列中所有数据变化完成之后，再统一进行更新

this.$nextTick(function(){
    //DOM更新之后
}
)

slot 是什么 ？

是Web组件内的一个占位符

通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理

slot可以分来以下三种：

  • 默认插槽
  • 具名插槽
  • 作用域插槽

Vuex 是什么，每个属性是干嘛的，如何使用？

Vuex是专门为vuejs设计的状态管理工具，它采用集中式存储管理引用所有组件的状态

Vuex的属性包括一下6个

  1. state ：存储着基本数据
  2. Getters ： getter 是store的计算属性，对state的加工就想computed的计算属性
  3. Mutations： 提交更改数据，使用store.commit 方法更改state存储状态
  4. Actions：actions相当于提交mutation, 来封装异步方法的
  5. Module

导航守卫

  1. 全局前置守卫

    可以使用 router.beforeEach 注册一个全局前置守卫 

    const router = new VueRouter({
        routes:[]
    })
    router.beforeEach((to,from,next)=>{
        // ....
    })

Vue声明周期中 异步加载是再 mounted 还是 created 里实现

最常用的是再 created 构造函数中调用异步请求 ，这时候的created周期data 已经创建，

可以将服务端返回达到数据进行赋值，

优势； 能更快获取到服务端数据，减少页面loading 时间

keep-alive

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例，主要用于

组件保留状态 和 避免重新渲染

  1. 常用的两个属性include/exclude，允许组件有条件的进行缓存。
  2. 设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated 和 deactivated ）：

ref 是什么？

this.$refs.xxx 用来获取dom元素的

Vue Router系列之 route 和 router 的区别

用一句话来概括 route 是用来获取路由信息的， router是用来操作路由的

route 表示一个路由对象，当前激活的路由的状态信息，path fullpath query parmas

router 是全局路由的实例，是router构造方法的实例