vue响应式原理

vue响应式原理

要了解响应式原理首先应该知道什么是响应式

<template>
	<div>
        <div>
            {{user.name}}
    </div>
    	<button @click="onClick">
            更改
    </button>
    </div>
</template>

<script>
data() {
    return {
      user:{
          name:"郭玉泽"
      }
    }
  },
      methods:{
        // 在data中定义的属性 在通过事件触发更改的时候，vue就会自动更新视图
        // 所以，vue中，在data中定义的属性就是响应式的
          onClick(){
              this.user.name = "龙傲天"
          }
      }
</script>

vue的响应式原理是什么

vue数据的双向绑定是通过数据劫持结合发布订阅模式，侦测到数据变化，然后通过Object.defineProperty()对象对每个属性的getter和setter进行劫持。当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法。检测到数据变化，发布消息给到订阅者，重新渲染页面。

对于对象

• 由于js的限制，vue没有办法直接检测数组或者对象中的变化。

• 如果我们在某些地方为在data中对象直接添加一些属性，那么这些属性对于vue来说就是非响应式的，

  它的变化并不会被vue所监测到。

<template>
	<div>
        <div>
            {{user.name}}
    </div>
        <div>
            {{user.age}}
    </div>
    	<button @click="onClick">
            更改
    </button>
        <button @click="onClick2">
            添加
    </button>
    </div>
</template>

<script>
data() {
    return {
      user:{
          name:"郭玉泽"
      }
    }
  },
      methods:{
          onClick(){
              this.user.name = "龙傲天"
          },
          onClick2(){
              // 在这个点击事件中，我们为user对象新增了一个属性，但是我们可以看到，视图并不会被更新
              // 这种方法添加的属性就是非响应式的
              this.user.age = 18
              window.console.log(this.user)
              // get name: ƒ reactiveGetter()
              // set name: ƒ reactiveSetter(newVal)
              // 通过输出我们可以看到，这个添加的属性并没有set和get方法
              // 这就意味着vue的数据监测并不会监测到这个数据发生的变化
          }
      }
</script>

向data中的数据添加响应式属性

• Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value)方法向嵌套对象添加响应式属性

<template>
	<div>
        <div>
            {{user.name}}
    </div>
    	<button @click="onClick">
            更改
    </button>
        <button @click="onClick2">
            添加
    </button>
    </div>
</template>

<script>
data() {
    return {
      user:{
          name:"郭玉泽"
      }
    }
  },
      methods:{
          onClick(){
              this.user.name = "龙傲天"
          },
          onClick2(){
              this.user = {
                  name:"郭玉泽",
                  age:18,
              }
              this.$set(this.user,"sex","男")
              window.console.log(this.user)
               // get age: ƒ reactiveGetter()
               // set age: ƒ reactiveSetter(newVal)
               // get name: ƒ reactiveGetter()
               // set name: ƒ reactiveSetter(newVal)
               // get sex: ƒ reactiveGetter()
               // set sex: ƒ reactiveSetter(newVal)
              /*
              	通过输出可以看到，通过set方法添加的属性是有get和set方法的
              	所以可以通过this.$set()方法为对象添加响应式属性
              	第一种方法对对象进行替换也是可以添加响应式属性的，不过不推荐这么写
              */
          }
      }
</script>

声明响应式属性

由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明所有根级响应式属性，哪怕只是一个空值。

如果你未在 data 选项中声明 message，Vue 将警告你渲染函数正在试图访问不存在的属性。

简述vue的响应式原理

当一个Vue实例创建时，vue会遍历data选项的属性，用Object.defineProperty将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。