vue2--复习

1.路由导航守卫

又叫 路由的 生命周期函数 也叫路由的钩子函数

路由导航守卫 有没有第三个参数 next 取决于 vue-router 的版本 如果是 3.x 的路由必须写 next 如果是 4.x 的路由可以不写 一般来说 vue2 搭配 3.x 的路由 vue3 搭配 4.x 的路由

全局 守卫所有的页面 beforeEach 路由进入之前 afterEach 路由离开 组件 守卫单个页面 beforeRouteEnter 路由进入之前 beforeRouteUpdate 路由更新之前 beforeRouteLeave 路由离开之前 独享 守卫单个页面 但是放在 路由规则里的 beforeEnter 路由进入之前

有三个参数 to 代表 到哪里去 from 代表从哪个页面来 next // next 参数 里面可以是 空就代表放行 // 是路径就代表 跳转的页面 // 里面 还可以是一个函数 函数的第一个默认参数 vm 就代表了实例

2.methods computed watch

methods 就是事件方法 computed 必须要有一个返回值 返回计算的结果 有缓存功能 只有跟他相关的数据发生变化了才会重新计算

watch watch 有三个参数 deep（深度监听） immediate（进入页面立刻监听） handler（执行函数） 也可以只简写一个 handler

 watch: {
    // num(newval, oldval) {
    //   console.log(newval);
    // },
    num: {
      deep: true,
      immediate: true,
      handler(newval, oldval) {
        console.log(newval);
      },
    },
  },

watch 除了可以监听 data 和 computed 之外还能监听路由的变化

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

3.组件通信

1.父传子

在父组件使用子组件的标签上 设置一个自定义属性传递变量 在子组件里 通过 props 接收 props 接收父传子的变量 有两种形式 数组和 对象 对象形式的可以规定接收参数的 数据类型（type） 默认值（default） 以及 是否必填 和正则

2.子传父

在父组件使用子组件饿标签上 设置一个自定义事件 把父组件的一个事件传到子组件去 在子组件通过 this.$emit()方法调用传过来的自定义事件 this.$emit()方法的第一个参数 是 调用的自定义事件的名字 第二个参数是 要传递的数据 传过去后在父组件接受

3.兄弟组件传值

用 eventbus 中央事件总线 用一个空的 vue 实例 把他挂载在原型上 在任何组件都能用 在要传的组件里用$emit 传数据 用接收的组件里用$on 接收

兄弟传值还能用 vuex

4.nextTick

nextTick 是在 dom 更新结束后才会执行的延时回调 而 vue 中 dom 的更新是异步的 我们经常会在 nextTick ⽅法⾥⾯获取 dom 元素

4.keep-alive

keep-alive 是 vue 内置的⼀个组件，⽽这个组件的作⽤就是能够缓存不活动的组件，我们能够知道，⼀般情况下，组件进⾏切 换的时候，默认会进⾏销毁，如果有需求，某个组件切换后不进⾏销毁，⽽是保存之前的状态，⽐如说刚刚填好的表单数 据。那么就可以利⽤ keep-alive 来实现

跟 keep-alive 相关的两个钩子函数是 activated deactivated 一旦组件被缓存了就不再执行创建和销毁阶段的钩子函数 而是执行激活和停用这两个钩子函数

我们可以规定缓存哪个组件不缓存哪个组件 include 指定缓存谁 exclude 指定不缓存谁 利用路由的 meta 信息 指定谁缓存谁不缓存

5.vue 常⽤的修饰符有哪些?(50%)

.trim 去除⾸尾多余的空格 .stop 阻⽌事件冒泡 .once 只渲染⼀次 .self 事件只作⽤在元素本身 .number 将值转化为 number 类型 .capter 组件之间捕获 .prevent 阻⽌元素的默认⾏为 .native 事件穿透,让我们可以在⾃定义组件上触发原生的事件