理解vue实现原理,实现一个简单的Vue框架资料.pdfVIP

理解 vue 实现原理，实现一个简单的 Vue 框架 其实对 JS我研究不是太深，用过很多次，但只是实现功能就算了。最近 JS实在是太火，从前端到后端，应用越来越广泛，各种框架层出不 穷，忍不住也想赶一下潮流。 Vue 是近年出的一个前端构建数据驱动的 web 界面的库，主要的特色是响应式的数据绑定，区别于以往的命令式用法。也就是在 var a=1; 的过程中，拦截’ =’的过程，从而实现更新数据， web 视图也自动同步更新的功能。而不需要显式的使用数据更新视图（命令式）。这种用法我 最早是在 VC MFC 中见过的，控件绑定变量，修改变量的值，输入框也同步改变。 Vue 的官方文档，网上的解析文章都很详细，不过出于学习的目的，还是了解原理后，自己实现一下记忆深刻，同时也可以学习下 Js 的一 些知识。搞这行的，一定要多 WTFC(Write The Fucking Code) 。 一、思考设计 其实这里的思考是在看过几篇文章、看过一些源码后补上的，所以有的地方会有上帝视角的意思。但是这个过程是必须的，以后碰到问题 就会有思考的方向。 先看看我们想要实现什么功能，以及现在所具有的条件： 效果图如下： 这里写图片描述 使用 Vue 框架代码如下： !DOCTYPE html html lang=en head meta charset=UTF-8 titleMVVM/title /head body script src=src/vue.js/script div id=msg {{b.c}} 这是普通文本 {{b.c+1+message}} 这是普通文本 p{{message}}/p pinput type=text v-model=message//p p{{message}}/p pbutton type=button v-on:click=clickBtn(message)click me/button/p /div script var vm = new Vue({ el:#msg, data:{ b:{ c:1 }, message:hello world }, methods:{ clickBtn:function(message){ vm.message = clicked; } } }); /script /body /html 然后我们还知道一个条件， Vue 的官方文档所说的： 把一个普通对象传给 Vue 实例作为它的 data 选项， Vue.js 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter 。这是 ES5 特性， 不能打补丁实现，这便是为什么 Vue.js 不支持 IE8 及更低版本。 用这个特性实现这样的功能，我们需要做什么呢？ 首先，需要利用 Object.defineProperty ，将要观察的对象，转化成 getter/setter ，以便拦截对象赋值与