[JavaScript知识库]vue面试准备笔记

• 核心原理

  • MVVM

    model view viewmodel

    ? model模型，指后端传过来的数据

    ? view视图，指看到的页面

    ? view model视图模型，这个模式是连接桥梁

    ? 将后端的数据转换为可见的页面，实现方式：数据绑定

    ? 将看到的页面转换成后端数据，实现方式：DOM事件监听

    两个方向都实现，是双向绑定

  • 双向绑定

    • 原理：

      通过object.defineProperty来劫持各个属性的setter，getter，才数据发布消息给订阅者，触发相应的监听回调

  • 生命周期函数

    • 1、beforeCreate

    • 2、created

    • 3、beforeMount

    • 4、mounted

    • 5、beforeUpdate

    • 6、updated

    • （activated） 在被keep-alive包含时会出现的生命周期钩子

      • 当再次计入缓存的路由和组件时不会触发以上生命周期钩子

    • （deactivated）在被keep-alive包含时会出现的生命周期钩子

      • 组件被停用，（离开路由）时调用，如果你缓存了组件，要在组件销毁的时候做一些事情，可以在这里，在这里不会调用一下钩子函数

    • 7、beforeDestroy

    • 8、destroyed

    • （errorCaptured）

  • 组件渲染加载的过程模板编译的过程

  • data为什么必须是一个函数

  • nextTick

  • 组件缓存

    • 使用vue内置组件

  • 插槽

• 指令相关

  • 常用的指令分别有什么含义

  • v-for中为什么要加key?

    • 在v-for更新以渲染的元素列表时，它默认用就地复用策略
    • 为了高效的更新虚拟DOM

  • v-if和v-show的区别

    • 编译的区别

      • v-if：局部编译/卸载的过程
      • v-show：控制css

    • 方法不同

    • v-if

      • 动态向DOM树添加huo删除DOM元素

    • v-show

      • 通过设置css中的display设置为none

  • v-for中的key为什么不建议使用index?

• 组件相关

  • 组件传值

  • 请说出组件传值的六种实现方式

    • 父组件向子组件传值
      • 在父组件引用子组件上绑定一个自定义属性，并把数据绑定到自定义属性
        • 在子组件添加参数props接收
    • 子组件向父组件传值
      • 通过vue实例方法$emit并且携带参数
        • 父组件使用v-on监听，然后方法处理

    • 非父组件之间传值

    • bus总线定义bus插件在util文件夹下定义bus.js

  • 用到bus总线的地方，兄弟组件传值(父子组件也可以使用bus总线，但他使用自this.KaTeX parse error: Undefined control sequence: \this at position 5: emit\?t?h?i?s?.on,更方便，相当于bus总线的变种)在main.js中引入bus，方便在全局使用:

  • 路由传参

    • 第一种方法 页面刷新数据不会丢失

      • 使用$router.push携带数据跳转

      • methods：{
          insurance(id) {
               //直接调用$router.push 实现携带参数的跳转
                this.$router.push({
                  path: `/particulars/${id}`,
                })
        }
        

      • 路由配置：

      • {
             path: '/particulars/:id',
             name: 'particulars',
             component: particulars
           }
        

      • 子组件接收：

      • this.$route.params.id
        

    • 第二种方法 页面刷新数据会丢失

      • 通过路由属性中的name来确定匹配的路由，通过params来传递参数。

      • methods：{
          insurance(id) {
               this.$router.push({
                  name: 'particulars',
                  params: {
                    id: id
                  }
                })
          }
        

      • 对应路由配置: 注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了。

    • {
          path: '/particulars',
          name: 'particulars',
          component: particulars
        }
      

      • 子组件中: 这样来获取参数

    • this.$route.params.id
      

    • 第三种方法
      使用path来匹配路由，然后通过query来传递参数
      这种情况下 query传递的参数会显示在url后面?id=？

      • methods：{
          insurance(id) {
                this.$router.push({
                  path: '/particulars',
                  query: {
                    id: id
                  }
                })
          }
        

      • 对应路由配置：

      • {
             path: '/particulars',
             name: 'particulars',
             component: particulars
           }
        

      • 对应子组件: 这样来获取参数

      • this.$route.query.id
        

  • vuex全局使用参数

  • 封装组件

    • 首先，使用Vue.extend()创建一个组件
    • 然后，使用Vue.component()方法注册组件
    • 接着，如果子组件需要数据，可以在props中接受定义
    • 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

  • 在组件中监听路由参数的变化

    watch:{
        '$route'(to,from){
            //监听
        }
    }
    

• 路由相关

  • 路由的实现方式
    • 1、利用URL中的hash("#")
    • 2、利用History interface 在HTML5中新增的方法
  • 路由携带参数如何实现跳转
    • router.push
    • 声明式导航

  • 动态路由

  • 路由懒加载的原理
  • 路由的钩子函数
    • 全局钩子函数beforeEach函数有三种参数
      • to:router
      • from
      • next:function
    • 单独路由独享组件
      • beforeEnter
    • 组件内钩子
      • beforeRouterEnter
      • beforeRouterUpdate
      • beforeRouterLeave