Vue2.x中常见的面试题（2）

请详细说下你对vue生命周期的理解？||vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

什么是vue生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

第一次页面加载会触发哪几个钩子？

会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

DOM 渲染在 哪个周期中就已经完成？

DOM 渲染在 mounted 中就已经完成了。

vue生命周期有哪些？每个阶段做了什么？

beforeCreate 创建之前：什么都没有，全部都是undefined
created 创建完成：属性和方法初始化完成，但是el还是undefined
如果你有el或者执行了$ mount ("#app")
beforeMount 挂载之前：找到了el，但是{{}}、指令未解析
mounted 挂载完成：页面渲染完成*****
DOM节点操作 开启你的轮播图。。。 开启计时器 jq/原生操作
ajax 组件传值的时候
//当data发生了改变
beforeUpdate 更新之前：data是更新完成的数据
updated 更新完成
//$destroy或者你的组件被卸载了
beforeDestroy 销毁之前*****
取消没有完成ajax 停止轮播图 清掉计时器 清除之前jq或者原生绑定的一些事件
善后工作
destroyed 销毁完成

vue-router是什么？它有哪些组件？

Vue Router 是 Vue.js 官方的路由管理器。
组件：router-link router-view

vue-router有哪几种导航钩子？

1.全局前置守卫 全局后置守卫
router.beforeEach((to, from, next) => {
// …
})
router.afterEach((to, from) => {
// …
})
2.路由独享守卫
const router = new VueRouter({
routes: [
{
path: ‘/foo’,
component: Foo,
beforeEnter: (to, from, next) => {
// …
}
}
]
})
3.组件内的守卫
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
}
}

怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

可以通过query ,param两种方式
区别: query通过url传参，刷新页面还在 params刷新页面不在了
可以通过 $route.params.userid 获取传递的值
可以通过 $route.query 获取你说传递的值

Vue的路由实现：hash模式 和 history模式？

hash模式：
1.采用的是window.nhashchange事件实现。
2.可以实现前进 后退 刷新。
3.比如这个URL：http://www.abc.com/#/hello, hash 的值为#/hello。
它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，
对后端完全没有影响，因此改变hash不会重新加载页面
history模式：
1.采用的是利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。
2.可以前进、后退，但是刷新有可能会出现404的报错
3.前端的url必须和实际向后端发起请求的url 一致，如http://www.abc.com/book/id 。
如果后端缺少对/book/id 的路由处理，将返回404错误。
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，
如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，
则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

$ route和$ router的区别？

route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
而router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

组件之间如何传值？

    父传子：自定义属性，子组件通过props接收
        //父组件 
            <v-child :msg="item"></v-child>
        //子组件 
            {
                props:['msg']
            }

    子传父：自定义事件
        //父组件
            <v-child @getChild="parentMethod"></v-child>
            {
                methods:{
                    parentMethod(e){
                        console.log(e);//e就是事件触发的时候的参数
                        //....
                    }
                }
            }
        //子组件 
            <button @click="childMethod">点击就触发父组件事件</button>
            {
                methods:{
                    childMethod(){
                        this.$emit("getChild","参数")
                    }
                }
            }
    非父子
        1.EventBus 统一事件管理
            //1.main.js 
            Vue.prototype.Event=new Vue()
            this.Event.$emit("事件名称",'参数')
            this.Event.$on("事件名称",(e)=>{

            })
        2.本地存储
        3.vuex