Vue深入响应式理解、v-mode 双向数据绑定、watch、axios、fetch数据请求、mixins/global、:key

1.Vue深入响应式原理

1. vue深入响应式原理

数据模型–》 vm中 的data选项
状态管理
什么叫做状态？什么叫做状态管理？
我们使用一个数据去管理视图中的一个部分， 那么这条数据就叫做状态， 这种管理模式就叫做状态管理
总结：

1. 什么是深入响应式原理？王者级的

深入响应式原理是利用了数据劫持和订阅发布的模式, 当数据模型发生改变的时候， 视图就会响应的进行更新， 那么深入响应式原理是利用es5的Object.defineProperty中个getter/setter来进行数据的劫持的
名称解释：
数据劫持： 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)

2.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

3.watch

1. 作用：

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

2. 使用

两种用法：

1. key的value值是一个函数 普通玩家

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

2. key的value值是一个对象 主播/职业玩家

new Vue({
   
    watch: {
   
         key： {
   
        deep: true/false 深入监听