vue之底层

vue深入响应式原理

首先从基本说起
数据模型 指的是 new Vue 中 的data选项

状态管理

       我们使用一个数据去管理视图中的一个部分， 那么这条数据就叫做状态， 这种管理模式 就叫做状态管理

深入响应式原理

       深入响应式原理是利用了数据劫持和订阅发布的模式, 当数据模型发生改变的时候， 视图就会响应的进行更新， 那么深入响应式原理是利用es5的Object.defineProperty中个getter/setter来进行数据的劫持的。

底层原理：
核心使用的是es5的一个方法,这个方法不支持ie8以及以下

Object.defineProperty(obj,obj.attr,descriptor)

参数：

• obj
  要在其上定义属性的对象。

• prop
  要定义或修改的属性的名称。

• descriptor
  将被定义或修改的属性描述符。它是一个对象， 这个对象有哪些构成？

  • configurable： 决定了对象的key是否可删除
  • enumerable： 决定了对象是否可遍历（枚举）
  • writeable: 决定了对象的key的value是否可修改

  存储器：

  • get函数 ----起了个名字getter 设置当前对象的key的初始值
  • set函数 ----起了个名字setter 修改当前对象的key的值

名称解释：

数据劫持： Object.defineProperty中的getter/setter ， 然后在执行watcher
订阅发布：事件（自定义事件）
订阅: 事件的声明 vm.$on

发布: 事件的触发 vm.$emit

2. 非响应式情况
          在vm模型的data外定义的属性， 就是非响应式属性， 非响应式属性， 属性值更新， 视图不会更新
3. 非响应式属性如何变成响应式属性
   思维： 将非响应式属性合并到响应式属性身上
   解决： 利用了Vue提供的 Vue.set/this.$set(vm.dataattr,prop,value)
4. Vue.set底层原生
   Object.assign(目标对象，对象1， 对象2，对象3)

v-mode 双向数据绑定

1. 效果
   数据改 ， 视图更
   视图改， 数据更
2. 实现
   使用v-model实现
3. 缺点
   v-model默认绑定value属性， 所以v-model只能在表单使用
4. 原理
   1. 为什么数据能直接在视图显示
      • v-model默认绑定了DOM对象的value属性， 当它初次绑定的时候，
        就会触发getter,watcher就会触发， watcher通知Vue生成新的VDOM树，再通过render函数进行渲染,生成真实DOM
   2. 为什么视图修改数据就会修改
      • 当视图修改是， 意味着DOM的value属性值改变，就会触发setter,watcher监听机制就会执行
      • watcher通知Vue生成新的VDOM树，再通过render函数进行渲染,生成真实DOM

watch

1. 作用：
   用来监听数据的变换， 当数据模型 （data选项 M）发生改变时， watch就会触发

2. 使用

   两种用法：

   1. key的value值是一个函数

     new Vue({
        
       watch: {
        
         key(value,oldvalue){
        }          
       }