vue.js进阶之路——深入响应式原理

vue响应式原理

vue框架属于vm框架一种，关注于v视图层和m数据模型层，数据层的变化会引起关联组件的视图层变化，故前端开发专注于数据data的开发。

Dom元素渲染更新机制

vue更新dom元素是异步执行的，数据data发生变化就会开启一个watcher监听，在更新dom缓冲期间若判断为同一个watcher的，只会放入异步更新dom队列中一次，然后异步队列会按顺序执行触发更新dom操作。vue内部异步队列会依次尝试Promise.then、MutationObserver 和 setImmediate，最后都不支持则会用setTimeout(fn, 0) 代替。

检测不到data中对象的添加和删除响应

vue在实例化时，会对data里的数据利用Objec.defineProperty的getter/setter将其转化为响应式数据，即在对其数据赋值时会触发render更新dom。对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的
vm.b = 2
// `vm.b` 是非响应式的

但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如，对于：
Vue.set(vm.someObject, ‘b’, 2)

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

案例如下

<template>
  <div class="obj-reponse">
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-input v-model="ruleForm.region"></el-input>
      </el-form-item>
      <el-form-item label="活动形式" prop="newProp">
        {{ruleForm.newProp}}
      </el-form-item>
      <el-form-item label="活动方式" prop="newProp">
        {{ruleForm.obj?ruleForm.obj.type:''}}
      </el-form-item>
      <el-form-item label="活动方式" prop="newProp">
        {{ruleForm.obj.pro}}
      </el-form-item>
    </el-form>
    <div class="update-test">
      <el-button type="primary" @click="update()">更新一级对象</el-button>
      <el-button type="primary" @click="update1()">更新二级对象</el-button>
    </div>
  </div>
</template>

data() {
    return {
      ruleForm: {
        name: 'default name',
        region: 'default region',
        obj: {pro: 'default obj pro'}
      }
    };
  },
  methods: {
    update() {
      // 以下方式监听不到ruleForm新增属性newProp的变化，或删除属性
      this.ruleForm.newProp = 'new prop'
      delete this.ruleForm.name
      Object.assign(this.ruleForm, {newProp: 'new prop'})
      // 以下方式可以监听到ruleForm新增属性newProp的变化
      // 方式一、改变根节点ruleForm，指向引用地址变了
      // 这种方式常用cloneDeep()
      this.ruleForm = {
        name: 'new name'
      }
      this.ruleForm.newProp = 'new prop'
      // 方式二、assign两种用法，一种加入可监听属性region并引发变化才可以
      // 另一种改变对象地址
      Object.assign(this.ruleForm, {
        region: 'new region', newProp: 'new prop'})
      this.ruleForm = Object.assign({}, this.ruleForm, {
        region: 'new region', newProp: 'new prop'})
      // 方式三、 $set
      this.$set(this.ruleForm, 'newProp', 'new prop')
    },
    update1() {
      // init定义data时 type没有定义
      this.ruleForm.obj.type = 'new type' // 非响应
      this.ruleForm.obj = {type: 'new type'} // 响应
      this.ruleForm = cloneDeep({ name: 'new name',
        region: 'new region',
        obj: {type: 'new type'}}) // 响应
      this.$set(this.ruleForm.obj, 'type', 'new type') // 响应
    }
  }

检测不到data中数组的变化响应

<template>
  <div class="array-response">
    <ul id="example-1">
      <li v-for="(item,index) in items" :key="index">
        {{ item.message }}
      </li>
    </ul>
    <div class="update-test">
      <el-button type="primary" @click="update()">更新数字组</el-button>
    </div>
  </div>
</template>

data() {
    return {
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ]
    }
  },
  methods: {
    update() {
      // 以下方法不会监听到数据的变化
      this.items[0] = {message: 'new Foo'} // 不是响应性的
      this.items.length = 1 // 不是响应性的
      // 以下方法可以，方式一、监听到数组对象中的变化，但其实并不是数组元素变化
      this.items[0].message = 'new Foo' // 但仅限于初始化定义过的原对象{ message: 'Foo' }
      // this.items[0] = {message: 'Foo'}; this.items[0].message = 'new Foo' // 这种方式不会监听数组的变化
      // 方式二、 Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
      // push() pop() shift() unshift() splice() sort() reverse()
      // 但 例如 filter()、concat() 和 slice() 。
      // 它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
      this.items.splice(0, 1, {message: 'new Foo'})
      // 方式三、重新赋值改变指向地址 ，或者cloneDeep
      this.items = [
        { message: 'new Foo' },
        { message: 'new Bar' }
      ]
      // 方式三 Vue.set(vm.items, indexOfItem, newValue)
      this.$set(this.items, 1, {message: ' new Bar'})
    }
  }

检测不到计算属性computed响应

view层需要监听到computed的变化，必须定义它依赖于data中的数据，即对象的属性、或者数组的某个变化等。当data的变化检测不到时，依赖于它的计算属性也不会有变化。

检测不到props的响应

后续更新。。。