Vue： Vue相关的面试题汇总

huaTJ0210 commented 1 year ago

汇总与vue相关的面试题

huaTJ0210 commented 1 year ago

1、vue模板中style标签中的scoped是什么作用？

1、保证style中的样式仅仅在此组件中有效，不会污染全局作用域 2、具体实现：vue-loader会在组件的元素自动添加一个唯一性属性： data-v-xx43e，在css中就使用属性选择器，由此实现了样式的模块化 3、需要需改其他组件库样式时需要使用样式击穿；【不同情况下样式击穿的语法不同】

huaTJ0210 commented 1 year ago

2、 v-if 与 v-show的区别

1、描述v-if是真正的元素移除和显示、v-show仅仅利用css进行显示控制； 2、引申问题：

如何进行css的显示控制
css的显示与隐藏元素方式的区别（涉及渲染原理、事件）
如何进行v-if的优化：可以使用先设置为false，将优先级高的渲染出来，在nextTick中在设置显示

huaTJ0210 commented 1 year ago

3、vue实例的生命周期？

1、图示地址：生命周期图示 2、表述生命周期需要注意的问题：尽可能详细的描述图示流程及各个钩子函数日常开发可以做哪些事情

huaTJ0210 commented 1 year ago

4、Vue 与 React对比

1、相同点：

使用了虚拟DOM，在复杂的DOM结构操作时能提高性能；
提供了组件化的视图组件
核心库只专注于视图层，其他路由、状态管理均由其他库实现
原生渲染方面提供了RN、weex之类的框架可供选择

2、不同点

响应式渲染实现机制
HTML：JSX与template的区别
CSS：实现模块化的区别
构建工具的配置方面区别
上手的难易程度
React Hooks vs 组合API

vue与其他框架的比较

huaTJ0210 commented 1 year ago

5、Vuex状态库

Vuex的简单原理实现

let Vue

class Store {
  constructor(options) {
    //将store上state内部的属性全部变成响应式
    this._vm = new Vue({
      data: function() {
        return {
          $$state: options.state
        }
      }
    })

    // 获取mutation
    this._mutations = options.mutations
    // 获取actions
    this._actions = options.actions

    this.commit = this.commit.bind(this)
    this.dispatch = this.dispatch.bind(this)
  }

  get state() {
    // vue内部提供的_data
    return this._vm._data.$$state
  }

  // 实现提交mutation的方法
  commit(type, payload) {
    const entry = this._mutations[type]
    if (!entry) {
      console.log('unkonwn mutation type')
      return
    }
    entry(this.state, payload)
  }

  // 实现dispatch方法
  dispatch(type, payload) {
    const entry = this._actions[type]
    if (!entry) {
      return
    }
    entry(this, payload)
  }
}

// Vue.use的时候：install.apply(this,[....])
function install(_vue) {
  Vue = _vue
  Vue.mixin({
    beforeCreate() {
      if (this.$option.store) {
        Vue.prototype.$store = this.$option.store
      }
    }
  })
}

export default { Store, install }

huaTJ0210 commented 1 year ago

6、VueRouter的原理分析

以router.push('xxx')为主线，描述路由导航的过程

1、基本过程

router.push(path) 会触发底层history库（VueRouter底部依赖库）的transitionTo方法
在transitionTo方法中： 1、根据path获取到要更新的路由信息route（主要是通过path去路由配置表中去匹配）； 2：触发history的callback函数cb(route)； 3、调用修改导航栏地址的方法；
cb（该函数在browser和hash中被注册）被调用接收最新的route，然后更新响应式的_route(绑定在全局vue实例上app._vue);进而引发组件的重新渲染

2、根Vue实例上存在一个响应式的_vue属性，何时被挂载的？

在VueRouter的install方法中会触发Vue.mixin的beforeCreate方法；

此方法中会在Vue根实例上挂载一个响应式属性_vue；然后调用Router的init方法，将根实例传入到Router中(这样history.cb方法内部就能更新_route)；

_route变化就会通知watcher（属于根实例）进而进行组件的整体渲染；

在整体渲染中router-view组件根据匹配到的组件调用render函数进行渲染；

huaTJ0210 / fe-interview-questions-collect