vue 钩子函数的使用

1、什么是自定义指令，有哪些钩子函数及自定义指令的使用场景

①自定义指令是什么？以及自定义指令的使用场景

在Vue中，有很多内置指令，但是这些指令只能满足我们最基础的使用，当我们在实际项目中遇到了必须要对DOM进行操作的逻辑时，我们就用到了自定义指令

②自定义指令的钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

2、父组件获取异步动态数据传递给子组件，报错如何解决？

在父组件给子组件传值的时候，给子组件加一个判断，如果数据没有请求到就不渲染当前组件

<div v-if="list">

</div>

data() {

return{

list : [ ]

}

}

3、vue-router参数传递方法详述及区别

vue-router传参两种方式：params和query

方法一：

query 方式传参和接收参数

传参：

this.$router.push({

path:'/openAccount',

query:{id:id}

});

接收参数：

this.$route.query.id

传参是this.$router,接收参数是this.$route

两者区别：

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

$route为当前router跳转对象，里面可以获取name、path、query、params等

方法二：

params方式传参和接收参数

传参：

this.$router.push({

name:'/openAccount',

params:{

id: id

}

})

接收参数: this.$route.params.id

query和oarams的区别：

query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示

4、vue-router有哪几种导航钩子

全局导航钩子：beforeEach、afterEach

组件内导航：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

独享导航守卫：beforeEnter