vue 生命周期，vuex，路由，导航守卫，methods,computed和watch区别，v-if和v-show区别，v-for和v-if，总结。

一.生命周期

1.什么是生命周期函数

生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发 我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发

1.1 生命周期函数有哪些

创建阶段

• beforeCreate 实例创建之前 这个时候什么都没有 data methods 都不能用 也没有 this

• created 创建之后 也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了

• beforeMount 组件挂载之前

• mounted 组件挂载之后 这个时候能拿到 dom 节点使用

运行阶段 只要修改 data 就会触发

• beforeUpdate 数据变了 视图还没变

• updated 数据变了 视图也变了

销毁阶段

• beforeDestory 组件销毁之前 是最后一个能使用 data 和 methods 的钩子函数

• destoryed 组件销毁之后

除了这八个 还有 三个 如果用 keep-alive 缓存了组件 就会有 actived deactived 这两个钩子函数 activated 组件激活 deactivated 组件停用 errorCaptured 子组件出错的时候会触发这个钩子函数

1.2 项目开发中 在生命周期里都做过什么功能

我在写效果的过程中 会在 created 或者 mounted 中发送 http 请求

created 和 mounted 的区别 就是 created 比 mounted 执行的时间更早所以会更多的在 created 中请求 mounted 的特点是可以操作 dom 节点

还会用 created 钩子函数 获取 本地存储的数据

1.3 ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?

自己试一试 把顺序写一下

页面—beforeCreate

页面—created

页面—beforeMount

组件—beforeCreate

组件—created

组件—beforeMount

组件—mounted

页面—mounted

2.vuex 的理解

vuex 是 vue 的状态管理工具 管理项目中的公共数据 能够在所有的组件中使用 一共有五大核心 state 存放公共数据的地方 通过 this.$store.state.xxx调用 mutations 修改 state 的地方 只有这里能修改 通过this.$store.commit 调用 getters 相当于是之前的计算属性 通过 this.$store.getters 调用 actions 执行异步操作的地方 通过 this.$store.dispatch 调用 modules 模块化

vuex 缺点就是刷新数据会丢失 我们可以保存本地存储 或者 安装 vuex 持久化插件 vuex-persist 去实现自动本地存储

2.1vuex 的执行机制

我在项⽬当中如果要改变 state 的状态,我们⼀般是在组件⾥⾯调⽤ this.$store.dispatch ⽅式来触发 actions ⾥⾯的⽅法,在 actions ⾥⾯的⽅法通过 commit 来调⽤ mutations ⾥⾯定义的⽅法来改变 state,同时这也是 vuex 的执⾏机制

2.2 怎么开启严格模式

strict: true, 跟 state 同级的地方设置这个属性 开启完严格模式后 如果不是通过 mutation 修改的 state 就会报错 strict 严格模式只适合开启在开发环境下

2.3 modules

把仓库里的数据分模块管理

每个模块里又有四个核心 state mutations getters actions

然后引入仓库 并且在 modules 下注册模块 在定义的 modules 里开启一个命名 namespaced:true

export default {
  computed: {
    arr() {
      return this.$store.state.a.arr;
      //使用 模块a里的state数据arr
    },
  },
  methods: {
    add() {
      this.$store.commit("a/add");
      //调用a下面的add方法
    },
  },
};

三.路由的模式 以及原理 区别

⾯试官您好,接下来我给您介绍⼀下 vue 的路由模式,vue 的路由模式⼀共有两种,分别是哈希和 history.他们的区别是 hash 模式不会包含在 http 请求当中,并且 hash 不会重新加载⻚⾯,⽽使⽤ history 模式的话,如果前端的 url 和后端发起请求的 url 不⼀致的话,会报 404 错误,所以使⽤ history 模块的话我们需要和后端进⾏配合. history 的原理就是利⽤ ht

四.导航守卫

路由的导航守卫 又叫做路由的钩子函数（生命周期函数） 就是在跳转页面的 时候把 路由拦下来 做一些操作 再放行 一共有三种

第一种是全局守卫 beforeEach 路由进入之前 afterEach 路由进入之后

第二种 组件内守卫 beforeRouteEnter 路由进入之前 beforeRouteUpdate 路由更新之前 beforeRouteLeave 路由离开之前

第三种 独享守卫 beforeEnter 路由进入之前

有三个参数 to from next next 这个参数 在路由 3.x 版本的时候 是必须的 但是到了路由 4.x 版本的时候 next 参数变成可选的了

一般来说 vue2 搭配 3.x 的路由 vue3 搭配 4.x 的路由

比如说 购物车页面只有登陆的才能访问 我们可以用组件级守卫守卫购物车页面 如果已经登陆存的有 token 的话 就继续访问这个页面 如果没有登陆的话就会跳转到登陆页面

  beforeRouteEnter(to, from, next) {
    if (localStorage.getItem("token")) {
      next();
    } else {
      next("/login");
    }

next 参数 除了括号里可以是空和路径之外 还可以是一个回调函数（回调函数就是一个被作为参数传递的函数） 比如说 token 被存进 vuex 里就能这么写：

​

  beforeRouteEnter(to, from, next) {
    // if (localStorage.getItem("token")) {
    //   next();
    // } else {
    //   next("/login");
    // }
    next((vm) => {
      // vm就是 这个组件实例 就是this
      if (vm.$store.state.token) {
        next();
      } else {
        next("/login");
      }
    });
  },

五.methods computed watch

5.1 methods 就是方法 我们写的点击事件等各种事件都放在 methods 里

5.2 计算属性 computed 计算属性 有缓存功能就是当跟他有关的值发生变化的时候才会重新计算 还有一个特点就是必须要有 return 值 return 就是把计算的结果 return 出去

5.3 watch watch 可以监听 数据和路由的变化

watch 监听路由的变化 监听路由的话就是监听 $router

  watch: {
    $route: {
      handler(newval, oldval) {
        console.log(newval, oldval);
      },
    },
  },

watch 监听 数据的变化 watch 有三个参数 deep immediate handler 当我们不需要 deep 和 immediate 的时候 就可以简写为一个函数 这个函数就是 handler

 watch: {
    num: {
      deep: true, //深度监听
      immediate: true, //进入页面立刻监听
      handler(newval) {
        console.log(newval);
      },
      //执行函数 参数是newval 和 oldval
    },
​
    // num() {},
    // 之前写的只有一个函数的情况 是handler的简写 不需要 deep 和 immediate的时候可以简写
  },

六.v-if与v-show的区别?

⾯试官您好 , 接下来我给您介绍⼀下 v-if 和 v-show 的区别 ? ⾸先 v-if 和 v-show 都是控制元素的显示与隐藏 , 不过 v-if 控制元素的显 示和隐藏的时候会删除对⽤的dom 元素 , 当每⼀个显示的时候 , 都会重新创建 dom 和渲染 . ⽽ v-show 则是通过 css 的 display:none 和display:block 来控制元素的显示与隐藏 . v-if ⽐较耗费性能 , 所以我们涉及到频繁的显示隐藏操作我们建议使⽤ v-show, 如果不 是频繁操作的话, 我们可以 v-if。

在项⽬中我会经常使⽤ v-if 和 v-show, ⽐如我们在搜索功能的时候 , 他有⼀个历史记录 , 这个时候我们根据是否有搜索的结果来判 断历史记录的显示与隐藏, 这块我就可以使⽤ v-if , 当然⽤ v-show 也可以 . 以上就是我对 v-if 和 v-show 的理解 .

七.v-for与v-if的优先级那个⾼?如果同时使⽤v-for和v-if怎么解决?

v-for 的优先级⾼ . 因为 v-for 的时候我们才开始渲染 dom 元素 , 这个 v-if 还⽆法进⾏判断。

v-for 和 v-if 不能同时使⽤ , 我们可以通过标签 , ⽐如 div 或者 template 标签来进⾏包裹 , 把 v-if 写到包裹的标签上⾯ ( 写到 v-for 外⾯ )。