vue的一些内置属性

1.computed的案例

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

或者简单的计算一些单位

2.vue中filters用法

filters: {
    status(val) {
      switch (val) {
        case 1:
          return '待审核'
        case 2:
          return '已受理'
        case 3:
          return '已拒绝'
      }
    }

3.vue父子组件的渲染顺序

加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
父beforeUpdate->父updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

4.vue的路由钩子以及使用方法和场景

1、全局的路由钩子函数
1.1、beforeEach（全局前置钩子），意思是在每次每一个路由改变的时候都要执行一遍
它有三个参数：
to： route：即将要进入的目标 路由对象
from：route：当前导航正要离开的路由
next：function：一定要调用该方法来resolve这个钩子。执行效果依赖next方法
应用场景：
1、进行一些页面跳转前的处理，例如跳转到的页面需要进行登录才可以访问时，就会做登录的跳转
2、进入页面登录判断、管理员权限判断、浏览器判断
1.2、afterEach（全局后置钩子）
beforeEach是在页面加载之前的，而afterEach是在页面加载之后的，所以这些钩子是不会接受next函数，也不会改变导航本身

2、单个路由内的钩子函数
2.1、beforeEnter
可以直接在路由配置上直接定义beforeEnter，这些守卫与全局前置守卫的方法参数是一样的

3、组件内的路由钩子函数
beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
应用场景
1、清除组件中的定时器
2、当页面有未关闭的窗口，或未保存的内容时，阻止页面跳转
3、保存相关内容到Vuex和Session中

5.插槽的用法。

6.vue自定义指令修改颜色

main.js里面使用 。 自定义颜色
Vue.directive('color',{
  inserted(el, binding){
    el.style.color = binding.value
  },
    unpdata(el, binding) {
      el.style.color = binding.value
    }
})

7.vue中mixin的用法

就是相当于 搞一个 模板
然后这个模板 可以通用
可以把常见的 分页的参数分页方法 塞里面
参考地址：https://blog.csdn.net/qq_38128179/article/details/107817436

vue中爷孙组件传值 provide和inject

provide传值，inject接收值
代码如下
爷爷组件

<script>
import Child from './Child.vue'
import { computed } from 'vue'

export default {
  components: { Child },
  data() {
    return {
      message: 'hello'
    }
  },
  provide() {
    return {
      message: computed(() => this.message)
    }
  }
}
</script>

<template>
  <input v-model="message">
  <Child />
</template>

爸爸组件

<script>
import GrandChild from './GrandChild.vue'

export default {
  components: {
    GrandChild
  }
}
</script>

<template>
  <GrandChild />
</template>

孙子组件

<script>
export default {
  inject: ['message']
}
</script>

<template>
  <p>
    Message to grand child: {{ message }}
  </p>
</template>