#深入响应式原理：

1. 当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新

   2. Vue通过watcher将data中的属性全部使用Object.definePropery编程getter和setter,当属性值发生
      改变的时候， 就会触发， 然后wather就会触发， 告诉视图（V）进行重新渲染

   3. **** 数据必须放在data选项中才能进行深入响应式
      底层原理：
      核心使用的是es5的一个方法,这个方法不支持ie8以及以下
      Object.defineProperty(obj,obj.attr,descriptor)
      参数：
      obj
      要在其上定义属性的对象。
      prop
      要定义或修改的属性的名称。
      descriptor
      将被定义或修改的属性描述符。它是一个对象， 这个对象有哪些构成？
      configurable： 决定了对象的key是否可删除
      enumerable： 决定了对象是否可遍历（枚举）
      writeable: 决定了对象的key的value是否可修改

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

    Vue.config.silent = true
    var vm = new Vue({
        el: '#app',
        data: {
        msg: 'hello vue.js',
        list: {
            id: 1
        }
        },
        methods: {
        setHandler(){
            this.$set(this.list,'name','张骏')
        }
        },
        watch: {
        /* watch中存放的是方法， 方法名就是M(data选项) */
        msg(){
            console.log('msg改变了')
        }
        }    
    })

    console.log('====================================');
    console.log(vm);
    console.log('====================================');

##v-mode 双向数据绑定

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

两种用法：
1. key的value值是一个函数 普通玩家
javascript new Vue({ watch: { key(value,oldvalue){} } })
2. key的value值是一个对象 主播/职业玩家
```
javascript
new Vue({
watch: {
key： {
deep: true/false 深入监听,
handler(value,oldvalue){} // 监听的处理函数
}
}
})

watch中的key指的就是data选项中key

##对比 watch vs computed vs methods

  methods: 事件
  computed: 
    1. 有逻辑 2. 要像变量一样使用  ， 这个时候选computed
  watch: 
    1. 有异步操作       2. 开销较大

##axios post请求注意事项
1. 添加请求头：
全局添加
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
局部添加：
在axios函数里面添加下面这个对象
headers: {
‘Content-Type’: “application/x-www-form-urlencoded”
}

    2. 添加url解析对象
        let params = new URLSearchParams()；
        使用params对象的append方法添加数据
        语法：
        params.append('a',1)
        params.append('b',2)

    3.然后在axios函数里面吧params对象赋值给data

    结束