Vue深入

vue深入响应式原理 ：

1.数据模型 -->vm中的data，
状态管理：
我们使用一个数据去管理一个视图中的一部分，那么这条数据叫做状态，这种管理叫做状态管理。

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

解释：
数据劫持：

Object.defineProperty中的getter/setter ， 然后在执行watcher

订阅发布：事件（自定义事件）
  订阅：事件的申明（vm.KaTeX parse error: Expected 'EOF', got '&' at position 6: on）; &̲nbsp; 发布：事…emit）;

深入响应式的原理：
1.当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新
2.vue通过watch将data中的属性全部使用Object.defineProperty编程setter和getter，当属性值发生改变时，就会触发，然后watch就会触发，视图就会发生更新。
3.注意事项：数据必须在data中才能实现深入响应式的原理。

底层原理：
运用es5中的Object.defineProperty(obj,obj.attr,descriptor)的方法。
    参数：
     obj：要在其上定义属性的对象。
     obj.attr： 要定义或修改的属性的名称。
     descriptor：将被定义或修改的属性描述符。它是一个对象， 这个对象有哪些构成？
    configurable： 决定了对象的key是否可删除
    enumerable： 决定了对象是否可遍历（枚举）
    writeable: 决定了对象的key的value是否可修改；

**存储器：
get函数------getter();
set函数 ------setter();

举例：

 <div id="app">
    <h3> {{msg}} </h3>
    <h3> {{num}} </h3>
    <button @click = "setHandler">
      点击
    </button>
 </div>
 <script>
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(vm)
  结果是：id:1,name : 张骏。
 </script>

非响应式情况：
在vm模型的data外定义的属性，就是非响应式属性，属性值更新，视图不会更新

将非响应式变成响应式就是将其合并到响应式属性上。利用vue提供的方法：

Vue.set/this.$set(vm.dataattr,prop,value)

以上代码就像在js中简单的将两个对象合并：Object.assign(目标对象， 当前对象)。

将非响应式属性合并到响应式属性上
         Vue.set(vm.someObj,prop,value)        
         this.$set(vm.someObj,prop,value)

数据的双向绑定原理：

1.v-model 双向数据绑定：
    效果：数据改变，视图更新；视图改变，数据更新。
2.缺点：就是v-model默认绑定value,所以只能在表单中使用。
原理：

1. 为什么数据能直接在视图显示

v-model默认绑定了Dom对象的value属性，当它初次绑定的时，就会触发getter,其次watch
就会触发,watch会通知vue更新DOM对象。

2.为什么视图修改数据就会修改：

当视图修改时，表示着DOM对象的value值也发生了改变，其次就会触发setter,watch监听
机制就会执行，watcher通知Vue生成新的VDOM树，再通过render函数进行渲染,生成真实DOM

举例：

  <div id="app">
    <input type="text" v-model = "msg">
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      msg: 'hello vue.js'
    }
  })
 </script>

watch:

1.作用：
用来监听数据的交换，当数据模型发生改变时，watch就会触发。
2.用法：
    第一种用法：

 1. key的value值是一个函数    
           new Vue({
                 watch: {
                    key(value,oldvalue){}          
                 }
            })

第二种用法：
key的value值是一个对象：

         new Vue({
                watch: {
                  key： {
                    deep: true/false 深入监听,
                    handler(value,oldvalue){}    // 监听的处理函数              
                  }       
                }
              })
              watch中的key指的就是data选项中key

举例：
当我写好姓和名 ， 全称自动显示：

第一种写法：

<div id="app">
    <div>
      姓： <input type="text" v-model = "firstName">
    </div>
    <div>
      名： <input type="text" v-model = "lastName">
    </div>
    <div>
      全称; <input type="text" v-model = "fullName">
    </div>
 </div>
 <script>
   new Vue({
    el: '#app',
    data: {
      firstName: '',
      lastName: '',
      fullName: ''
    },
    watch: {
      firstName(val){
        this.fullName = val + this.lastName
      },
      lastName(val){
        this.fullName = this.firstName + val
      },
      fullName(val){
        console.log( val )
        this.firstName = val.slice(0,1) 
        this.lastName = val.slice(1)
      }
    }
  })
 </script>

  <div id="app">
      <div>
          姓： <input type="text" v-model = "firstName">
        </div>
        <div>
          名： <input type="text" v-model = "lastName">
        </div>
        <div>
          全称 <input type="text" v-model = "fullName">
        </div>
  </div>
  <script>
    new Vue({
    el: '#app',
    data: {
      firstName: '',
      lastName: '',
    },
    computed: {
      fullName(){
        return this.firstName + this.lastName
      }
    }
  })
  </script>

补充：
watch 与 computed的区别：
上图：

** computed特性：
1.是计算值，
2.应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值；
3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数
4.computed擅长处理的场景：一个数据受多个数据影响

** watch特性：
1.是观察的动作，
2.应用：监听props，$emit或本组件的值执行异步操作
3.无缓存性，页面重新渲染时值不变化也会执行
4.watch擅长处理的场景：一个数据影响多个数据

methods , watch 与 computed的区别：
1.从作用机制上

watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：
当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生
变化，也就是自动调用相关的函数去实现数据的变动。

.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像
watch和computed那样，“自动执行”预先定义的函数

总结：
methods里面定义的函数，是需要主动调用的，而和watch和computed相关的函数，会自动
调用,完成我们希望完成的作用

2.从性质上看

methods里面定义的是函数，你显然需要像"fuc()"这样去调用它（假设函数为fuc）

computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）,