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="reponse-demo">
    <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響應——檢測不到數組的變化

vue中計算屬性computed的響應

vue中屬性props的響應

後續更新。。。