logo头像

求知若渴,虚心若愚

Vue面试题(一)

今天给大家整理一些前端开发中常见的Vue面试题。

1. vue双向数据绑定原理

具体参考vue第一天课程代码vue原理,核心就是Object.defineProperty()

  • vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
  • vue是通过Object.defineProperty()来实现数据劫持的,get和set方法
    • 实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
    • 实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
    • 实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。

2. vue页面缓存

  • keep-alive

    • 如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数:
      1
      2
      3
      4
         <component :is="currentView">
      <!-- 非活动组件将被缓存! -->
      </component>
      </keep-alive>
  • 结合router缓存部分页面

参考文献 https://blog.csdn.net/qq_38614249/article/details/79468609

3. Vuex状态管理

  • 状态管理模式
  • 大项目使用,小项目不推荐
  • store 数据仓库
    • 提供了state(数据)
    • 操作state的方法(mutations),只能通过mutations中提供的方法来操作vuex中的数据
  • 每一个mutations中的方法,第一个参数都是:状态(state)
  • 将 store 与 vue实例关联到一起,那么,在vue中就可以使用store提供的数据和方法了
  • 调用 vuex 中提供的方法举例:
    • this.$store.commit(‘add’, { num: 2 })操作数据:添加数据
    • 获取派生状态值,计算数学
  • getters —> vuex的“计算属性”
    • 用于从vuex的state中派生出一些状态
    • getters方法的第一个参数也是state
  • vuex中如果需要异步的修改state中的数据,应该使用actions来封装这个异步操作
  • vuex大型项目臃肿问题:
    • Vuex 允许我们将 store 分割成模块(module)。
    • 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

4.ES6语法用到什么比较多

  • let const
    • let和const区别
    • const指向对象,对象属性是可变的
  • 箭头函数
    • 函数的写法更加简洁
    • 箭头函数内部没有自己的this对象,而是全部继承外面的,所以内部的this就是外层代码块的this。
  • 函数默认参数
  • classs,extends,super
    • 类声明一个类(对象)
    • extends:继承一个类的属性和方法
    • 父类:super关键字,用来指定父类的实例对象
  • 数组和对象的解构
  • 对象简化语法
  • 模板字符串:ES6反引号()
  • 展开运算符:举例 const { num,num2,num3 } = number
  • import导入模块、export导出模块
  • Promise同步的方式去写异步代码
  • 生成器和迭代器

5. 闭包和递归的区别,底层机制是什么

  • 闭包就是能够读取其他函数内部变量的函数
  • 由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。
  • 在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁
  • 作用:一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
  • 注意点:
    • 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
    • 闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
  • 闭包可以造成互相引用,产生内存泄露,但是是2个或多个对象,一个对象无法形成互相引用,
  • 递归是一个函数,自己调用自己

6. 前端可以做的SEO操作

6.1 SEO原理

  • 搜索引擎优化(Search Engine Optimization),简称SEO
  • 搜索引擎工作原理
  • 搜索引擎蜘蛛工作原理

6.2 从前端角度出发有哪些注意事项有利于SEO?

  • 设置好meta标签中的title,description,description
  • 静态网页或者设置网页伪静态
  • 网页网址固定不变,不要加太多的动态参数
  • 提高网页访问速度
    • 减少http请求数量
    • 资源压缩CSS,JS,图片压缩
    • 合理设置 HTTP缓存
    • 懒加载
  • 多添加权重高的网站的友情链接
  • 添加网站外链
  • 网站内部添加合理的链接——也就是内链
  • 在网站上合理设置Robot.txt文件
  • 生成针对搜索引擎友好的网站地图sitemap
支付宝打赏 微信打赏

赞赏是对我们的肯定!