用vue的双向绑定简单实现一个todo-list的示例代码

前言

最近在学习vue框架的基本原理,看了一些技术博客以及一些对vue源码的简单实现,对数据代理、数据劫持、模板解析、变异数组方法、双向绑定有了更深的理解。于是乎,尝试着去实践自己学到的知识,用vue的一些基本原理实现一个简单的todo-list,完成对深度复杂对象的双向绑定以及对数组的监听,加深了对vue基本原理的印象。

github地址:todo-list

学习链接

前排感谢以下文章,对我理解vue的基本原理有很大的帮助!

剖析vue实现原理,自己动手实现mvvm by DMQ

对vue早期源码的理解 by梁少峰

实现效果

数据代理

1.简单介绍数据代理

正常情况下,我们都会把数据写在data里面,如下面所示

var vm = new Vue({
  el: '#app',
  data: {
    title: 'hello world'
  }
  methods: {
    changeTitle: function () {
      this.title = 'hello vue'
    }
  }
})
console.log(vm.title) // 'hello world' or 'hello vue'

如果没有数据代理,而我们又要修改data里面的title的话,methods里面的changeTitle只能这样修改成this.data.title = 'hello vue', 下面的console也只能改成console.log(vm.data.title),数据代理就是这样的功能。

2. 实现原理

通过遍历data里面的属性,将每个属性通过object.defineProperty()设置getter和setter,将data里面的每个属性都复制到与data同级的对象里。

(对应上面的示例代码)

触发这里的getter将会触发data里面对应属性的getter,触发这里的setter将会触发data里面对应属性的setter,从而实现代理。实现代码如下:

var self = this;  // this为vue实例, 即vm
Object.keys(this.data).forEach(function(key) {
  Object.defineProperty(this, key, {  // this.title, 即vm.title
    enumerable: false,
    configurable: true,
    get: function getter () {
      return self.data[key];  //触发对应data[key]的getter
    },
    set: function setter (newVal) {
      self.data[key] = newVal; //触发对应data[key]的setter
    }
  });
}

对object.defineProperty不熟悉的小伙伴可以在MDN的文档(链接)学习一下

双向绑定

  1. 数据变动 ---> 视图更新
  2. 视图更新(input、textarea) --> 数据变动

视图更新 --> 数据变动这个方向的绑定比较简单,主要通过事件监听来改变数据,比如input可以监听input事件,一旦触发input事件就改变data。下面主要来理解一下数据变动--->视图更新这个方向的绑定。

1. 数据劫持

不妨让我们自己思考一下,如何实现数据变动,对应绑定数据的视图就更新呢?

答案还是object.defineProperty,通过object.defineProperty遍历设置this.data里面所有属性,在每个属性的setter里面去通知对应的回调函数,这里的回调函数包括dom视图重新渲染的函数、使用$watch添加的回调函数等,这样我们就通过object.defineProperty劫持了数据,当我们对数据重新赋值时,如this.title = 'hello vue',就会触发setter函数,从而触发dom视图重新渲染的函数,实现数据变动,对应视图更新。

2. 发布-订阅模式

那么问题来了,我们如何在setter里面触发所有绑定该数据的回调函数呢?

既然绑定该数据的回调函数不止一个,我们就把所有的回调函数放在一个数组里面,一旦触发该数据的setter,就遍历数组触发里面所有的回调函数,我们把这些回调函数称为订阅者。数组最好就定义在setter函数的最近的上级作用域中,如下面实例代码所示。

Object.keys(this.data).forEach(function(key) {
  var subs = []; // 在这里放置添加所有订阅者的数组
  Object.defineProperty(this.data, key, {  // this.data.title
    enumerable: false,
    configurable: true,
    get: function getter () {
      console.log('访问数据啦啦啦')
      return this.data[key];  //返回对应数据的值
    },
    set: function setter (newVal) {
      if (newVal === this.data[key]) {
        return;  // 如果数据没有变动,函数结束,不执行下面的代码
      }
      this.data[key] = newVal; //数据重新赋值

      subs.forEach(function () {
        // 通知subs里面的所有的订阅者
      })
    }
  });
}

那么问题又来了,怎么把绑定数据的所有回调函数放到一个数组里面呢?

我们可以在getter里面做做手脚,我们知道只要访问数据就会触发对应数据的getter,那我们可以先设置一个全局变量target,如果我们要在data里面title属性添加一个订阅者(changeTitle函数),我们可以先设置target = changeTitle,把changeTitle函数缓存在target中,然后访问this.title去触发title的getter,在getter里面把target这个全局变量的值添加到subs数组里面,添加完成后再把全局变量target设置为null,以便添加其他订阅者。实例代码如下:

Object.keys(this.data).forEach(function(key) {
  var subs = []; // 在这里放置添加所有订阅者的数组
  Object.defineProperty(this.data, key, {  // this.data.title
    enumerable: false,
    configurable: true,
    get: function getter () {
      console.log('访问数据啦啦啦')
      if (target) {
        subs.push(target);
      }
      return this.data[key];  //返回对应数据的值
    },
    set: function setter (newVal) {
      if (newVal === this.data[key]) {
        return;  // 如果数据没有变动,函数结束,不执行下面的代码
      }
      this.data[key] = newVal; //数据重新赋值

      subs.forEach(function () {
        // 通知subs里面的所有的订阅者
      })
    }
  });
}

上面的代码为了方便理解都是通过简化的,实际上我们把订阅者写成一个构造函数watcher,在实例化订阅者的时候去访问对应的数据,触发相应的getter,详细的代码可以阅读DMQ的自己动手实现MVVM

3. 模板解析

通过上面的两个步骤我们已经实现一旦数据变动,就会通知对应绑定数据的订阅者,接下来我们来简单介绍一个特殊的订阅者,也就是视图更新函数,几乎每个数据都会添加对应的视图更新函数,所以我们就来简单了解一下视图更新函数。

假如说有下面这一段代码,我们怎么把它解析成对应的html呢?

<input v-model="title">
<h1>{{title}}</h1>
<button v-on:click="changeTitle">change title<button>

先简单介绍视图更新函数的用途,

比如解析指令v-model="title",v-on:click="changeTitle",还有把{{title}}替换为对应的数据等。

回到上面那个问题,如何解析模板?我们只要去遍历所有dom节点包括其子节点,

  • 如果节点属性含有v-model,视图更新函数就为把input的value设置为title的值
  • 如果节点为文本节点,视图更新函数就为先用正则表达式取出大括号里面的值'title',再设置文本节点的值为data['title']
  • 如果节点属性含有v-on:xxxx,视图更新函数就为先用正则获取事件类型为click,然后获取该属性的值为changeTitle,则事件的回调函数为this.methods['changeTitle'],接着用addEventListener监听节点click事件。

我们要知道视图更新函数也是data对应属性的订阅者,如果不知道如何触发视图更新函数,可以把上面的发布-订阅模式再看一遍。

可能有的小伙伴可能还有个疑问,如何实现input节点的值变化后,下面的h1节点的title值也发生变化?在遍历所有节点后,如果节点含有属性v-model,就用addEventListener监听input事件,一旦触发input事件,改变data['title']的值,就会触发title的setter,从而通知所有的订阅者。

监听数组变化

无法监控每个数组元素

如果让我们自己实现监听数组的变化,我们可能会想到用object.defineProperty去遍历数组每个元素并设置setter,但是vue源码里面却不是这样写的,因为对每一个数组元素defineProperty带来代码本身的复杂度增加和代码执行效率的降低。

变异数组方法

既然无法通过defineProperty监控数组的每个元素,我们可以重写数组的方法(push, pop, shift, unshift, splice, sort, reverse)来改变数组。

vue文档中是这样写的:

Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

下面是vue早期源码学习系列之二:如何监听一个数组的变化中的实例代码

const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
const arrayAugmentations = [];

aryMethods.forEach((method)=> {

  // 这里是原生Array的原型方法
  let original = Array.prototype[method];

  // 将push, pop等封装好的方法定义在对象arrayAugmentations的属性上
  // 注意:是属性而非原型属性
  arrayAugmentations[method] = function () {
    console.log('我被改变啦!');

    // 调用对应的原生方法并返回结果
    return original.apply(this, arguments);
  };

});

let list = ['a', 'b', 'c'];
// 将我们要监听的数组的原型指针指向上面定义的空数组对象
// 别忘了这个空数组的属性上定义了我们封装好的push等方法
list.__proto__ = arrayAugmentations;
list.push('d'); // 我被改变啦! 4

// 这里的list2没有被重新定义原型指针,所以就正常输出
let list2 = ['a', 'b', 'c'];
list2.push('d'); // 4

变异数组方法的缺陷

vue文档中变异数组方法的缺陷

由于 JavaScript 的限制, Vue 不能检测以下变动的数组:

  1. 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如: vm.items.length = newLength

同时文档中也介绍了如何解决上面这两个问题。

最后

以上是自己对vue一些基本原理的理解,当然还有很多不足的地方,欢迎指正。本来自己也是为了应付面试才去学习vue框架的基本原理,但是简单学习了这些vue基本的原理后,让我明白通过深入学习框架原理,可以有效避开一些自己以后会遇到的坑,所以,有时间的话自己以后还是会去看看框架的基本原理。

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

(0)

相关推荐

  • 利用vue写todolist单页应用

    网上有很多关于vue的todolist小程序.大多是利用vue-cli脚手架工具开发的,这个官网的文档也不支持新手从单文件开始学习.所以用大家熟悉的开发方式写了这个todolist,希望和大家一起学习. 1.vue是啥? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.简单说是一个模板引擎,做过后端的应该很清楚,以前靠服务器端渲染的dom,放在浏览器端端渲染,vue拿到数据渲染成dom.当然vue不仅仅是用来干这个的,数据驱动,数据双向绑定,赋予了用户很

  • Vue.js实现一个todo-list的上移下移删除功能

    如图,A simple todo-list长这样 这是一个基于vue.js的一个简单的todo-list小demo.首先要实现添加非空list,点击list切换finished状态这样的一个效果,推荐学习地址---->点击打开链接 接下来是实现的一个上移,下移,删除的效果图: 删除效果: 讲一下思路: 上移-----首先将鼠标所指list的内容插入到上一条上面,然后删除鼠标所指的list(也就是this.items[index]),运行代码便可实现上移的效果,或者将上下两条list的内容进行调换

  • Vue制作Todo List网页

    Vue学习完成Todo List网页,供大家参考,具体内容如下 跟着老师学习Vue,我喜欢清爽的界面,就自己改了样式,看起来还不错,以后就用来记录要做的事情,实用性还蛮强. Vue非常容易上手,运用到了双向绑定机制,即HTML里的DOM元素与JS里的Vue实例进行双向绑定,只要Vue实例中的代理数据改变,HTML中的实际数据就会跟着变,这和原生的Js的命令驱动模式不同,它是数据驱动模式,通过数据的改变来控制DOM的变化.什么意思呢?我们会在接下去的学习中慢慢实践. Todo List这个网页用到

  • vue实现ToDoList简单实例

    一.需求与准备 1.准备 使用bootstrap实现页面的基础样式(依赖jquery),使用vue实现功能需要 2.功能需求 1).表单实现输入任务清单后加入到展示项中 2).点击删除按钮弹出警告框询问是否删除(bootstarp模态框插件) 3).确定删除时,删除对应项(单项删除,全部删除) 4).任务列表为空时,显示"数据为空" v-show 二.实例 1.静态页面 demo使用bootstrap来快速搭建页面 1).表单组件: .form, form-group, form-co

  • Vue.js实现简单ToDoList 前期准备(一)

    一.前言 最近开始学习轻量级的mvvm框架Vue.js.就中文文档来说,算是很齐全了.之前本来在学习1.0版本,某日突然打开官网发现已更新为2.0.便把之后的都改为了2.0的语法.ps:如果恰好你是Vue的初学者的话,慕课网上有一个视频倒是可以去学习参考(我就是参考那个写了个ToDoList的小玩具,在这记录一下学习过程). 二.开篇 mvvm框架是前端现在比较热门的话题,去拉勾网上转一圈,基本70%都有要求.所以不说虚的,只是为了多挣点钱,咱们也该跟上时代的步伐不是.推荐一篇博文'http:/

  • vue.js实例todoList项目

    新建组件todoList.vue,在App.vue中引入 import TodoList from "./components/todoList"; export default { name: 'app', components: { TodoList } } <template> <div id="app"> <h1>TO DO LIST !</h1> <todo-list></todo-list

  • vue实现todolist单页面应用

    刚学习vue的小伙伴不知道从哪入手,很多网上的教程一来就搭建脚手架环境,可以新手更本看不懂,建议还是用引入script的方式引入vue.js,然后看官网的教程,再拿那这个demo练练手,也可以看看官网的demo,然后再去熟悉安装,搭建单页面应用. 效果: 功能: 在input输入文字点击按钮或者enter,下面会添加一个带复选框和文字还有删除按钮的li 用到的vue函数: data,methods,watch,还有localstorage 页面非常简单: 先写外面的盒子,这里用到v-model双

  • 基于vuejs实现一个todolist项目

    用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化: 完整代码: App.vue <template> <div id="app"> <h1 v-html = "title"></h1> <input v-model="newItem" v-on:keyup.enter="add

  • vue2的todolist入门小项目的详细解析

    看完vue2的官方文档后,找个入门项目巩固下知识点,简单的todolsit是个不错的选择. 项目用到了vue.js vue.cli webpack ES6 node环境,完成项目后会对这些技术栈有了些了解. 准备开发环境 $ npm install -g vue-cli $ vue init ,比如 vue init webpack todolist $ cd todolist $ npm install $ npm run dev 安装谷歌插件vue.js devtools 下载vue.js的

  • 用vue的双向绑定简单实现一个todo-list的示例代码

    前言 最近在学习vue框架的基本原理,看了一些技术博客以及一些对vue源码的简单实现,对数据代理.数据劫持.模板解析.变异数组方法.双向绑定有了更深的理解.于是乎,尝试着去实践自己学到的知识,用vue的一些基本原理实现一个简单的todo-list,完成对深度复杂对象的双向绑定以及对数组的监听,加深了对vue基本原理的印象. github地址:todo-list 学习链接 前排感谢以下文章,对我理解vue的基本原理有很大的帮助! 剖析vue实现原理,自己动手实现mvvm by DMQ 对vue早期

  • Vue数据双向绑定原理及简单实现方法

    Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. 一.示例 var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); } }); 二.实现原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的. 1)数据劫持.vue是通过Object.defineProperty()来实现数据劫持

  • Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

    我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写入访问器属性时,会调用setter函数并传入新值. 这里介绍的重点是

  • Vue实现双向绑定的方法

    本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理.数据的循环依赖等,也难免存在一些问题,欢迎大家指正.不过这些并不会影响大家的阅读和理解,相信看完本文后对大家在阅读vue源码的时候会更有帮助< 本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvvm 相信大家对mvvm双向绑定应该都不

  • 详解vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图来吸引各位: 代码: 效果图: 是不是看起来跟vue的使用方式差不多?接下来就来从原理到实现,从简到难一步一步来实现这个SelfVue.由于本文只是为了学习和分享,所以只是简单实现下原理,并没有考虑太多情况和设计,如果大家有什么建议,欢迎提出来. 本文主要介绍两大内容: 1. vue数据双向绑定的原

  • Vue数据双向绑定底层实现原理

    简介: Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.简单的说,就是数据变视图变. 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter.Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不

  • Vue 的双向绑定原理与用法揭秘

    本文实例讲述了Vue 的双向绑定原理与用法.分享给大家供大家参考,具体如下: Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定.下面是一个最简单的示例 <div id="app"> <h2>What's your name:</h2> <input v-model="name" /> <div>Hello

  • 理解Proxy及使用Proxy实现vue数据双向绑定操作

    1.什么是Proxy?它的作用是? 据阮一峰文章介绍:Proxy可以理解成,在目标对象之前架设一层 "拦截",当外界对该对象访问的时候,都必须经过这层拦截,而Proxy就充当了这种机制,类似于代理的含义,它可以对外界访问对象之前进行过滤和改写该对象. 如果对vue2.xx了解或看过源码的人都知道,vue2.xx中使用 Object.defineProperty()方法对该对象通过 递归+遍历的方式来实现对数据的监控的,具体了解 Object.defineProperty可以看我上一篇文

  • vue 数据双向绑定的实现方法

    1. 前言 本文适合于学习Vue源码的初级学者,阅读后,你将对Vue的数据双向绑定原理有一个大致的了解,认识Observer.Compile.Wathcer三大角色(如下图所示)以及它们所发挥的功能. 本文将一步步带你实现简易版的数据双向绑定,每一步都会详细分析这一步要解决的问题以及代码为何如此写,因此,在阅读完本文后,希望你能自己动手实现一个简易版数据双向绑定. 2. 代码实现 2.1 目的分析 本文要实现的效果如下图所示: 本文用到的HTML和JS主体代码如下: <div id="ap

  • vue MVVM双向绑定实例详解(数据劫持+发布者-订阅者模式)

    目录 实现过程 1.实现一个Observer 2.实现Watcher 3.实现Compile 总结 参考文献:https://www.jb51.net/article/160654.htm https://www.jb51.net/article/239554.htm MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成.View层代表的是视图.模版,负责将数据模型转化为UI展现出来.Model层代表的是模型.数据,可以在Model层中

随机推荐