vue2中$set的原理_它对object属性做了啥?-阿里云开发者社区

背景

动态修改对象的属性时，vue2视图template不会跟新渲染的数据，来一探究竟

动态添加属性，不使用$set

测试案例：

config属性被我动态添加name:yma16

结论：

如果template动态添加则说明对象的属性添加删除具有响应式

<template>
  <div class="container">
    <h1>{{ msg }}</h1>
    <span>
      config渲染:
    </span>
    <span>
      {{ config }}
    </span>
    <hr />
    <div style="width: 600px;margin: 0 auto">
      <span>
        添加config属性
      </span>
      <el-form label-width="80px" :model="form" ref="formRef">
        <el-form-item
          label="key"
          :rules="{ required: true, message: 'key不能为空!', trigger: 'blur' }"
          prop="key"
        >
          <el-input v-model="form.key" placeholder="请输入key"></el-input>
        </el-form-item>
        <el-form-item label="value">
          <el-input v-model="form.value" placeholder="请输入value"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">
            添加保存
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Dashboard',
  data () {
    return {
      msg: '$set用法',
      config: {
        key: 'value'
      },
      form: {
        key: '',
        value: ''
      }
    }
  },
  methods: {
    submit () {
      this.$refs['formRef'].validate().then(valid => {
        console.log('valid', valid)
        if (valid) {
          this.config[this.form.key] = this.form.value
          this.$message.success('添加属性成功！')
          console.log('this.config', this.config)
        } else {
          this.$message.warning('请检查配置！')
        }
      })
    }
  }
}
</script>

效果

如下图所示。

结论：

vue2动态添加对象属性不具有响应式

动态添加属性，使用$set

改动点：

submit使用$set添加替换属性

<template>
  <div class="container">
    <h1>{{ msg }}</h1>
    <span>
      config渲染:
    </span>
    <span>
      {{ config }}
    </span>
    <hr />
    <div style="width: 600px;margin: 0 auto">
      <span>
        添加config属性
      </span>
      <el-form label-width="80px" :model="form" ref="formRef">
        <el-form-item
          label="key"
          :rules="{ required: true, message: 'key不能为空!', trigger: 'blur' }"
          prop="key"
        >
          <el-input v-model="form.key" placeholder="请输入key"></el-input>
        </el-form-item>
        <el-form-item label="value">
          <el-input v-model="form.value" placeholder="请输入value"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">
            添加保存
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Dashboard',
  data () {
    return {
      msg: '$set用法',
      config: {
        key: 'value'
      },
      form: {
        key: '',
        value: ''
      }
    }
  },
  methods: {
    submit () {
      this.$refs['formRef'].validate().then(valid => {
        console.log('valid', valid)
        if (valid) {
          this.$set(this.config, this.form.key, this.form.value)
          this.$message.success('添加属性成功！')
          console.log('this.config', this.config)
        } else {
          this.$message.warning('请检查配置！')
        }
      })
    }
  }
}
</script>

效果

结论：

vue2动态添加对象属性使用$set可以让对象具有响应式渲染

$set做了啥？

对象defineProperty

给对象添加属性

var myObject = {};
Object.defineProperty( myObject, "a", {
value: 2,
writable: false, // 不可写！
configurable: true,
enumerable: true
} );
myObject.a = 3;
myObject.a; // 2

对象的Getter和Setter

object获取和配置属性（用get达实现监听）

定义新属性b设置为a的2倍，达到监听变量a变化的效果

当a变量地址改变时属性b也会改变

var myObject = {
// 给 a 定义一个 getter
get a() {
return 2;
}
};
Object.defineProperty(
myObject, 
"b", 
{
get: function(){ return this.a * 2 },
enumerable: true
}
);
myObject.a; // 2
myObject.b; // 4

$set的源码

vue的原型链挂了set

set里面定义属性且可枚举

使用了枚举enumerable属性和注册configurable属性

/**
 * Define a reactive property on an Object.
 */
export function defineReactive(
  obj: object,
  key: string,
  val?: any,
  customSetter?: Function | null,
  shallow?: boolean,
  mock?: boolean
) {
  const dep = new Dep()
  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }
  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set
  if (
    (!getter || setter) &&
    (val === NO_INIITIAL_VALUE || arguments.length === 2)
  ) {
    val = obj[key]
  }
  let childOb = !shallow && observe(val, false, mock)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        if (__DEV__) {
          dep.depend({
            target: obj,
            type: TrackOpTypes.GET,
            key
          })
        } else {
          dep.depend()
        }
        if (childOb) {
          childOb.dep.depend()
          if (isArray(value)) {
            dependArray(value)
          }
        }
      }
      return isRef(value) && !shallow ? value.value : value
    },
    set: function reactiveSetter(newVal) {
      const value = getter ? getter.call(obj) : val
      if (!hasChanged(value, newVal)) {
        return
      }
      if (__DEV__ && customSetter) {
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else if (getter) {
        // #7981: for accessor properties without setter
        return
      } else if (!shallow && isRef(value) && !isRef(newVal)) {
        value.value = newVal
        return
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal, false, mock)
      if (__DEV__) {
        dep.notify({
          type: TriggerOpTypes.SET,
          target: obj,
          key,
          newValue: newVal,
          oldValue: value
        })
      } else {
        dep.notify()
      }
    }
  })
  return dep
}

重点

当一个数据为响应式时，vue会给该数据添加一个__ob__属性，因此可以通过判断target对象是否存在__ob__属性来判断target是否是响应式数据

dep.notify({
          type: TriggerOpTypes.SET,
          target: obj,
          key,
          newValue: newVal,
          oldValue: value
        })
      } else {
        dep.notify()
      }

当target对象是响应式数据时，我们将target的属性key也设置为响应式并手动触发通知其属性值的更新

defineReactive(ob.value, key, val)
ob.dep.notify()

notify 触发update更新

承接$set的notify

notify(info?: DebuggerEventExtraInfo) {
    // stabilize the subscriber list first
    const subs = this.subs.filter(s => s) as DepTarget[]
    if (__DEV__ && !config.async) {
      // subs aren't sorted in scheduler if not running async
      // we need to sort them now to make sure they fire in correct
      // order
      subs.sort((a, b) => a.id - b.id)
    }
    for (let i = 0, l = subs.length; i < l; i++) {
      const sub = subs[i]
      if (__DEV__ && info) {
        sub.onTrigger &&
          sub.onTrigger({
            effect: subs[i],
            ...info
          })
      }
      sub.update()
    }
  }

update 继承 DebuggerOptions

/**
 * @internal
 */
export interface DepTarget extends DebuggerOptions {
  id: number
  addDep(dep: Dep): void
  update(): void
}

onTrack和onTrigger

watch update

_update更新渲染节点

function _update(oldVnode, vnode) {
  const isCreate = oldVnode === emptyNode
  const isDestroy = vnode === emptyNode
  const oldDirs = normalizeDirectives(
    oldVnode.data.directives,
    oldVnode.context
  )
  const newDirs = normalizeDirectives(vnode.data.directives, vnode.context)
  const dirsWithInsert: any[] = []
  const dirsWithPostpatch: any[] = []
  let key, oldDir, dir
  for (key in newDirs) {
    oldDir = oldDirs[key]
    dir = newDirs[key]
    if (!oldDir) {
      // new directive, bind
      callHook(dir, 'bind', vnode, oldVnode)
      if (dir.def && dir.def.inserted) {
        dirsWithInsert.push(dir)
      }
    } else {
      // existing directive, update
      dir.oldValue = oldDir.value
      dir.oldArg = oldDir.arg
      // update 更新 vnode
      callHook(dir, 'update', vnode, oldVnode)
      if (dir.def && dir.def.componentUpdated) {
        dirsWithPostpatch.push(dir)
      }
    }
  }
  if (dirsWithInsert.length) {
    const callInsert = () => {
      for (let i = 0; i < dirsWithInsert.length; i++) {
        callHook(dirsWithInsert[i], 'inserted', vnode, oldVnode)
      }
    }
    if (isCreate) {
      mergeVNodeHook(vnode, 'insert', callInsert)
    } else {
      callInsert()
    }
  }
  if (dirsWithPostpatch.length) {
    mergeVNodeHook(vnode, 'postpatch', () => {
      for (let i = 0; i < dirsWithPostpatch.length; i++) {
        callHook(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode)
      }
    })
  }
  if (!isCreate) {
    for (key in oldDirs) {
      if (!newDirs[key]) {
        // no longer present, unbind
        callHook(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestroy)
      }
    }
  }
}

update的调用地方太多

找了一个监听的update

/**
 * @internal since we are not exposing this in Vue 2, it's used only for
 * internal testing.
 */
export function effect(fn: () => any, scheduler?: (cb: any) => void) {
  const watcher = new Watcher(currentInstance, fn, noop, {
    sync: true
  })
  if (scheduler) {
    watcher.update = () => {
      scheduler(() => watcher.run())
    }
  }
}

结束

感谢阅读，如有不足或者错误欢迎指正！

vue2中$set的原理_它对object属性做了啥?

背景