一、深入响应式原理
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.set(vm.list,'num',1000) 		
              console.log(vm) 
				 var obj = {
				    name:'呵呵'
				  }
				  
				  Object.defineProperty(obj,'name',{
				    //存储器
				    get(){
				      //要求必须有返回值
				      return '哈哈'
				    },
				    set(value){ //value就是修改后的对象的key的value
				      console.log('set')
					console.log(value);
					document.querySelector('#app').innerHTML = value
				}

二、双向数据绑定

  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
    代码:

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

三、watch
1. 作用:
用来监听数据的变换, 当数据模型 (data选项 M)发生改变时, watch就会触发
2. 使用

两种用法:

      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

代码:

```
<div id="app">
    {{ msg }}
  </div>
  <script>
  	new Vue({
    el: '#app',
    data: {
      msg: 'hello vue.js'
    },
    watch: {
      msg(){
        alert('数据改变了')
      }
    }
  })
  </script>
```
Logo

前往低代码交流专区

更多推荐