生命周期 vuex 导航守卫 methods computed watch区别理解

一.生命周期

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 去实现自动本地存储

vuex 的执行机制

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

四.导航守卫

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

第一种是全局守卫 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的时候可以简写
  },