vue2系列1-mvvm,生命周期，响应式原理，数组数据响应式，nextTick

vue2系列1-mvvm,生命周期，响应式原理，nextTick

个人学习和总结，如有错误欢迎指正

---

---

一、mvvm和mvc模式

1、mvvm模型

vue是参考了mvvm模型。在vue中，v是view视图展示在浏览器中，m是model数据在data对象中，vm是vue的实例对象，用来链接view和model。
vue实例vm，是一个桥梁把数据和视图链接起来，绑定数据展示在页面里，监听页面的Dom属性的变化，同时修改data的值，实现双向数据绑定。

2、mvc模式

mvc模式中，m是model数据，可以去查询数据库。v是view视图，是浏览器展示的html/js/css。c是controller控制器，数据和视图不直接联系，通过控制器来连接。
控制器就像是一个中介。比例用户点击按钮需要一个电影列表，那么控制器就通知model去查询数据库，数据库查询成功后把返回的结果给到控制器，控制器在通知view去展示电影列表。

二、vue2的生命周期

beforeCreate() {
   console.log('app beforeCreate,vue初始化，data还未代理,methods方法还不能用')
 },
 created() {
   console.log('app created，data代理完成，methods可以用了')
 },
 beforeMount() {
   console.log(`app beforeMount，有template,用template模版，没有template用包含el的div作为模版。
   如果没有el,生命周期会停止，等到vm.$mount(el)之后会继续。只有el根节点渲染，其它DOM都是虚拟Dom，还未编译。`)
 },
 mounted() {
   console.log('app mounted,虚拟Dom变成真是DOM,模版编译完成，页面挂载完成')
 },
 beforeUpdate() {
   console.log('app beforeUpdate,数据改变的时候，会虚拟dom元素对比，此时数据变了，dom元素还未改变')
 },
 updated() {
   console.log('app updated，数据改变了，dom元素也更新了')
 },
 beforeDestroy() {
   console.log('app beforeDestroy')
 },
 destroyed() {
   console.log('app destroyed')
 },

父子组件生命周期加载顺序：

三、响应式原理

响应式原理可以简单理解为分2步。
第一步数据劫持。将data对象利用Object.defineProperty重新加工，设置getter和setter，得到一个新的对象。将新对象重新赋值给data和vue实例_data对象。当数据改变setter执行的时候，vue会进行视图更新。

第二步数据代理。如果没有第二步数据代理，在用到数据时要写成this._data.xxx，为了方便使用，vue对_data里的每一个key，利用Object.defineProperty里的get和set函数，进行了数据代理，这样使用的是this.x即可。

// 第一步数据劫持
 let data = { // 传入的data
   a: 1,
   b:2
 }
 let newObj = new Observe(data)
 function Observe(obj) {
   let keys = Object.keys(data)
   keys.forEach((k)=>{
     Object.defineProperty(this, k, {
       get() {
         return obj[k]
       },
       set(value) {
         obj[k] = value
         console.log('通知vue可以更新dom')
       }
     })
   })
 }
 let vm = {} // 假设vue对象是个空对象
 vm._data = data = newObj
 // this._data.a的值就是data的值，但是呢，用的时候每次都有_data不方便，于是就有了第二步数据代理
 // 第二步，数据代理。
 let keys = vm._data.keys()
 keys.forEach((k)=>{
   Object.defineProperty(vm, k, {
     get() {
       return vm._data[k]
       // 触发了第一步里的getter
     },
     set(val) {
       vm._data.k = val
       // 触发了第一步里的setter,dom更新了
     }
   })
 })
 // 这样2步之后，this.a的值取的就是this._data.a也是data.a
 // 设置this.a的值，就修改了this._data.a的值，也会修改data.a的值，然后通知更新Dom。

四、数组数据响应式

如果理解了vue的响应式原理，就理解了数组索引值改变的时候，为什么视图不改变了。
Object.defineProperty是对象key的定义，数据的key是索引0,1,2,3…，Object.defineProperty无法对索引进行get和set函数设置。

在vue中，有7种改变数组的方法，可以更新视图。那是因为vue对这7种方法进行了重新编写。当你调用这7种方法的时候，调用的不在是Array原型上的方法，而是vue原型上的方法。

那为什么子组件也能调用这7种方法呢，是因为vue内部有一条原型链。
vue实例的原型对象简称vm，指向Vue函数的property
vue组件的原型对象简称vc，指向VueComponent函数的property。VueComponent函数的property的原型对象，指向了Vue函数的property

这条线也是vue中全局事件总线，能在每个组件都能访问的原因

7个改变数组的方法分别是：
push()
pop()
shift()
unshift()
sort()
reverse()
splice()

五、nextTick

nextTick是数据改变了，要基于更新后Dom进行操作，要在nextTick执行

this.$nextTick(()=>{
  //获取最新的dom
})