1.生命周期共有几个钩子函数？分别在什么时候使用？

? ?总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后。所以也就会产生对应的8个生命周期：

创建前/后：?在beforeCreated阶段，vue实例的挂载元素$el和数据对象 data 都为undefined，还未初始化。在?created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后：?在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：?当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：?在destroy阶段，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。destroyed阶段，组件销毁

小程序?：

onload 页面加载触发

onshow 页面切入前台

onReady初次渲染完

onload 页面卸载

onpulldownrefresh 下拉刷新

onreachbottom 上翻到底

2.简述computed 、watch的区别及应用场景？

computed：有缓存性依赖于属性只要属性改变就会执行

methods:没有缓存调用就会执行

watch：没有缓存监听data中的属性改变就会执行

3.Vue中父组件向子组件传参(代码)

父组件：

 <template>
   <div class="parent">
     <h2>{{ msg }}</h2>
     <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->
 </div>
 </template>
 <script>
 import son from './Son' //引入子组件
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: '父组件',
     }
   },
   components:{son},
 }
 </script>

子组件：

 <template>
   <div class="son">
     <p>{{ sonMsg }}</p>
     <p>子组件接收到内容：{{ faMsg }}</p>
   </div>
 </template>
 <script>
 export default {
   name: "son",
   data(){
     return {
       sonMsg:'子组件',
     }
   },
   props:['faMsg'],//接收psMsg值
 }
</script>

4.自定义vue过滤器

过滤器就是一个数据经过了这个过滤器之后出来另一样东西。
vue中的过滤器分为两种：局部过滤器和全局过滤器

`全局：`

 Vue.filter('global-filter',(val,...args)=>{
    console.log(`需要过滤的数据是:${val}`)
    return val + ' 过滤器追加的数据'
  })

使用：

 <div id='app'>
    <p>{{oldValue | global-filter}}</p>
  </div>

5.vue自定义指令(语法,钩子函数,函数参数)

directives: { focus:
 { // 指令的定义 
   inserted: 
      function (el) { 
           el.focus() 
    // 页面加载完成之后自动让输入框获取到焦点的小功能
     } 
}}

第一个参数是自定义指令名（这些什么上面就写什么）

<input v-focus />

上文中inserted是钩子函数（什么时候触发）

有很多钩子函数：

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

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)

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

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

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

场景：

1 . 输入框自动聚焦

2 .下拉菜单

3. 相对时间转换

6.简述路由动态传参params和query的区别及如何具体使用？

7.列出常用修饰符以及作用

.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为
?

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>