qq_39620552的博客

我们在实现v-bind时会有一种稍微复杂一点儿的情况，就是里面是一个表达式这个时候我们就需要运行这个表达式获取表达式的运行结果，正常情况下这一步需要代码编译才能获取结果，因为编译原理太复杂，所以我们这里把_data 和 vnode.env创建一个代码执行环境 并加上表达式放在 eval或者Function构造函数，来执行表达式内的代码获取结果。

我们在页面上绑定一个class看效果(可以看到class已经效果，文字变成了红色)解析属性时遇到冒号开头或者v-bind:开头的就获取绑定的具体值并绑定到属性上。1.绑定的是一个简单的属性。2.绑定的元素上面有表达式。

上一章我们实现了初始渲染时渲染了v-for列表，这一章我们来实现修改list后重新渲染list。

ul下有一个真实节点li并且添加了v-for的指令，我们需要的做的就是把当前这个li变成虚拟节点，然后在虚拟节点下挂载真是节点，但是在html层，真实节点的li还是挂载到ul上面。4.构建虚拟节点时，使用分析属性返回的真实节点，如果没有返回真实节点，则自行创建虚拟节点，创建虚拟节点时，如果当前节点有env属性的话，则把这个值设置到虚拟节点的env中。1.vfor.js 中创建一个虚拟节点，并传入相关的属性，然后删除带有v-for指令的标签，然后添加上一个空的元素节点。从页面上我们可以看到页面已经渲染li。

我们在$mount 和 $render 方法里面返回一个Promise 在then方法里面执行beforeMount和mounted。我们现在MiniVue中实现前4个生命周期。

首先我们来实现methods，methods较为简单，只需要在初始化的时候，将事件挂载到实例上即可，唯一需要注意的是挂载的时候需要使用bind去注册事件，因为method里面可能会使用到this去访问里面的数据。v-on原理很简单，构建虚拟dom的时候查询元素节点是否以@或者v-on:开头，如果以这个开头则给元素添加事件监听,我们先创建von.js。现在我们来页面上给button绑定一个事件，并在入口文件上添加上这个事件查看效果。Vue中v-on可以用来绑定自定义的事件，我们今天就来实现这个功能。

开始之前我们先修复一下之前的一个BUG、由于我们使用了html-webpack-plugin并且配置了html模板，所以在html模板里面就不需要再引用打包后的bundle.js了，webpack打包时会自动添加上去，我们在构建虚拟节点的时候，检测节点是否有v-model属性，检测到了之后就添加调用v-model，当前代码只支持input的双向绑定，如果需要其他标签，请自行添加。3.构建虚拟dom时，如果是元素节点并且有v-model属性，给调用vmodel方法。现在开始实现v-model。

renderData 方法传递的第二个参数就是用户在模板中写的字符串, 这是我们就需要写一个方法getNameSpace来获取这个字符串。上一章我们处理了在页面初始化的时候渲染模板，但是如果是在页面上修改了data里面的数据的话是不会修改的，这一章我们来实现这个功能。为了验证一些嵌套类型的数据修改，我们在入口文件index.js 中新增一个object类型的数据，并在index.html 中使用。我们在proxyObject处可以监控到用户改变数据，这个时候触发renderData方法。

虚拟dom创建好了，依赖也收集好了，这个时候就该去渲染dom了，把页面上的。1.传入根节点VNode, 如果当前节点是元素节点则重新调用该方法。现在再查看页面上的效果发现，模板已经被替换成了具体的值。2.如果是文本节点，则获取出来该节点依赖的模板。渲染之前我们给原型上添加一个render方法。3.获取该模板对应的值 然后将值替换为模板。然后把render 方法挂载到原型上并调用。接下来实现renderNode方法。

响应式数据完成之后我们需要根据数据进行动态更新dom，但是更新之前我们需要MVVM进行动态更新的时候，需要知道data里面的某一个属性，都哪些dom用到了，这样才能根据真实节点进行准确更新。{}}）的名称，创建两个Map 一个通过VNode关联模板、一个通过模板关联VNode，这样如果某一个模板值发生改变就可以轻易的获取关联的节点从而修改dom。收集的过程中，我们主要是对于文本节点（nodeType=3）的节点进行收集，如果是元素节点，则重新调用方法，如果是文本节点的话则获取模板（去掉{

构建虚拟dom树的操作我们放在mount事件里面，现在需要创建mount.js。MVVM的核心之一就是虚拟dom树，我们这一章节就先构建一个虚拟dom树。3.构建dom时，使用深度优先搜索算法（反复调用本身方法），获取子节点。2.给原型添加mount方法，通过根节点el构建虚拟dom。我们在浏览器里面可以看到当前构建的虚拟dom树。首先我们需要创建一个VNode的类。init方法里面执行当前mount。第二步：构建虚拟dom。1.创建虚拟DOM的类。

实现数组类型的代理的方式就是初始化代理的时候，为数组的每一个元素都进行简单代理（Object类型的代理），而后代理数组的常用方法：push、pop、shift、unshift、toString。这里有一个需要注意的点，正常情况在代理入口方法中，会先进入Object中的代理，我们需要在代理中，让他再次进入constructProxy，所以我们需要添加一段代码。然后就是代理方法，原理就是代理对象的push、pop、shift、unshift 方法，在代理方法里面执行array的同名方法，然后返回结果。

当前的代理我们使用Object.defineProperty来实现，这个类方法有一个很大的缺点，就是在定义数组时，通过下标修改数据和新增删除数据时不会触发，vue2中的解决方法就是重写这些方法，这里我们也按照vue2的方式来实现。创建完类之后我们需要创建一个js（src/core/init.js）给这个类的原型添加初始化事件，用来初始化data、computed等内容。我们在src中添加proxy.js，并添加代理方法(src/core/proxy.js)方法 (src/core/proxy.js)

项目使用 webpack 进行进行构建，初始化步骤如下:1.创建npm项目执行npm init 一直下一步就行2.安装webpack、webpack-cli、webpack-dev-server，html-webpack-plugin3.配置webpack、 创建webpack.config.js 、配置启动命令创建调试的html页面根目录创建public文件夹，并在文件夹内部创建index.html，里面的代码如下（bundle.js 是webpack打包的mvvm代码)