前端面试题-VUE-持续更新

文章目录

  • Webpack面试题
    • webpack打包原理、基本功能、构建过程
      • 打包原理
      • 基本功能
      • 构建过程
    • 常见loader
    • 常见plugin
    • 什么是bundle,chunk,module?
  • VUE面试题
    • MVC、MVP、MVVM的理解
    • VUE生命周期函数
    • VUE路由
        • vue-router
        • vue-router的导航钩子
        • $router 和 $route区别
        • vue-router 传参
        • vue-router的两种模式(hash history)
        • vue-router实现路由懒加载
    • VUE 组件传值
    • vue中computed和watch、method区别
    • VUE双向数据绑定的原理
    • VUEX
    • VUE插槽

Webpack面试题

webpack打包原理、基本功能、构建过程

打包原理

将所有的依赖打包成一个bundle.js,通过代码分割成单元片段按需加载

基本功能

  • 代码转换:将ts转js,scss转css,
  • 文件优化:压缩js、css、html,代码,合并图片
  • 代码分割:提取多个页面的公共代码,提取首屏不需要执行的部分代码,让其异步加载
  • 模块合并:采用模块化的项目中,有很多模块很文件,需要构建功能吧模块分类合并成为一个文件
  • 自动刷新:坚挺本地源代码的变化,自动构建、刷新浏览器
  • 代码校验:代码提交到仓库前,检测代码是否符合规范,以及单元检测是否通过
  • 自动发布:更新完成代码后,自动构建出线上发布代码传输给发布系统

构建过程

  • 从entry里面配置的module开始递归解析entry依赖的所有module
  • 没找到一个module,就会根据配置的loader去找对应的规则
  • 对module进行转换,解析出当前module依赖的module
  • 这鞋模块会以entry为单位分组,一个entry和其所有依赖的module被分到一个组Chunk
  • 最后webpack会把所有的Chunk转换成文件输出

⚠️webpack会在恰当的时候执行plugin里的逻辑

常见loader

  • file-loader: 把文件输出到文件夹中
  • url-loader: 和file-loader类似,能在文件小的情况下以base64的方式把文件注入到代码中去
  • source-map-loader:加载额外的source map 文件,方便断掉调试
  • image- loader:加载并压缩图片文件
  • css-loader:加载css,支持模块化、压缩、文件导入等
  • style-loader:把css代码注入到js中,通过DOM操作去加载css
  • eslint-loader:通过eslint检查js代码
  • babel-loader:将ES5转为ES6

常见plugin

  • define-plugin:定义环境变量
  • commons-chunk-plugin:提取公共代码
  • uglifyjs-webpack-plugin:通过uglifyES压缩ES6代码
  • html-webpack-plugin 压缩html
  • clean-webpack-plugin 打包清理元目录文件,webpack打包器清理dist目录

什么是bundle,chunk,module?

  • bundle webpack打包出来的文件,
  • chunk webpack在进行模块的分析时,代码分割出来的代码块
  • module 开发中单个的模块

VUE面试题

MVC、MVP、MVVM的理解

MVC:model(模型)、view(视图)、controller(控制器);处理逻辑:view触发事件,controller响应并处理逻辑,调用model,model处理完成后发送给view;

MVP:model、view、present(发布层)理想模型,present为核心,从model获取数据,填充到view;

MVVM:model、view、VM(viewModel);view与VM保持同步,view绑定到VM的属性上,如果VM的数据变化,通过数据绑定的方式,view会自动更新视图,VM也会暴露在Model中,VM也就是new的Vue实例;

VUE生命周期函数

1)创建阶段

  • beforCreate:实例创建前,

  • created:实例创建好,data和methods创建好,可做数据请求;

2)挂载阶段

  • beforMount:DOM已经存在,
  • mounted:模版中的HTML渲染在页面中,可做Ajax请求,mounted只会执行一次;

3)更新

  • beforeUpdate:发生在数据更新之前,
  • undated:更新后,大多数情况应该避免此期间更改状态,因为这可能导致更新的无限循环。该钩子在服务器端渲染是不会被调用的

4)销毁

  • beforDestory:在此清楚定时器和绑定的事件;

  • destoryed:调用后所有事件监听器会被移除,所有的子实例也会被销毁

VUE路由

vue-router

vue的插件,含有router-link router-view 组件,

  • router-link:

  • active-class:router-link组件的属性,直接在路由中配置 linkActiveClass:'active',在router-link标签中写入exact

vue-router的导航钩子

全局的:

  • beforEach.boforEach((to, from, next) => {})
  • afterEach.afterEach((to, from, next)v=>{})

单个路由独享:

  • beforEnter
  • beforLeave

组件的:

  • beforRouterEnter
  • beforRouterUpdate
  • beforRouterLeave
$router 和 $route区别
  • router为vue-router的实例,相当于一个全局路由器对象,包含很多对象和属性。

  • route相当于正在跳转的路由对象,可以从中获取参数

vue-router 传参
  • params方式传参

    // 传参
    this.$router.psuh({
      name: '',
      params: {
        id: id
      }
    });
    // 获取
    this.$route.params.id
    
  • query方式传参

// 传参
this.$router.psuh({
  path: '',
  query: {
    id: id
  }
});
// 获取
this.$route.query.id

⚠️query相当于get,参数会拼接在url上,params相当于post

vue-router的两种模式(hash history)
  • hash模式

    原理是window.onhashchange事件,hash值就是#后面的值

  • history模式

    H5中History Interface 中新增的pushState()和replaceState()方法,需要后端配置支持,没有正确配置访问时就会返回404,丢弃了不好看的#,但是如果服务器没有正确的响应或资源,就会出现404,所以history不怕前进后端,就怕刷新

vue-router实现路由懒加载

为了好的用户体验,首屏组件加载更快,解决白屏问题,将页面划分为需要的时候再加载,减少首页加载压力。

常用的懒加载方法:

  • ES提出的import 方法(最常用)

    const 路由组件名 = () => import(需要加载的模块地址)

    const Holle = () => import('@...')

  • VUE异步组件实现

    component: resolve => (require(['需要加载的路由地址']), resolve)

    routes: [
    	{
    		path: '/',
    		name: 'Holle',
    		component: resolve => (require(["@/component/HelloWord"], resolve))
    	}
    ]
    

VUE 组件传值

  • 父组件传值给子组件

    使用props

    • props为数组,直接传递[data, flag]
    • props为对象,直接对象类型或者给一个默认值
  • 子组件传值给父组件

    • 子组件使用this.$emit('自定义事件名', 参数)

    • 父组件,此时方法不能加()。传值为子组件传的值

  • 兄弟组件传值

    • 中央事件总线,eventBus
    const bus = new Vue();
    bus.$emit(自定义事件名, 传递的数据);
    // 接收数据的地方
    bus.$on(自定义事件名, function (val) {})
    
    • 使用VueX
  • 父组件访问子组件中的方法

    组件上添加ref属性,给组件设置一个ID,然后通过this.$ref.id名.方法/值

  • 使用依赖注入

    父组件通过provide(函数)注入,所有的子组件通过inject(数组)引用,

    // 父组件
    provide: function () {
      return { 
        getName: this.getName
      }
    }
    // 子组件
    inject: ['getName']
    
  • p a r e n t , t h i s . parent,this. parent,this.parent 可以直接访问到组件上的data数据和方法

  • sessionStorage传值

vue中computed和watch、method区别

  • methods: 定义function的区域
  • computed: 一定程度和methods差不多,不过计算属性基于属性的,属性的变化跟着变化,不变化就不会调用computed;具有getset两个方法
  • watch: 侦听属性。监听某个值的变化,
    • 回调handler(newVal, oldVal),
    • deep: true ; 深度监听
    • Immediate: true;立即执行,场景:组件创建的时候立即获取一次列表数据,同时监听框,每当发生变化的时候重新获取一次筛选后的数据列表

VUE双向数据绑定的原理

Vue 采用数据劫持 + 发布订阅模式。通过Object.defineProperty()方法为组件中每个data添加getset方法

原理:通过Object.defineProperty()劫持各个属性中的getter、setter,在数据变化时,发布消息给订阅者,触发相应的监听回调来渲染视图

  • 需要Observer(观察者)对数据对象进行递归遍历,给每个属性都加上getter、setter
  • 模板解析器complie解析模板指令,将模板中每个变量替换为数据,然后初始化渲染页面视图,并给每个指令对应的几点更新函数,添加数据的监听者,一旦数据变化,收到通知,改变视图
  • watcher订阅者,在observer和complie之间做中介,

VUEX

集中组件状态管理

  • state,基本数据
  • getters,从state中派生的数据
  • mutation,跟新store唯一途径,
  • action,提交mutation以改变store
  • module,将store模块化

VUE插槽

你可能感兴趣的:(VUE,vue.js,面试,javascript,webpack)