非庖丁瞎解牛系列～ ＝。＝

在日常项目开发的时候，我们将js对象传给vue实例中的data选项，来作为其更新视图的基础，事实上是vue将会遍历它的属性，用Object.defineProperty 设置它们的 get/set，从而让 data 的属性能够响应数据变化：

 Object.defineProperty(obj, name, {
 // 获取值的时候先置入vm的_data属性对象中
 get() {
  // 赋值的时候显示的特性
 },
 set() {
  // 值变化的时候可以做点什么
 }
 })

接下来可以利用其实现一个最简单的watcher.既然要绑定数据执行回调函数，data属性和callback属性是少不了的，我们定义一个vm对象(vue中vm对象作为根实例，是全局的)：

/**
 * @param {Object} _data 用于存放data值
 * @param {Object} $data data原始数据对象，当前值
 * @param {Object} callback 回调函数
 */
var vm = { _data: {}, $data: {}, callback: {} }

在设置值的时候，如果检测到当前值与存储在_data中的对应值发生变化，则将值更新，并执行回调函数，利用Object.definedProperty方法中的get() & set() 我们很快就可以实现这个功能～

 vm.$watch = (obj, func) => {
 // 回调函数
 vm.callback[ obj ] = func
 // 设置data
 Object.defineProperty(vm.$data, obj, {
  // 获取值的时候先置入vm的_data属性对象中
  get() {
  return vm._data[ obj ]
  },
  set(val) {
  // 比较原值，不相等则赋值，执行回调
  if (val !== vm._data[ obj ]) {
   vm._data[ obj ] = val
   const cb = vm.callback[ obj ]
   cb.call(vm)
  }
  }
 })
}
vm.$watch('va', () => {console.log('已经成功被监听啦')})
vm.$data.va = 1

虽然初步实现了这个小功能，那么问题来了，obj对象如果只是一个简单的值为值类型的变量，那以上代码完全可以满足；但是如果obj是一个具有一层甚至多层树结构对象变量，我们就只能监听到最外层也就是obj本身的变化，内部属性变化无法被监听（没有设置给对应属性设置set和get),因为对象自身内部属性层数未知，理论上可以无限层（一般不会这么做），所以此处还是用递归解决吧～

咱们先将Object.defineProperty函数剥离，一是解耦，二是方便我们递归～

var defineReactive = (obj, key) => {
 Object.defineProperty(obj, key, {
 get() {
  return vm._data[key]
 },
 set(newVal) {
  if (vm._data[key] === newVal) {
  return
  }
  vm._data[key] = newVal
  const cb = vm.callback[ obj ]
  cb.call(vm)
 }
 })
}

咦，说好的递归呢，不着急，上面只是抽离了加get和set功能的函数，
现在我们加入递归～

var Observer = (obj) => {
 // 遍历，让对象中的每个属性可以加上get set
 Object.keys(obj).forEach((key) =>{
 defineReactive(obj, key)
 })
}

这里仅仅只是遍历，要达到递归，则需要在defineReactive的时候再加上判断，判断这个属性是否为object类型，如果是，则执行Observer自身～我们改写下defineReactive函数

// 判断是否为object类型，是就继续执行自身
var observe = (value) => {
 // 判断是否为object类型，是就继续执行Observer
 if (!value || typeof value !== 'object') {
 return
 }
 return new Observer(value)
}

// 将observe方法置入defineReactive中Object.defineProperty的set中，形成递归
var defineReactive = (obj, key) => {
 // 判断val是否为对象，如果对象有很多层属性，则这边的代码会不断调用自身（因为observe又执行了Observer,而Observer执行defineReactive），一直到最后一层，从最后一层开始执行下列代码，层层返回（可以理解为洋葱模型），直到最前面一层，给所有属性加上get／set
 var childObj = observe(vm._data[key])
 Object.defineProperty(obj, key, {
 get() {
  return vm._data[key]
 },
 set(newVal) {
  // 如果设置的值完全相等则什么也不做
  if (vm._data[key] === newVal) {
   return
  }
  // 不相等则赋值
  vm._data[key] = newVal
  // 执行回调
  const cb = vm.callback[ key ]
  cb.call(vm)
  // 如果set进来的值为复杂类型，再递归它，加上set/get
  childObj = observe(val)
 }
 })
}

现在我们来整理下，把我们刚开始实现的功能雏形进行进化

var vm = { _data: {}, $data: {}, callback: {}}
var defineReactive = (obj, key) => {
 // 一开始的时候是不设值的，所以，要在外面做一套observe
 // 判断val是否为对象，如果对象有很多层属性，则这边的代码会不断调用自身（因为observe又执行了Observer,而Observer执行defineReactive），一直到最后一层，从最后一层开始执行下列代码，层层返回（可以理解为洋葱模型），直到最前面一层，给所有属性加上get／set
 var childObj = observe(vm._data[key])
 Object.defineProperty(obj, key, {
 get() {
  return vm._data[key]
 },
 set(newVal) {
  if (vm._data[key] === newVal) {
  return
  }
 // 如果值有变化的话，做一些操作
 vm._data[key] = newVal
 // 执行回调
 const cb = vm.callback[ key ]
 cb.call(vm)
 // 如果set进来的值为复杂类型，再递归它，加上set/get
 childObj = observe(newVal)
 }
 })
}
var Observer = (obj) => {
 Object.keys(obj).forEach((key) =>{
 defineReactive(obj, key)
 })
}
var observe = (value) => {
 // 判断是否为object类型，是就继续执行Observer
 if (!value || typeof value !== 'object') {
 return
 }
 Observer(value)
}
vm.$watch = (name, func) => {
 // 回调函数
 vm.callback[name] = func
 // 设置data
 defineReactive(vm.$data, name)
}
// 绑定a，a若变化则执行回调方法
var va = {a:{c: 'c'}, b:{c: 'c'}}
vm._data[va] = {a:{c: 'c'}, b:{c: 'c'}}
vm.$watch('va', () => {console.log('已经成功被监听啦')})
vm.$data.va = 1

在谷歌浏览器的console中粘贴以上代码，然后回车发现，结果不出所料，va本身被监听了，可以，我们试试va的内部属性有没有被监听，改下vm.data.va=1为vm.data.va.a = 1,结果发现报错了

什么鬼？

我们又仔细检查了代码，WTF，原来我们在递归的时候，Object.defineProperty中的回调函数cb的key参数一直在发生变化，我们希望的是里面的属性变化的时候执行的是我们事先定义好的回调函数～那么我们来改下方法，将一开始定义好的回调作为参数传进去，确保每一层递归set的回调都是我们事先设置好的～

var vm = { _data: {}, $data: {}, callback: {}}
var defineReactive = (obj, key, cb) => {
 // 一开始的时候是不设值的，所以，要在外面做一套observe
 var childObj = observe(vm._data[key], cb)
 Object.defineProperty(obj, key, {
 get() {
  return vm._data[key]
 },
 set(newVal) {
  if (vm._data[key] === newVal) {
  return
  }
  // 如果值有变化的话，做一些操作
  vm._data[key] = newVal
  // 执行回调
  cb()
  // 如果set进来的值为复杂类型，再递归它，加上set/get
  childObj = observe(newVal)
 }
 })
}
var Observer = (obj, cb) => {
 Object.keys(obj).forEach((key) =>{
 defineReactive(obj, key, cb)
 })
}
var observe = (value, cb) => {
 // 判断是否为object类型，是就继续执行Observer
 if (!value || typeof value !== 'object') {
 return
 }
 Observer(value, cb)
}
vm.$watch = (name, func) => {
 // 回调函数
 vm.callback[name] = func
 // 设置data
 defineReactive(vm.$data, name, func)
}
// 绑定a，a若变化则执行回调方法
var va = {a:{c: 'c'}, b:{c: 'c'}}
vm._data.va = {a:{c: 'c'}, b:{c: 'c'}}
vm.$watch('va', () => {console.log('又成功被监听啦')})
vm.$data.va.a = 1

再执行一次以上代码，发现内部的a属性也被监听到了，而且属性值变化的时候执行了我们事先定义好的回调函数～嘻嘻嘻～

虽然实现了$watch的基本功能，但是和vue的源码还是有一定的距离，特别是一些扁平化和模块化的思想需要涉及到一些设计模式，其实我们在看源码的时候，常常是逆着作者的思维走的，功能从简单到复杂往往涉及到代码的模块化和解耦，使得代码非常地分散，读起来晦涩难懂，自己动手，从小功能代码块实现，然后结合源码，对比思路，慢慢丰富，也不失为一种学习源码的方式～

下一篇将会结合源码来浅谈下vue的watcher和observer

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Vue  # observer  # watcher  # vue如何实现observer和watcher源码解析  # Vue.js原理分析之observer模块详解  # Vue 源码分析之 Observer实现过程  # 递归  # 回调  # 遍历  # 值为  # 要在  # 的是  # 判断是否  # 绑定  # 将会  # 有很多  # 象中  # 涉及到  # 最前面  # 不设  # 都是  # 是一个  # 实现了  # 来了  # 不相等  # 一是 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何处理异常和错误？（Handler示例）  如何在Tomcat中配置并部署网站项目？  HTML5空格和nbsp有啥关系_nbsp的作用及使用场景【说明】  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  三星、SK海力士获美批准：可向中国出口芯片制造设备  UC浏览器如何设置启动页 UC浏览器启动页设置方法  javascript事件捕获机制【深入分析IE和DOM中的事件模型】  如何在建站之星网店版论坛获取技术支持？  Laravel如何实现API资源集合？（Resource Collection教程）  Android利用动画实现背景逐渐变暗  用yum安装MySQLdb模块的步骤方法  在centOS 7安装mysql 5.7的详细教程  韩国代理服务器如何选？解析IP设置技巧与跨境访问优化指南  Laravel怎么使用artisan命令缓存配置和视图  Laravel中间件起什么作用_Laravel Middleware请求生命周期与自定义详解  LinuxCD持续部署教程_自动发布与回滚机制  油猴 教程,油猴搜脚本为什么会网页无法显示？  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  C语言设计一个闪闪的圣诞树  如何使用 Go 正则表达式精准提取括号内首个纯字母标识符（忽略数字与嵌套）  如何快速使用云服务器搭建个人网站？  如何实现建站之星域名转发设置？  如何快速搭建高效WAP手机网站吸引移动用户？  Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】  Laravel如何使用软删除（Soft Deletes）功能_Eloquent软删除与数据恢复方法  七夕网站制作视频,七夕大促活动怎么报名？  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  google浏览器怎么清理缓存_谷歌浏览器清除缓存加速详细步骤  EditPlus中的正则表达式 实战(2)  Win11怎样安装网易有道词典_Win11安装词典教程【步骤】  如何用好域名打造高点击率的自主建站？  如何在Windows虚拟主机上快速搭建网站？  标题：Vue + Vuex + JWT 身份认证的正确实践与常见误区解析  清除minerd进程的简单方法  Laravel软删除怎么实现_Laravel Eloquent SoftDeletes功能使用教程  百度浏览器ai对话怎么关 百度浏览器ai聊天窗口隐藏  如何在云主机上快速搭建网站？  香港服务器网站推广：SEO优化与外贸独立站搭建策略  如何获取上海专业网站定制建站电话？  HTML 中动态设置元素 name 属性的正确语法详解  Laravel Seeder怎么填充数据_Laravel数据库填充器的使用方法与技巧  如何用美橙互联一键搭建多站合一网站？  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】  如何在新浪SAE免费搭建个人博客？  JS弹性运动实现方法分析  如何快速生成高效建站系统源代码？  Laravel如何实现全文搜索功能？（Scout和Algolia示例）  个人网站制作流程图片大全,个人网站如何注销？  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  如何自定义建站之星网站的导航菜单样式？