Vue数据驱动模拟实现2

 更新时间:2017年01月11日 12:12:46   作者:猴子  
这篇文章主要介绍了Vue数据驱动模拟实现的相关资料,实现Observer构造函数,监听已有数据data中的所有属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一、前言

在随笔“模拟Vue之数据驱动1”结尾处,我们说到如果监听的属性是个对象呢?那么这个对象中的其他属性岂不就是监听不了了吗?

如下:

 

倘若user中的name、age属性变化,如何知道它们变化了呢?

今儿,就来解决这一问题。

通过走读Vue源码,发现他是利用Observer构造函数为每个对象创建一个Observer对象,来监听数据的,如果数据中的属性又是一个对象,那么就又通过Observer来监听嘛。

其实,核心思想就是树的先序遍历(关于树,可参考here)。如我们将上述Demo中的data数据,图形化一下,就更加明白了,如下:

 

好了,理清了大体思路,下面我们就一起来创建一个Observer吧。

二、Observer构造

Observer整体结构如下:

function Observer(data){
 //如若this不是Observer对象,即创建一个
 if(!(this instanceof Observer)){
 return new Observer(data);
 }
 this.data = data;
 this.walk(data); 
}

let p = Observer.prototype = Object.create(null);

p.walk = function(data){
 /*
 TODO:监听data数据中的所有属性,
 并查看data中属性值是否为对象,
 若为对象,就创建一个Observer实例
 */ 
}

p.convert = function(key, val){
 //TODO:通过Object.defineProperty监听数据 
}

好了,下面,我们一起来完成walk以及convert方法吧。

-walk-

首先,我们在walk方法中实现对data对象中的所有属性监听,如下:

p.walk = function(data){
 let keys = Object.keys(data);
 keys.forEach( key => {
 let val = data[key];
 this.convert(key, val);
 });
}

且,由于属性中可能又会是一个对象,那么,我们就有必要监听它们。

怎么办呢?

如果是个对象,再次利用Observer构造函数,处理它不就完了么。

如下:

p.walk = function(data){
 let keys = Object.keys(data);
 keys.forEach( key => {
 let val = data[key];
 //如果val为对象,则交给Observer处理
 if(typeof val === 'object'){
  Observer(val);
 }
 this.convert(key, val);
 });
}

你可能会有这样的疑问,如果直接利用Observer处理对象,那么不就与父对象失去关联了么?

然而并没有,因为JavaScript对于对象是指向地址关系,所以怎么会失去关联呢。

-convert-

对于convert方法,就比较简单了,一如既往就是利用Object.defineProperty监听数据,如下:

p.convert = function(key, val){
 Object.defineProperty(this.data, key, {
 get: ()=>{
  console.log('访问了'+key+' 值为'+val);
  return val;
 },
 set: (newVal)=>{
  console.log('设置了'+key+' 值为'+newVal);
  if(newVal !== val){
  val = newVal;
  }
 }
 });
}

好了,到此,一个简单的Observer就构造完成,下面我们就来测试下,是否成功监听了每个属性。

<script src="./observer.js"></script>
<script>
 let data = {
 user: {
  name: 'Monkey',
  age: 24
 },
 lover: {
  name: 'Dorie',
  age: 23
 }
 };
 Observer(data);
</script>

效果如下:

Perfect,完整代码见github

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

相关文章

  • Vue3实现clipboard复制的使用示例

    Vue3实现clipboard复制的使用示例

    在日常开发中,为用户提供复制文本功能的需求比较常见,下面介绍一款vue3可用的插件,可以快速实现这个功能,感兴趣的可以了解一下
    2023-11-11
  • 解决antd的Form组件setFieldsValue的警告问题

    解决antd的Form组件setFieldsValue的警告问题

    这篇文章主要介绍了解决antd的Form组件setFieldsValue的警告问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 详解基于vue的移动web app页面缓存解决方案

    详解基于vue的移动web app页面缓存解决方案

    这篇文章主要介绍了详解基于vue的移动web app页面缓存解决方案,非常具有实用价值,需要的朋友可以参考下
    2017-08-08
  • Vue如何防止按钮重复点击方案详解

    Vue如何防止按钮重复点击方案详解

    这篇文章主要介绍了vue 如何处理防止按钮重复点击问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue实现移除数组中特定元素的方法小结

    Vue实现移除数组中特定元素的方法小结

    这篇文章主要介绍了Vue如何优雅地移除数组中的特定元素,文中介绍了单个去除和批量去除的操作方法,并通过代码示例讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下
    2024-03-03
  • vite项目如何从0开始配置eslint

    vite项目如何从0开始配置eslint

    这篇文章主要介绍了vite项目如何从0开始配置eslint问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue3实现动态面包屑的代码示例

    Vue3实现动态面包屑的代码示例

    这篇文章主要给大家介绍一下Vue3动态面包屑是如何实现的,实现思路又是什么,以及发给大家介绍一下面包屑的功能,文章通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • vue.js简单配置axios的方法详解

    vue.js简单配置axios的方法详解

    axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,下面这篇文章主要给大家介绍了关于vue.js简单配置axios的相关资料,需要的朋友们可以参考借鉴,需要的朋友们下面来一起学习学习吧。
    2017-12-12
  • Vue3如何利用xlsx、xlsx-js-style导出Excel表格使用(适合新手)

    Vue3如何利用xlsx、xlsx-js-style导出Excel表格使用(适合新手)

    在Vue项目中导出Excel表格是常见的功能,特别是在后台管理系统中,为了方便用户将大量数据保存为本地文件,这篇文章主要给大家介绍了关于Vue3如何利用xlsx、xlsx-js-style导出Excel表格使用的相关资料,需要的朋友可以参考下
    2024-06-06
  • 前端vue3 setup使用教程

    前端vue3 setup使用教程

    这篇文章主要为大家介绍了前端vue3架构setup使用教程,详细介绍 setup 的用法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-02-02

最新评论