面试可能会问到的知识点

一、Vue

1. 组件化和模块化

• 组件化侧重于解耦
• 模块化侧重于重用，根据页面的功能划分成模块，

2. mvvm框架是什么？和jQuery的区别？

m：model ，数据
v：view ，视图
vm：ViewModel ， 视图模型
利用双向数据绑定，视图和数据只要一方变化另一方也会变化
框架提供了一套完整的解决方案，开发者要遵循框架的语法
jQuery不是框架，而是一个库，只是方便了我们的对dom的操作

3. vue-loader是什么？

解析和转换.vue文件，拿到其中的逻辑代码script、样式代码style、模板template，再分别交给对应的loader解析。其实作用就是提取

4. $nextTick是什么？

$nextTick，其内部的函数在dom渲染完成后才执行

• nextTick返回一个promise对象

# 方式1 实例调用
this.$nextTick(() => {
	console.log('nexttick1');
})
或
this.$nextTick().then(()=>{
	console.log('nexttick2');
})
-----------------------------------------------------
# 方式2 Vue调用
Vue.nextTick(()=>{
	console.log('nexttick3');
})

vue是靠数据驱动视图更新的，当更新了数据之后，视图不会立马更新
当数据发生变化时，vue创建一个队列，视图需要等到队列里的所有数据更新完成后，再统一进行更新

<div id="box">
  <div class="son">{{info}}</div>
  <button @click='change'>按钮</button>
</div>
<script>
  let vm = new Vue({
    el: '#box',
    data: {
      info: 'hello'
    },
    methods: {
      change() {
        this.info = 666
        console.log(document.querySelector('.son').innerHTML);
      }
    }
  })
</script>

# 第一次点击的结果是hello，第二次才是666
# 虽然页面上的 ‘数据’ 改变了，其实视图没有改变，所以第一次的结果是hello（innerHTML）；等到队列里的所有数据更新完毕，视图才进行更新，所以第二次的结果是666

现在我们使用nextTick，在数据更新后视图立即更新

methods: {
  change() {
    this.info = 666
    this.$nextTick(() => {
      console.log(document.querySelector('.son').innerHTML);
    })
  }
}
# 现在，第一次点击是666，第二次点击也是666

在vue中，我们一般不会操作dom对象，只有当使用了一些第三方插件库，才会不可避免的操作dom，有时会使用到nextTick

5. ajax 和 axios的区别

ajax是基于xmlhttprequest的，更新数据时无需刷新页面
axios也是对xhr的封装，只不过是promise的实现版本

• 从node创建HTTP请求
• 提供了一些常用的接口