返回：唐霜｜书

Objext完全手册

前言【本文受版权保护】

本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】原创内容，盗版必究。原创内容，盗版必究。【未经授权禁止转载】

Objext是一个现代js对象模型，它通【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】过丰富的api扩展js原生模型，使一个对原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。象拥有更丰富的操作和数据读写能力，同时可【转载请注明来源】【本文受版权保护】以使之更符合响应式编程的需要。

【作者：唐霜】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】

之所以开发Objext，一开始是为了解决【作者：唐霜】【原创内容，转载请注明出处】在表单中创建一个可编辑和撤销编辑的对象。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。在这个场景中，当一个对象被表单打开时，它【未经授权禁止转载】【本文首发于唐霜的博客】进入可编辑状态，当提交表单时，它会被更新本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】，当放弃提交表单时，它恢复到编辑前的数据【版权所有】唐霜 www.tangshuang.net【作者：唐霜】。在这个原始需求的基础上，我增加，当一个未经授权，禁止复制转载。【转载请注明来源】属性发生变动时，可以执行某些操作，就像v本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ue可以更新视图一样，通过提供一个$wa【版权所有】唐霜 www.tangshuang.net【作者：唐霜】tch方法，这种能力被封装的近乎完美。除【转载请注明来源】本文作者：唐霜，转载请注明出处。了解决属性变动的监听，我还想到表单的校验转载请注明出处：www.tangshuang.net【未经授权禁止转载】问题，提交表单的时候需要对表单数据进行校本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net验。最后，一个包含如下功能的Objext本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。对象就诞生了：

通过keyPath获取、设置数据著作权归作者所有，禁止商业用途转载。

【转载请注明来源】

【原创不易，请尊重版权】

响应式，可以通过$watch监听某个ke【版权所有，侵权必究】原创内容，盗版必究。yPath

【关注微信公众号：wwwtangshuangnet】

【本文首发于唐霜的博客】

【作者：唐霜】

【原创内容，转载请注明出处】

数据版本控制，通过$commit和$re【未经授权禁止转载】【原创内容，转载请注明出处】set，可以随时创建快照或恢复数据

未经授权，禁止复制转载。

【原创内容，转载请注明出处】

【关注微信公众号：wwwtangshuangnet】

本文作者：唐霜，转载请注明出处。

著作权归作者所有，禁止商业用途转载。

数据校验本文版权归作者所有，未经授权不得转载。

原创内容，盗版必究。

转载请注明出处：www.tangshuang.net

本文版权归作者所有，未经授权不得转载。

转载请注明出处：www.tangshuang.net

数据锁，锁住之后，不能做任何数据修改未经授权，禁止复制转载。

未经授权，禁止复制转载。

【原创内容，转载请注明出处】

【转载请注明来源】

计算属性和依赖收集本文版权归作者所有，未经授权不得转载。

【本文首发于唐霜的博客】

【转载请注明来源】

著作权归作者所有，禁止商业用途转载。

【作者：唐霜】

上述功能，都被集中于Objext对象一体未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。，一个看上去像是普通js对象的对象，却可【未经授权禁止转载】【本文受版权保护】以隐藏上述所有功能。

本手册将会介绍上述这些功能如何使用，以及原创内容，盗版必究。原创内容，盗版必究。它们背后的实现原理，通过了解这些原理，可【原创不易，请尊重版权】【本文受版权保护】以避免一些错误的使用场景。

【原创内容，转载请注明出处】【本文首发于唐霜的博客】【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net

快速上手本文作者：唐霜，转载请注明出处。

本节让你快速使用Objext创建一个对象未经授权，禁止复制转载。【转载请注明来源】，这个对象几乎和普通的js对象的用法一模【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。一样，只不过你可以监听某个属性的变化。

【本文受版权保护】未经授权，禁止复制转载。【未经授权禁止转载】

安装和使用本文版权归作者所有，未经授权不得转载。

objext通过npm进行安装：【访问 www.tangshuang.net 获取更多精彩内容】

未经授权，禁止复制转载。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。

npm i objext

安装之后，可以通过不同的方式在项目中引入【作者：唐霜】未经授权，禁止复制转载。：

【本文受版权保护】【本文受版权保护】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net

// ES6
import Objext from 'objext'

// CommonJS
const { Objext } = require('objext')

浏览器中也可以直接引入使用：未经授权，禁止复制转载。

转载请注明出处：www.tangshuang.net原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。

<script src="node_moudules/objext/dist/objext.js"></script>
<script>
const { Objext } = window.objext
</script>

创建实例【版权所有，侵权必究】

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。

创建一个Objext实例超级简单，只需要【未经授权禁止转载】【原创内容，转载请注明出处】传入一个等同结构的js原生对象即可。

const objx = new Objext({
  name: 'susan',
  children: [
    { name: 'tomy', age: 9 },
    { name: 'lily', age: 10 },
  ],
})

这样就创建了一个Objext的实例。它的【未经授权禁止转载】【本文受版权保护】使用几乎可以和普通的js对象一样：

【本文受版权保护】【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net

const child1 = objx.children[0]
child1.age = 10

你可能会问，这有什么意思呢？单纯这样用当本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】然没意思，你可以通过$watch方法监听【原创不易，请尊重版权】【原创内容，转载请注明出处】某个属性的变化来实现同步更新：

objx.$watch('children[0].age', ({ newValue }) => {
  objx.children[1].age = newValue + 1
})

这样可以保持两个孩子的年龄同步增长。这是【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net一种响应式的方法，你可以试试。还有一种响转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net应式的方法，是“计算属性”，它的用法和j【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】s原生的计算属性一致。

const some = new Objext({
  weight: 120,
  get height() {
    return this.weight + 50
  }, 
})

这样，height就是一个计算属性，它依转载请注明出处：www.tangshuang.net【未经授权禁止转载】赖于weight，当weight发生变化【转载请注明来源】著作权归作者所有，禁止商业用途转载。的时候，height也发生变化，但是和原【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net生的计算属性相比，objext实例的计算【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。属性使用来缓存，当weight发生变化的本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】时候，缓存被更新，获取height时，直转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】接读取缓存。

这样看来，是不是有点意思了？没关系，我们本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。后面还有更好玩的东西。

【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【作者：唐霜】

基于keyPath的数据操作【版权所有】唐霜 www.tangshuang.net

【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

keyPath是指获取一个多层级数据节点转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】的属性链的字符串表达形式，例如obx.b【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netody.hands.left这个属性节点【本文受版权保护】【未经授权禁止转载】，它的keyPath就是’b未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netody.hands.left’【作者：唐霜】【本文首发于唐霜的博客】;，而在objext中，我们可以使用ke【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。yPath来获取或更新数据。

之所以提供这种方式，是因为，我们直接ob本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】x.body.hands.left会遇到【原创不易，请尊重版权】【转载请注明来源】问题，在某些情况下，这个属性节点并不存在【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net，比如obx.body根本就不存在，那么转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。这个操作就会报错，影响程序执行。而通过o【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。bjext的keyPath进行操作，则不原创内容，盗版必究。【未经授权禁止转载】会影响。

著作权归作者所有，禁止商业用途转载。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】

$get原创内容，盗版必究。

转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。未经授权，禁止复制转载。

通过keyPath获取属性节点。【原创不易，请尊重版权】

【作者：唐霜】【原创内容，转载请注明出处】【转载请注明来源】【作者：唐霜】

keyPath 要获取的属性节点的key【未经授权禁止转载】原创内容，盗版必究。Path

【未经授权禁止转载】

本文版权归作者所有，未经授权不得转载。

【关注微信公众号：wwwtangshuangnet】

【访问 www.tangshuang.net 获取更多精彩内容】

const left = objx.$get('body.hands.left')

当body这个属性节点不存在时，直接返回【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。undefined，而不会报错。

需要注意的是，$get得到的，不是一个数【本文首发于唐霜的博客】原创内容，盗版必究。据的原始值，而是objext实例的属性节本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】点，如果该节点对应的原始数据是一个对象，【本文受版权保护】本文作者：唐霜，转载请注明出处。那么这个节点本身将会是一个objext实【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net例，同时具备了一切objext的特性。这【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】涉及到objext的内部层级问题，后文会转载请注明出处：www.tangshuang.net【作者：唐霜】更深入的讲解。

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net

另外，如果你直接在objext实例上添加【原创内容，转载请注明出处】原创内容，盗版必究。一个属性，例如 objx.age = 1本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。0 这种，$get是获取不到这种属性的。【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】这是一个比较忌讳的做法，因此，一定要记住【作者：唐霜】未经授权，禁止复制转载。，永远不要直接在objext实例对象上添未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。加属性，也不要用delete操作符直接删【原创内容，转载请注明出处】未经授权，禁止复制转载。除属性，而要使用objext的实例方法$原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】set和$remove。

$set本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。【作者：唐霜】【原创不易，请尊重版权】

通过keyPath更新或添加一个属性节点【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。。

【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】

keyPath 要设置的属性节点的key【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。Path

【关注微信公众号：wwwtangshuangnet】

【转载请注明来源】

value 值著作权归作者所有，禁止商业用途转载。

【作者：唐霜】

【本文受版权保护】

本文版权归作者所有，未经授权不得转载。

objx.$set('body.hands.left', true')

当节点不存在时，这个节点会被添加。即使b【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】ody这个节点不存在，body, han著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ds, left都会被逐一添加，这样可以转载请注明出处：www.tangshuang.net原创内容，盗版必究。保证开发者真正的目的实现，而且还不会报错【作者：唐霜】【版权所有】唐霜 www.tangshuang.net。

objext的特点是响应式的，可以通过$未经授权，禁止复制转载。【版权所有，侵权必究】watch对属性的变化进行响应。当你使用原创内容，盗版必究。【未经授权禁止转载】$set进行数据更改或添加时，对应的wa【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.nettcher会被触发。注意，添加数据也会触【本文受版权保护】著作权归作者所有，禁止商业用途转载。发watcher哦。

注意：不要直接在objext实例上添加一【关注微信公众号：wwwtangshuangnet】【本文受版权保护】个新属性，而要使用$set添加。这样做有【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】两个原因：

本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】

【原创内容，转载请注明出处】【作者：唐霜】转载请注明出处：www.tangshuang.net

【转载请注明来源】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

而另外一种情况是，如果你想在单个操作中，【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。仅仅更新属性值，而不触发watcher怎【原创不易，请尊重版权】【本文受版权保护】么办呢？$set的第三个参数设置为fal【作者：唐霜】原创内容，盗版必究。se即可：

原创内容，盗版必究。【本文首发于唐霜的博客】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】

dispatch 是否要触发watche本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】r，默认为true

原创内容，盗版必究。

本文版权归作者所有，未经授权不得转载。

本文作者：唐霜，转载请注明出处。

转载请注明出处：www.tangshuang.net

著作权归作者所有，禁止商业用途转载。

objx.$set('body.hands.left', true, false)

这样就不会触发通过$watch绑定的wa原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】tcher。

【作者：唐霜】【原创内容，转载请注明出处】【原创不易，请尊重版权】【未经授权禁止转载】

$has转载请注明出处：www.tangshuang.net

著作权归作者所有，禁止商业用途转载。【转载请注明来源】【转载请注明来源】

判断是否存在一个属性节点。本文版权归作者所有，未经授权不得转载。

keyPath 要判断的属性节点keyP转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ath

【关注微信公众号：wwwtangshuangnet】

著作权归作者所有，禁止商业用途转载。

if (objx.$has('body.hands')) {
  // ...
}

需要注意的是，如果这个属性是直接通过js【本文受版权保护】【未经授权禁止转载】原生的属性赋值的方式添加上去的，那么$h【作者：唐霜】本文版权归作者所有，未经授权不得转载。as也是判断不到的，会返回fasle，这【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net和$get的道理是一样的。

$update转载请注明出处：www.tangshuang.net

未经授权，禁止复制转载。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。

批量更新/添加属性节点。原创内容，盗版必究。

转载请注明出处：www.tangshuang.net【未经授权禁止转载】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。

object 将要更新的内容通过一个对象转载请注明出处：www.tangshuang.net【作者：唐霜】的形式组织起来

【关注微信公众号：wwwtangshuangnet】

【转载请注明来源】

【关注微信公众号：wwwtangshuangnet】

原创内容，盗版必究。

objx.$update({
  name: 'susan',
  age: 34,
})

通过这种方式可以一次性写入多个属性。当一原创内容，盗版必究。本文作者：唐霜，转载请注明出处。个属性不存在时，会自动创建该属性。

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net

使用$update的好处是批量。这听上去未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net是废话，但是并不是，普通$set一个一个【作者：唐霜】本文作者：唐霜，转载请注明出处。更新属性，不仅写法上比较麻烦，而且每一次转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。$set都会触发watcher去执行，这本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】会影响后面的$set的值。但是$upda【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。te会在一次更新完之后，才会去执行所有涉著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】及到的所有watcher。这就可能出现比【版权所有】唐霜 www.tangshuang.net【本文受版权保护】较有趣的现象，当你使用一组$set和使用【原创内容，转载请注明出处】原创内容，盗版必究。$update的时候，虽然他们都是更新相【原创不易，请尊重版权】【原创内容，转载请注明出处】同的一批数据，但是有可能执行完毕之后，整【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。个objx的值不同，这是因为watche转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。r的执行顺序可能不同导致的。因此，在使用【转载请注明来源】【原创不易，请尊重版权】的时候，你需要注意。

【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。

$put【作者：唐霜】

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。

【转载请注明来源】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【作者：唐霜】

object 要使用的新数据未经授权，禁止复制转载。

未经授权，禁止复制转载。

原创内容，盗版必究。

【本文首发于唐霜的博客】

著作权归作者所有，禁止商业用途转载。

【本文受版权保护】

看上去$update和$put很像，但实【本文受版权保护】【版权所有】唐霜 www.tangshuang.net际上，完全不同，$update简单理解是【未经授权禁止转载】【原创不易，请尊重版权】多个$set同时执行，而$put则是现$【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】remove所有已经存在的数据，然后在$本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】set给的数据。

在删除阶段，objext实例上所有的属性【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】都会被删除，这也就是为什么不能通过js原【作者：唐霜】未经授权，禁止复制转载。生赋值的形式新增属性的原因之一。

const age = objx.$get('age')
objx.$put({
  name: 'susan',
})

转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

$remove转载请注明出处：www.tangshuang.net

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】

从objext实例上删除一个属性。【原创不易，请尊重版权】

keyPath 要移除的属性节点keyP【转载请注明来源】本文作者：唐霜，转载请注明出处。ath

【原创不易，请尊重版权】

本文作者：唐霜，转载请注明出处。

【未经授权禁止转载】

【作者：唐霜】

原创内容，盗版必究。

objx.$remove('body.hands')

有人可能会问，移除直接delete不就行【关注微信公众号：wwwtangshuangnet】【本文受版权保护】了嘛。听上去很简单，实际上，在objex原创内容，盗版必究。【版权所有，侵权必究】t内部存在依赖关系，如果一个属性依赖另外【关注微信公众号：wwwtangshuangnet】【转载请注明来源】一个属性，那么当被依赖的属性被移除时，应本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】该解除这种依赖关系。单纯delete做不著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。到，因此，必须使用$remove来移除所【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。有你需要移除的属性。

【本文首发于唐霜的博客】【本文受版权保护】著作权归作者所有，禁止商业用途转载。

响应式【版权所有】唐霜 www.tangshuang.net

Objext的一个特征是完全的响应式，它转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net可以塑造多种响应式方式，而且脱离了任何业【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】务场景，是一个纯粹的对象响应式的库。它不转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net考虑界面响应的问题，它可以用来解决任何需本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】要观察数据变化而跟随变化的场景，虽然需要著作权归作者所有，禁止商业用途转载。【转载请注明来源】自己编写被响应的代码。

【转载请注明来源】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。

计算属性【本文受版权保护】

【作者：唐霜】原创内容，盗版必究。【未经授权禁止转载】

计算属性被大规模应用是vue出现的时候，【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。在vue中，我们需要将普通的数据和计算属本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。性数据分开写，这不是没有道理的，因为计算【原创不易，请尊重版权】【原创内容，转载请注明出处】属性意味着不可以手动去修改它的值。在ob【转载请注明来源】原创内容，盗版必究。jext中也是一样的，如果一个属性是计算转载请注明出处：www.tangshuang.net【未经授权禁止转载】属性，就不能通过$set或者赋值的方式去【本文受版权保护】【版权所有，侵权必究】修改它的值。

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】

所以，到底应该怎么使用计算属性呢？【访问 www.tangshuang.net 获取更多精彩内容】

【本文首发于唐霜的博客】【本文首发于唐霜的博客】原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】

创建计算属性原创内容，盗版必究。

创建计算属性超级简单：本文作者：唐霜，转载请注明出处。

【原创不易，请尊重版权】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【本文受版权保护】

const objx = new Objext({
  age: 10, 
  get weight() {
    return age * 10
  }, 
})

就像js原生对象的getter一样。但是【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。需要注意的是，如果你还设置了一个sett本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】er，那setter会被直接忽略，你不可未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。以在objext中使用setter，se原创内容，盗版必究。本文作者：唐霜，转载请注明出处。tter应该被$watch替代。

使用计算属性【本文受版权保护】

使用计算属性和其他普通属性是一模一样的，著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。不同之处在于，计算属性本身会根据所依赖的【转载请注明来源】本文版权归作者所有，未经授权不得转载。属性的变化自动变化。

【本文受版权保护】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。

console.log(objx.weight) // 100
objx.age = 11
console.log(objx.weight) // 110

【转载请注明来源】著作权归作者所有，禁止商业用途转载。【转载请注明来源】本文版权归作者所有，未经授权不得转载。

计算器中的this转载请注明出处：www.tangshuang.net

【未经授权禁止转载】【本文受版权保护】【原创内容，转载请注明出处】

计算器是指创建计算属性时，给的计算函数。原创内容，盗版必究。【作者：唐霜】计算函数可以是含有this的作用域函数。【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。这个this，在正常情况下代表当前所在的【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】objext对象，例如：

【本文首发于唐霜的博客】【转载请注明来源】【原创内容，转载请注明出处】【作者：唐霜】

const objx = new Objext({
  age: 10,
  get weight() {
    return this.age * 10
  },
})

const objx2 = new Objext({
  age: 20,
})
objx.$bind(objx2)

使用$bind方法，使objx的weig【原创内容，转载请注明出处】【版权所有，侵权必究】ht计算器中的this换绑到objx2上【版权所有，侵权必究】转载请注明出处：www.tangshuang.net面，这样，当objx2.age发生变化的【本文受版权保护】【未经授权禁止转载】时候，objx.weight就会自动更新【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。。但是，需要注意的是，$bind方法会使【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】所有的计算器的this都换绑，而不是只换【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。绑一个计算器。因此，在使用$bind时，【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】也要理解它的运作规律才使用。

当一个计算属性依赖另外一个objext对本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】象的某个属性时，可以使用$depend方【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。法创建这种依赖关系：

未经授权，禁止复制转载。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【作者：唐霜】

const objx = new Objext({
  get weight() {
    return objx2.age * 10 // 依赖objx2的age属性
  },
})

这里，objx依赖objx2.age，o【关注微信公众号：wwwtangshuangnet】【作者：唐霜】bjx2也是一个objext对象，但是o著作权归作者所有，禁止商业用途转载。【本文受版权保护】bjx2的age属性发生变化的时候，并不转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】能直接触发objx的weight发生变化【作者：唐霜】著作权归作者所有，禁止商业用途转载。，为了解决这个问题，你需要使用$depe转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】nd方法：

objx.$depend(objx)

这需要你手动调用，而不能靠objext自【原创内容，转载请注明出处】【未经授权禁止转载】动实现。

【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【作者：唐霜】

$watch【版权所有】唐霜 www.tangshuang.net

未经授权，禁止复制转载。未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】

$watch方法为objext实例提供一【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】个观察者，对特定keyPath的属性进行【关注微信公众号：wwwtangshuangnet】【本文受版权保护】观察，当该属性发生变化时，执行传入的回调【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】函数。它的使用非常像angular的$w原创内容，盗版必究。【原创不易，请尊重版权】atch方法。

keyPath 要观察的属性【转载请注明来源】

【本文受版权保护】

【转载请注明来源】

转载请注明出处：www.tangshuang.net

fn 属性发生变化时要执行的函数【原创内容，转载请注明出处】

【原创内容，转载请注明出处】

本文作者：唐霜，转载请注明出处。

deep 是否要进行深度观察，当keyP【本文首发于唐霜的博客】未经授权，禁止复制转载。ath对应的是对象或数组时可以设为tru【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。e

本文版权归作者所有，未经授权不得转载。

著作权归作者所有，禁止商业用途转载。

【本文首发于唐霜的博客】

【原创不易，请尊重版权】

objx.$watch('body.hands.left', ({ newValue }) => {
  console.log(newValue)
})

【作者：唐霜】未经授权，禁止复制转载。【转载请注明来源】

e 一个包含属性变化信息的对象【版权所有】唐霜 www.tangshuang.net

【本文受版权保护】

【原创内容，转载请注明出处】

newValue 新值【未经授权禁止转载】

【本文受版权保护】

未经授权，禁止复制转载。

【本文首发于唐霜的博客】

oldValue 老值【原创不易，请尊重版权】

【作者：唐霜】

转载请注明出处：www.tangshuang.net

【关注微信公众号：wwwtangshuangnet】

【原创不易，请尊重版权】

其中e，也就是第一个参数，会包含如下信息【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】：

【未经授权禁止转载】原创内容，盗版必究。【未经授权禁止转载】【作者：唐霜】【关注微信公众号：wwwtangshuangnet】

match $watch时的keyPat未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。h

【原创内容，转载请注明出处】

原创内容，盗版必究。

【关注微信公众号：wwwtangshuangnet】

deep $watch时的deep【原创内容，转载请注明出处】

【访问 www.tangshuang.net 获取更多精彩内容】

原创内容，盗版必究。

【原创内容，转载请注明出处】

path 当前变化的真实节点的keyPa【作者：唐霜】著作权归作者所有，禁止商业用途转载。th

【未经授权禁止转载】

【本文首发于唐霜的博客】

【本文受版权保护】

未经授权，禁止复制转载。

target 当前objext对象【未经授权禁止转载】

本文作者：唐霜，转载请注明出处。

【原创内容，转载请注明出处】

未经授权，禁止复制转载。

转载请注明出处：www.tangshuang.net

本文版权归作者所有，未经授权不得转载。

newValue 新值本文作者：唐霜，转载请注明出处。

【本文首发于唐霜的博客】

原创内容，盗版必究。

【本文首发于唐霜的博客】

【访问 www.tangshuang.net 获取更多精彩内容】

oldValue 老值【版权所有】唐霜 www.tangshuang.net

转载请注明出处：www.tangshuang.net

著作权归作者所有，禁止商业用途转载。

本文作者：唐霜，转载请注明出处。

【原创不易，请尊重版权】

stopPropagation 阻止冒泡

【作者：唐霜】

未经授权，禁止复制转载。

【本文首发于唐霜的博客】

【原创内容，转载请注明出处】

转载请注明出处：www.tangshuang.net

preventDefault 阻止继续执【原创不易，请尊重版权】【本文受版权保护】行其他回调函数

原创内容，盗版必究。

转载请注明出处：www.tangshuang.net

【本文受版权保护】

stack 调用栈【作者：唐霜】

【原创内容，转载请注明出处】

本文作者：唐霜，转载请注明出处。

【转载请注明来源】

stopPropagation原创内容，盗版必究。

【作者：唐霜】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【作者：唐霜】原创内容，盗版必究。

objext的$watch的第三个参数d转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】eep让你可以对一个本身是对象的属性进行本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net深度观察。当深层次的节点发生变化的时候，原创内容，盗版必究。【原创内容，转载请注明出处】代表着被观察的节点也发生了变化。它的内部【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。实现机理和DOM的事件冒泡一样，一层一层著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。向上传递，触发对应的回调函数。但是，如果著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。你在向上冒泡的过程中，调用了stopPr【原创内容，转载请注明出处】【未经授权禁止转载】opagation方法的话，冒泡就会停止原创内容，盗版必究。原创内容，盗版必究。，向上的后续回调函数就不会执行了。例如：

原创内容，盗版必究。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】

objx.$watch('body.hands', ({ newValue }) => {
  console.log(newValue)
}, true)
objx.$watch('body.hands.left', ({ newValue, stopPropagation }) => {
  if (newValue === true) {
    stopPropagation()
  }
})

上面这段代码中，如果body.hands本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。.left被设置为true，那么第一个$原创内容，盗版必究。【本文首发于唐霜的博客】watch的回调函数不会被触发。

【原创内容，转载请注明出处】【本文受版权保护】【作者：唐霜】【本文受版权保护】

preventDefault原创内容，盗版必究。

【转载请注明来源】【作者：唐霜】著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】

【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。

objx.$watch('body.hands.left', ({ newValue, preventDefault }) => {
  if (newValue === true) {
    preventDefault()
  }
})
objx.$watch('body.hands.left', (e, newValue) => {
  console.log(newValue)
})

上面的代码中，如果body.hands.著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】left为true，那么第二个回调函数就【未经授权禁止转载】本文作者：唐霜，转载请注明出处。不会被执行了。

【未经授权禁止转载】【转载请注明来源】原创内容，盗版必究。【转载请注明来源】

特殊符号原创内容，盗版必究。

本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

特殊符号*表示对所有的变化进行观察：转载请注明出处：www.tangshuang.net

objx.$watch('*', ({ path, match }) => {
  console.log('观察' + match)
  console.log('发生变化的是' + path)
})

$unwatch本文作者：唐霜，转载请注明出处。

【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【原创内容，转载请注明出处】

$unwatch是$watch的反函数，本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。用于对某个观察者进行解绑，解绑之后回调函【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。数就不会被调用了。

【原创不易，请尊重版权】【作者：唐霜】【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】

objx.$watch('body', callback)
// ...
objx.$unwatch('body', callback)

$silent本文版权归作者所有，未经授权不得转载。

是否开启安静模式更新数据，当安静模式开启【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。后，所有对数据的修改都不会触发watch原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】er。

status 使用状态true/fals本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。e，true表示开启安静模式，false【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。表示关闭安静模式。

未经授权，禁止复制转载。

本文版权归作者所有，未经授权不得转载。

【转载请注明来源】

未经授权，禁止复制转载。

【访问 www.tangshuang.net 获取更多精彩内容】

$isSilent【访问 www.tangshuang.net 获取更多精彩内容】

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【作者：唐霜】

判断是否处于安静模式中。【作者：唐霜】

【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。

数据版本控制原创内容，盗版必究。

【原创内容，转载请注明出处】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

Objext对象的一个特点是可以随意的修未经授权，禁止复制转载。【本文受版权保护】改和恢复数据，特别是在一些编辑的时候，你转载请注明出处：www.tangshuang.net【本文受版权保护】可以提供临时保存和恢复的能力。当你放弃进本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net行编辑的时候，一个方法就可以让数据恢复到【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】编辑之初的状态。

$commit本文版权归作者所有，未经授权不得转载。

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【本文受版权保护】原创内容，盗版必究。

创建一个名为tag的快照。【访问 www.tangshuang.net 获取更多精彩内容】

tag 快照名称本文作者：唐霜，转载请注明出处。

【原创不易，请尊重版权】

【本文受版权保护】

objx.$commit('tag1')

不能存在同名快照，如果已经存在了同名快照【本文受版权保护】原创内容，盗版必究。，会被新快照覆盖。

本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】【本文首发于唐霜的博客】原创内容，盗版必究。

$reset转载请注明出处：www.tangshuang.net

【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

tag 快照的名称。如果不传的话，直接恢本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】复到最后一个创建的快照，即使已经存在同名【版权所有，侵权必究】转载请注明出处：www.tangshuang.net快照，也会被认为是最后一个。

【转载请注明来源】

【作者：唐霜】

未经授权，禁止复制转载。

objx.name = 'tomy'
objx.$commit('version1')
objx.name = 'jimy'
objx.$reset('version1')
console.log(objx.name) // => 'tomy'

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】

$revert【访问 www.tangshuang.net 获取更多精彩内容】

删除名为tag的快照。未经授权，禁止复制转载。

tag 快照的名称。如果不传，表示删除上著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net一个创建的快照，规则和reset相同。

未经授权，禁止复制转载。

【关注微信公众号：wwwtangshuangnet】

objx.name = 'tomy'
objx.$commit('version1')
objx.name = 'jimy'
objx.$commit('version2')
objx.name = 'gofei'
objx.$revert() // 删除version2
objx.$reset() // 恢复到version1
console.log(objx.name) // => 'tomy'

数据锁转载请注明出处：www.tangshuang.net

在一些情况下，我们可以锁死objext实转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net例，使它不能进行任何修改。

原创内容，盗版必究。【转载请注明来源】【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】

$lock【转载请注明来源】

锁死数据。转载请注明出处：www.tangshuang.net

objx.name = 'digou'
objx.$lock()
objx.name = 'ximeon'
console.log(objx.name) // digou

锁死后，属性不能被修改。【本文受版权保护】

未经授权，禁止复制转载。原创内容，盗版必究。未经授权，禁止复制转载。

objx.body.$lock()
objx.body.hands.left = true // 无法进行修改

$unlock本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。【作者：唐霜】原创内容，盗版必究。

解锁数据，使返回可修改状态。未经授权，禁止复制转载。

【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net

$isLocked【作者：唐霜】

【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【本文受版权保护】

判断是否被锁死。本文版权归作者所有，未经授权不得转载。

【作者：唐霜】【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】

数据校验本文版权归作者所有，未经授权不得转载。

objext支持对数据进行校验，校验的时本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】间点有两种：1.修改数据时；2.调用$v本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netalidate方法一次性全部校验。

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【原创内容，转载请注明出处】【未经授权禁止转载】

$formulate本文作者：唐霜，转载请注明出处。

设置校验规则。【本文首发于唐霜的博客】

著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

validators 可以是一个数组，也未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net可以是单个对象，对象内容为：
- path 要校验的keyPath转载请注明出处：www.tangshuang.net
- determine 一个函数，用以决定是【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。否要执行当前这个校验规则
- validate 校验器函数，返回tru转载请注明出处：www.tangshuang.net原创内容，盗版必究。e/false
- message 校验不通过时，会返回一个【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。Error，该message将作为错误信转载请注明出处：www.tangshuang.net【本文受版权保护】息
- warn 一个函数，用以接受校验失败时返本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。回的error，然后进行下一步处理
- deferred 是否异步校验，为tru原创内容，盗版必究。【未经授权禁止转载】e时表示异步校验，异步校验不会阻塞校验过转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。程，需要在warn中接受error进行后未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。续处理
- order 校验顺序值，值越大越早校验原创内容，盗版必究。

【关注微信公众号：wwwtangshuangnet】

【访问 www.tangshuang.net 获取更多精彩内容】

转载请注明出处：www.tangshuang.net

【未经授权禁止转载】

objx.$formulate({
  path: 'body.hands.left',
  validate: value => typeof value === 'boolean',
  message: '必须为true/false',
  warn: error => window.toast(error.message),
})

objx.$strict()
objx.body.hands.left = 'true' // 报错

determine, validate,原创内容，盗版必究。未经授权，禁止复制转载。 warn中都可以使用this，指向当前【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。context，当前context通过$著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netbind方法绑定，没有绑定时，表示obj未经授权，禁止复制转载。【未经授权禁止转载】ext对象自身。

$validate【未经授权禁止转载】

执行校验器。【原创不易，请尊重版权】

【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【转载请注明来源】

keyPath 要校验的keyPath，【转载请注明来源】著作权归作者所有，禁止商业用途转载。可选，不传的时候，表示一次性执行整个ob本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】jext对象的所有校验器

本文版权归作者所有，未经授权不得转载。

原创内容，盗版必究。

本文作者：唐霜，转载请注明出处。

nextData 该keyPath将要使本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。用的值，可选

【作者：唐霜】

【转载请注明来源】

【本文首发于唐霜的博客】

objx.$validate('name', 'Timy')

$strict【原创不易，请尊重版权】

切换严格模式。严格模式下，修改属性值也会未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。进行校验。默认情况下，严格模式是关闭的。【本文首发于唐霜的博客】【本文首发于唐霜的博客】在前面的代码中已经有演示，这里不赘述。

status 设为true表示开启，fa【未经授权禁止转载】原创内容，盗版必究。lse表示关闭

未经授权，禁止复制转载。

【转载请注明来源】

原创内容，盗版必究。

和$silent很像，也具有继承性。【未经授权禁止转载】

【本文首发于唐霜的博客】【未经授权禁止转载】未经授权，禁止复制转载。【作者：唐霜】

$isStrict本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。

判断是否处于严格模式下。【未经授权禁止转载】

原创内容，盗版必究。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【未经授权禁止转载】转载请注明出处：www.tangshuang.net

除了以上已经列出的接口和功能，objex本文作者：唐霜，转载请注明出处。【未经授权禁止转载】t还有一些高级用法，使用使会费些脑子，但【转载请注明来源】转载请注明出处：www.tangshuang.net是在一些特定场合下可以帮助你实现一些特殊转载请注明出处：www.tangshuang.net【转载请注明来源】的要求。

本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。

批量更新转载请注明出处：www.tangshuang.net

我们可能会一次性更新多个值，普通模式下，未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】每一次更新，都会触发watcher，一次【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netwatcher执行，可能带来不同的结果，【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。特别是有依赖性时。一般来讲，我们使用$u本文作者：唐霜，转载请注明出处。【未经授权禁止转载】pdate进行批量更新，但是，你也可以自未经授权，禁止复制转载。原创内容，盗版必究。己构造批量更新。

本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。

$start【关注微信公众号：wwwtangshuangnet】

【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

开启批量更新模式，开启后，watcher本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。不会被触发，直到调用$end。

$end转载请注明出处：www.tangshuang.net

【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【本文受版权保护】【未经授权禁止转载】

完成批量更新，关闭批量更新模式，并且触发【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。涉及到的所有watcher。

转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】【原创不易，请尊重版权】

objx.$start()
objx.name = 'tom'
objx.age = 10
objx.name ='tomi'
objx.$end()

【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】

实例依赖【本文首发于唐霜的博客】

普通对象中的this仅会指向自身，但是由著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】于objext具备响应式能力，因此，有更【作者：唐霜】【原创内容，转载请注明出处】丰富的依赖接口。例如objx1依赖obj【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】x2，那么当objx2中的某个发生变化时原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】，objx1对应的属性也应该发生变化。

【未经授权禁止转载】【作者：唐霜】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【本文首发于唐霜的博客】

$depend原创内容，盗版必究。

【本文受版权保护】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】

跨实例的属性依赖。本文作者：唐霜，转载请注明出处。

keyPath 当前实例的哪一个keyP转载请注明出处：www.tangshuang.net【未经授权禁止转载】ath

本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。

target 依赖于另外的哪一个obje【转载请注明来源】【关注微信公众号：wwwtangshuangnet】xt实例

【本文首发于唐霜的博客】

【原创不易，请尊重版权】

【本文受版权保护】

转载请注明出处：www.tangshuang.net

【本文受版权保护】

【转载请注明来源】

本文作者：唐霜，转载请注明出处。

const objx1 = new Objext({
  get weight() {
    return objex2.age
  },
})
objx1.$depend('weight', objx2)

这里需要注意的是，由于现实的限制，上面的【转载请注明来源】【未经授权禁止转载】代码中，如果没有$depend那一句，o【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】bjx1.weight将永远使用第一次初本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。始化的缓存，而不会被修改。因此，如果要使本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。之根据实际情况进行修改，那么必须调用$d著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netepend绑定响应式关系。

$undepend【作者：唐霜】

本文作者：唐霜，转载请注明出处。【本文受版权保护】【作者：唐霜】未经授权，禁止复制转载。

未经授权，禁止复制转载。【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。【本文首发于唐霜的博客】

$bind未经授权，禁止复制转载。

修改当前objext实例的context转载请注明出处：www.tangshuang.net原创内容，盗版必究。。在objext实例的计算器、校验器等函【本文受版权保护】著作权归作者所有，禁止商业用途转载。数中的this，将会使用$bind的参数原创内容，盗版必究。原创内容，盗版必究。取代。

本文作者：唐霜，转载请注明出处。【作者：唐霜】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【未经授权禁止转载】

target 必须是objext实例，用未经授权，禁止复制转载。【未经授权禁止转载】以替代this的指向

【访问 www.tangshuang.net 获取更多精彩内容】

【本文受版权保护】

【原创内容，转载请注明出处】

const objx1 = new Objext({
  age: 10,
  get weight() {
    return this.age + 10
  },
})
const objx2 = new Objext({
  age: 11,
})
objx1.$bind(objx2)

上面代码中的$bind导致objx1中的本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。计算属性中的this指代objx2。

【原创不易，请尊重版权】【作者：唐霜】本文作者：唐霜，转载请注明出处。

要使得解除绑定关系，恢复this指代当前【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】实例，$bind参数为null即可。

对比转载请注明出处：www.tangshuang.net

【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】

通过objext进行数据对比超级方便。【未经授权禁止转载】

未经授权，禁止复制转载。【转载请注明来源】本文版权归作者所有，未经授权不得转载。

$hash本文版权归作者所有，未经授权不得转载。

本文作者：唐霜，转载请注明出处。【未经授权禁止转载】未经授权，禁止复制转载。【本文受版权保护】【作者：唐霜】

objext实例的$hash属性保存了它【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。的当前hash值，两个objext对象的【转载请注明来源】本文版权归作者所有，未经授权不得转载。hash值相同，表示他们拥有相同的数据内著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。容。

objx1.$hash === objx2.$hash

静态方法著作权归作者所有，禁止商业用途转载。

Objext提供了几个静态方法，可帮助开【原创内容，转载请注明出处】【本文首发于唐霜的博客】发者快速实现一些功能。

【原创不易，请尊重版权】【本文受版权保护】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。

isEqual转载请注明出处：www.tangshuang.net

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。转载请注明出处：www.tangshuang.net

判断两个对象/值是否具有相同的内容。本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。【作者：唐霜】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。

Objext.isEqual(obj1, obj2)

isEmpty【关注微信公众号：wwwtangshuangnet】

未经授权，禁止复制转载。【作者：唐霜】【未经授权禁止转载】【原创不易，请尊重版权】

判断是否为空内容值。所谓空内容，是指“空【转载请注明来源】【关注微信公众号：wwwtangshuangnet】数组、空对象、空字符串、null、und转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。efined、NaN”这几种。

isArray著作权归作者所有，禁止商业用途转载。

【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】

判断是否为数组。【访问 www.tangshuang.net 获取更多精彩内容】

isObject未经授权，禁止复制转载。

【转载请注明来源】著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】

判断是否为纯对象。所谓纯对象，是指非实例转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net的字面量对象，比如 o = {} 这种。

本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。

inArray著作权归作者所有，禁止商业用途转载。

判断一个值是否存在于数组中。本文作者：唐霜，转载请注明出处。

本文作者：唐霜，转载请注明出处。【未经授权禁止转载】原创内容，盗版必究。

Objext.inArray(item, items)

inObject【本文首发于唐霜的博客】

判断一个key是否存在于对象中。只有可枚【转载请注明来源】【未经授权禁止转载】举的key被识别。

Object.inObject(key, obj)

isInstanceOf【作者：唐霜】

【转载请注明来源】【本文受版权保护】【未经授权禁止转载】【原创不易，请尊重版权】

判断一个对象是否是一个类的实例。【本文受版权保护】

转载请注明出处：www.tangshuang.net原创内容，盗版必究。【原创内容，转载请注明出处】

Objext.isInstanceOf(obj, ClassObj)

parse本文作者：唐霜，转载请注明出处。

通过keyPath解析获得属性值。未经授权，禁止复制转载。

本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【转载请注明来源】【原创内容，转载请注明出处】【转载请注明来源】

let value = Objext.parse(obj, 'body.hands.left')

assign【未经授权禁止转载】

通过keyPath设置值。【本文受版权保护】

【本文首发于唐霜的博客】【未经授权禁止转载】【原创内容，转载请注明出处】

Objext.assign(obj, 'some.name.len', 10)

clone【作者：唐霜】

克隆一个对象。【本文首发于唐霜的博客】

结语【本文首发于唐霜的博客】

【转载请注明来源】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。

Objext是一个具有丰富思想的扩展包，【本文受版权保护】【本文受版权保护】它主要用于对数据进行管理的场景，但是它不【未经授权禁止转载】原创内容，盗版必究。是纯粹的数据管理工具，而是对碎片数据的扩原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】展，使得一个数据拥有更丰富的接口，可进行著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】各类操作。

【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】【版权所有，侵权必究】【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【本文受版权保护】【转载请注明来源】【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【本文受版权保护】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【本文受版权保护】【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【本文受版权保护】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】【作者：唐霜】【本文首发于唐霜的博客】【转载请注明来源】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】【原创不易，请尊重版权】原创内容，盗版必究。【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net

如果你觉得本书对你有帮助，通过下方的二维码向我打赏吧，帮助我写出更多有用的内容。

2019-02-10 | 响应式

Objext完全手册

前言【本文受版权保护】

快速上手本文作者：唐霜，转载请注明出处。

安装和使用本文版权归作者所有，未经授权不得转载。

创建实例【版权所有，侵权必究】

基于keyPath的数据操作【版权所有】唐霜 www.tangshuang.net

$get原创内容，盗版必究。

$set本文作者：唐霜，转载请注明出处。

$has转载请注明出处：www.tangshuang.net

$update转载请注明出处：www.tangshuang.net

$put【作者：唐霜】

$remove转载请注明出处：www.tangshuang.net

响应式【版权所有】唐霜 www.tangshuang.net

计算属性【本文受版权保护】

$watch【版权所有】唐霜 www.tangshuang.net

$unwatch本文作者：唐霜，转载请注明出处。

$silent本文版权归作者所有，未经授权不得转载。

$isSilent【访问 www.tangshuang.net 获取更多精彩内容】

数据版本控制原创内容，盗版必究。

$commit本文版权归作者所有，未经授权不得转载。

$reset转载请注明出处：www.tangshuang.net

$revert【访问 www.tangshuang.net 获取更多精彩内容】

数据锁转载请注明出处：www.tangshuang.net

$lock【转载请注明来源】

$unlock本文作者：唐霜，转载请注明出处。

$isLocked【作者：唐霜】

数据校验本文版权归作者所有，未经授权不得转载。

$formulate本文作者：唐霜，转载请注明出处。

$validate【未经授权禁止转载】

$strict【原创不易，请尊重版权】

$isStrict本文作者：唐霜，转载请注明出处。

高级用法【版权所有】唐霜 www.tangshuang.net

批量更新转载请注明出处：www.tangshuang.net

$start【关注微信公众号：wwwtangshuangnet】

$end转载请注明出处：www.tangshuang.net

实例依赖【本文首发于唐霜的博客】

$depend原创内容，盗版必究。

$undepend【作者：唐霜】

$bind未经授权，禁止复制转载。

对比转载请注明出处：www.tangshuang.net

$hash本文版权归作者所有，未经授权不得转载。

静态方法著作权归作者所有，禁止商业用途转载。

isEqual转载请注明出处：www.tangshuang.net

isEmpty【关注微信公众号：wwwtangshuangnet】

isArray著作权归作者所有，禁止商业用途转载。

isObject未经授权，禁止复制转载。

inArray著作权归作者所有，禁止商业用途转载。

inObject【本文首发于唐霜的博客】

isInstanceOf【作者：唐霜】

parse本文作者：唐霜，转载请注明出处。

assign【未经授权禁止转载】

clone【作者：唐霜】

结语【本文首发于唐霜的博客】