Vue

开发中常用的指令

v-model,v-if,-v-on,v-bind,v-show,v-for,v-html

响应数据的实现原理

它用到了两种技术，一种是Object.defineProperty用来监听对象属性的改变。
另一种是发布者订阅者模式。
首先它将data里面的数据传到了vue内部里面。它内部会拿到一个对象obj，obj里面就是data里面的数据。
拿到obj后它会调用Object.keys(obj).forEach( key => {let value = obj[key]})。这样就能拿到所有的key和
value的值。然后通过Object.defineProperty()监听value值的改变，Object.defineProperty()的作用是给某
一个对象定义属性或修改原有的属性。它有三个参数第一个参数是要修改的对象，第二个参数是要修改的属性，
第三个参数是一个属性描述符，它有多个属性，这里用到的是set和get属性。在get函数里面可以获取value值
返回出去，在set函数里面监听key的改变，赋值新的value再返回出去。
然后下一步对el模板指令的解析获取到哪些数据用到get属性。数据每次获取值的时候肯定会调用一次get属性
来获取value值，所以现在知道了都有谁调用过get，一旦set里面的数据发生改变。然后就通过发布者订阅者模式
通知它们。
然后定义一个Dep类和watcher类，这个Dep的作用是收集依赖存储所有对这个属性有依赖的东西。
watcher是一个观察订阅依赖，收集依赖的目的就是将watcher放到Dep的subs中。在watcher类中写一个构造器，
在构造器里面将this指向自己，然后将触发属性的getter添加监听，然后再写入一个update函数用来获取新值
更新视图。
然后在Dep类中也是写入一个构造器，构造器里写一个subs数组，用来记录谁要订阅的属性。然后再写一个
addSub函数，参数里面写watcher。一旦调用这个函数的时候就subs.push(watcher)添加进来。然后再写一个
notify函数在noftify里面找到所有的订阅者，然后拿到所有订阅者让它调用自己的updata。
然后创建一个变量new一个watcher，把变量添加到Dep.addSub里面。	最后再set函数里面调用Dep.uotify()

vue组件的生命周期

vue实例从创建到销毁的过程，也就是创建，初始化数据，编译模板，挂载DOM，更新，销毁这个过程
它内部有八个钩子函数，分别代表了创建前后，挂载前后，更新前后，销毁前后，然后函数分别是
beforeCreate   created  /   beforeMount  mounted   /  beforeUpdate  updated  /  
beforeDestroy    destroyed 

它的作用就是在控制vue实例的过程中有一个好的逻辑

第一次页面加载会触发beforeCreate，created，beforeMount，mounted

 每个周期的适应场景
 beforeCreate  可以加载一个loading事件
 created  结束loading事件， 还可以实现函数自执行
 mounted  挂载节点，获取DOM元素
 updated  可以对数据进行统一处理
 beforeDestroy  可以做一个停止事件

周期之间的作用
beforeCreate和created进行初始化事件
created和beforeMount 判断对象是否存在el选项 如果有就继续编译，如果没有就停止编译退出声明周期
beforeMount和mounted 为实例对象添加el，替换掉DOM元素
beforeUpdate和updated 当data里面的数据发生改变的话，会对相对应的组件重新渲染
beforeDestroy和destroyed  实例销毁前beforeDestroy仍然可用。destoryed一调用，实例指定的所有
东西都会被接触绑定，所有监听器都会移除，所有子实例也都会被销毁 

如何理解MVVM的原理

MVVM就是响应式的双向数据绑定。
M是Model指的是数据层，V是view指的是视图层，VM viewModel指的是数据视图。
viewModel相当于是model和view的桥梁，帮助他们两个进行通讯
viewModel做了两件事情，一件事数据绑定，另一件是DOM监听
可以把model的数据绑定到view上，当view上有一些事件操作的情况下可以通过viewmodel监听到，
然后改变相对应的model

nextTick的理解

nextTick()是在DOM从新渲染挂载完成后执行延迟回调。
当改变了数据的时候，DOM的渲染需要时间，然而我们希望去操作DOM元素，
就需要等渲染完成之后再去操作。这时就用到了nextTick（）,
将等待DOM