什么是vue的生命周期？

new Vue（新建一个实例）

初始化事件和生命周期

beforeCreate

初始化注入（data props methods）和校验

created

是否有el，没有调用$mount,将其转成template

是否有template，没有将el外部的html转为template，有了之后，将template转成render

beforeMount

创建vm.$el

mounted

当data修改时，会触发beforeUpdate和updated

beforeDestory

解除绑定，销毁子组件

destoryed

什么是mvvm？

见 note.youdao.com/s/AutY2Fed

vue-router如何使用？

具体见：note.youdao.com/s/FYFzfp17

引入步骤

注册vueRouter
定义路由规则
创建路由对象（并传入路由规则）
导出
在vue实例中注册上

hash和history有什么区别

pushState()设置新的url可以是和当前url同源的任意url；hash只可修改#后面的部分，只能设置当前url同文档的url。

pushState()设置的新url可与当前url一致，这样也会把记录添加到栈中；hash必须设置与当前url不同的url的，才会触发动作将记录添加到栈中。

pushState()通过stateObject参数可以添加任意类型的数据到记录中；hash只可添加短字符串。

pushState()可额外设置title属性供后续使用。不过，hash模式也有比history模式优势的地方。

hash模式下，仅hash符号之前的url会被包含在请求中，后端如果没有做到对路由做支持，也不会返回404错误。

如何实现路由懒加载

//方法1：
const Recommend = () => import('components/recommend/recommend')

//方法2：
const Recommend = (resolve) => {
  import('components/recommend/recommend').then((module) => {
    resolve(module)
  })
}

vue跳转新路由滚动到固定位置

使用scrollBehavior属性

export default new Router({
  routes: routerMap,
  scrollBehavior(to, from, savedPosition) { //设置回到顶部
    if (savedPosition) {
        return savedPosition
    }
    return {x: 0, y: 0}
  }   
})

动态路由要注意的一个点

可通过组件的prop来接收url里的动态参数

$route,$router的区别

$route是路由规则

$router是路由对象，存储了路由的相关配置, 可通过currentRoute获取当前路由规则

vue-router有几种钩子？

3种，全局的、组件的、单个路由独享的

全局

router.beforeEach
router.beforeResolve （在 beforeEach 和组件内beforeRouteEnter 之后，afterEach之前调用。）
router.afterEach

单个路由的

cont router = new VueRouter({
    routes: [
        {
            path: '/file',
            component: File,
            beforeEnter: (to, from ,next) => {
                // do someting
            }
        }
    ]
});

组件的

const File = {
    template: `<div>This is file</div>`,
    beforeRouteEnter(to, from, next) {
    	
    },
    beforeRouteUpdate(to, from, next) {
        // do someting
        // 在当前路由改变，但是依然渲染该组件时（即组件复用）调用
    },
    beforeRouteLeave(to, from ,next) {
    
    }
}

完整的导航解析流程：

1、导航被触发
2、在失活的组件里调用离开守卫
3、调用全局的 beforeEach 守卫
4、在重用的组件里调用 beforeRouteUpdate 守卫
5、在路由配置里调用 beforEnter
6、解析异步路由组件
7、在被激活的组件里调用 beforeRouteEnter
8、调用全局的 beforeResolve 守卫
9、导航被确认
10、调用全局的 afterEach 钩子
11、触发 DOM 更新
12、在创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

路由懒加载

见官网：router.vuejs.org/zh/guide/ad…

或者

/* 首页--------------首页 */
// 首页底部导航
const index = r => require.ensure([], () => r(require('@/pages/home/index/index')), 'group-index')
// 首页
const home = r => require.ensure([], () => r(require('@/pages/home/home/home')), 'group-index')

vue-loader有什么作用？

解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理

vue里的data为什么是返回一个函数？

组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

v-if v-for哪个先执行

v-for

所以循环时，最好先对v-if里的条件做过滤

在vue3种则是v-if先执行。具体见 www.jb51.net/article/197…

vue如何检测数组变化

vue3种是可以检测到的，

vue2需要使用vue.set，或者使用 splice，caoncat等修改数组

delete和Vue.delete删除数组的区别

见 zhuanlan.zhihu.com/p/80601923

vue-router与location.href的用法区别

vue-router使用pushState进行路由更新，静态跳转，页面不会重新加载；location.href会触发浏览器，页面重新加载一次
vue-router使用diff算法，实现按需加载，减少dom操作
vue-router是路由跳转或同一个页面跳转；location.href是不同页面间跳转；
vue-router是异步加载this.$nextTick(()=>{获取url})；location.href是同步加载

vue-router里的query，param有什么区别？

使用params传参只能用name来引入路由，即push里面只能是name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！。使用query传参使用path来引入路由。
params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。

vue-loader是干嘛的

vue文件的一个加载器。

用途：js可以写es6、style样式可以scss或less、template可以加jade等

解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理。

SPA首屏加载慢如何解决

路由懒加载
cdn加速
gzip压缩
异步加载组件
服务端渲染

vue初始化时，像{{}}这种符号会突然闪现怎么处理

添加css样式

[v-clock] {
	display: none
}

v-cloak会在vue实例结束编译时从绑定的HTML元素上移除。

EventBus注册在全局上时，路由切换时会重复触发事件，如何解决呢？

在组件内的beforeRouteLeave中移除事件监听

vuex怎么知道state是通过mutation修改还是外部直接修改的？有什么方法杜绝？

监听store._committing是否为true

开发模式的时候，我们在使用vuex的时候最好设置成严格模式，修改state的时候我们不要直接修改，而是通过commit来提交。主要是为了状态能够很好的跟踪，开发者工具更好的处理状态变化，更好的调试体验。

前端增长（vue基础）