Vue

一、生命周期，父子组件生命周期

一、什么是生命周期

1.组件实例从创建到销毁就是生命周期

Vue有4个阶段

2。创建，挂载，更新，销毁

3.创建有二个钩子，创建前，创建后，一般再创建前拿ajax数据

生命1 (1).png

4.挂载 2个钩子挂载后，可以再里面操作dom

生命1 (2).png

5.更新阶段可以再update里面得到最新的dom效果

生命1 (3).png

6.销毁阶段beforeDestory清楚当前组件中的定时器和监听的事情

生命1 (4).png

7,keep-alive actived-deactived

因为有了Keep-alive之后，生命周期的初始化只会执行一次所以需要actived-deactived来代替

二、父子组件生命周期执行顺序

初始化阶段 3-4-1

父组件创建前
父组件创建后
父组件挂载前
子组件创建前
子组件创建后
子组件挂载前
子组件挂载后
父组件挂载后

父组件先创建，->直到before mount 这是子组件开始创建并且挂载，子组件挂载完成后，挂载父组件

调用顺序是先父后子，挂载完成时先子后父

更新阶段 1-2-1

父组件更新前
子组件更新前
子组件更新后
父组件更新后

父组件先到beforeUpdate 然后子组件更新，更新完成之后，父组件再更新

销毁阶段 1-2-1

父组件销毁前
子组件销毁前
子组件销毁后
父组件销毁后

父组件先到beforeDestory 然后子组件销毁，子组件销毁完成后，父组件再进行销毁

二、watch和计算属性

computed:

1.是计算实现，也就是计算值，更适用于需要计算得出结果的场景

2.具有缓存性，getter执行后，是有缓存值的，只有当他依赖的属性值发生改变时，才会重新进行getter计算

3.不能进行异步函数的操作

watch:

1.当数据发生改变时，就执行回调函数，比起计算，更像一个监测者

2.可以执行异步函数

3.没有缓存值，每次变化的值，都需要重新获得

三、观察者模式

定义：

定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。

观察者模式拥有2个主体，分别是dep被观察者，跟watcher观察者

被观察者产生需求发生变化的时候，通过notify去挨个通知观察者

观察者模式.png

四、组件之间嵌套传值最顶层和最底层怎么传

最顶层通过provide传给最底层，最底层通过inject去接受值

最高级传给最底级.png

代码实现

最高级.png

五、router和route的区别

router:

router是VueRouter的实例，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性

route:

route是路由信息对象，每一个路由都会有一个route对象，是一个局部的对象,里面主要包含路由的一些基本信息，包括name、meta、path、hash、query、params、等等

总结:route更倾向于路由的信息，router就像是路由的行为如跳转等

6、v-model底层原理

v-model底层原理实际上是分别利用了v-bind用来绑定value的值，用v-on去绑定input标准事件，通过$event这个事件对象获取到最新值，然后把最新的值赋值给旧的值，从而进行数据的更新。

1.<input v-model="msg">

2.<input v-bind:value="msg" v-on:input="msg=$event.target.value">

可以简写成

<input :value="msg" @input="msg=$event.target.value">

7、你有在请求拦截器里面操作过什么

请求拦截：就是在我们访问请求的时候，利用他来做点什么

1、通常我会在这里加上token的请求头，这样当页面访问的是需要token验证的页面时，请求拦截就会自动帮我们进行token验证，通过则进入该页面

2、还可以进行token是否过期的验证

8、路由传值的方法，各自异同

1、第一种方法：params

methods：{
  handle(id) {
       //直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/home`,
          params: {
             id: id
          }

     })
}
这时可以通过 this.$route.params.id来获取id值

2、第二种方法：query

methods：{
  handle(id) {
        this.$router.push({
          path: '/home',
          query: {
            id: id
          }
     })
 }
这时可以通过 this.$route.query.id来获取id值

3、字符串拼接的方法（类似于第一种params）


methods：{
  handle(id) {
       //直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/home/${id}`,
     })
}
这时可以通过 this.$route.params.id来获取id值

面试题0725------vue篇

Vue