day01

一.生命周期 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. s t o r e . s t a t e . x x x 调 用 m u t a t i o n s 修 改 s t a t e 的 地 方 只 有 这 里 能 修 改 通 过 t h i s . store.state.xxx调用 mutations 修改 state 的地方 只有这里能修改 通过this. store.state.xxx调用mutations修改state的地方只有这里能修改通过this.store.commit 调用
getters 相当于是之前的计算属性 通过 this. s t o r e . g e t t e r s 调 用 a c t i o n s 执 行 异 步 *** 作 的 地 方 通 过 t h i s . store.getters 调用 actions 执行异步 *** 作的地方 通过 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 的话 就继续访问这个页面 如果没有登陆的话就会跳转到登陆页面
next 参数 除了括号里可以是空和路径之外 还可以是一个回调函数（回调函数就是一个被作为参数传递的函数）
4. 利用 vuex 进行组件通信 把公共的数据存在 vuex 里就可以实现组件之间都能使用这个数据了

5. 其实 v-model 也能实现组件通信 因为 v-model 就是 :value 和 @input 事件的合写 如果在一个子组件上使用 v-model 也能实现父子组件之间的通信

6. a t t r + attr+ attr+listener
   如果父组件 A 下面有子组件 B 子组件 B 下面又有子组件 C 如果 a 组件的变量和方法想要传给组件 C 的时候 就用到这个方法 适用于多级组件传值
   在 B 组件中给 C 组件绑定 v-bind=“ a t t r s " v − o n = " attrs" v-on=" attrs"v−on="listeners” 然后在 C 组件中就可以直接使用 a 传来的属性和方法了
   （简单来说： a t t r s 与 attrs与 attrs与listeners 是两个对象， a t t r s 里 存 放 的 是 父 组 件 中 绑 定 的 非 P r o p s 属 性 ， attrs 里存放的是父组件中绑定的非 Props 属性， attrs里存放的是父组件中绑定的非Props属性，listeners 里存放的是父组件中绑定的非原生事件。）

7. provide 和 inject
   父组件通过通过 provide 提供变量 子组件中通过 inject 注入变量，不论嵌套了几层子组件 都能通过 inject 来调用 provide 的数据

这种写法传的数据是不响应的

8. p a r e n t 和 parent和 parent和children
   在子组件内可以直接通过 p a r e n t 对 父 组 件 进 行 *** 作 ， 在 父 组 件 内 可 以 直 接 通 过 parent对父组件进行 *** 作，在父组件内可以直接通过 parent对父组件进行 *** 作，在父组件内可以直接通过children 对子组件进行 *** 作
   在父组件调用子组件时候要加下标也就是$children 是一个数组 因为可以有很多个子组件

9. 也能用本地存储 来 完成组件通信

五.methods computed watch

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

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

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的时候可以简写
  },