vue

一、简答题 1、当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如何把新增成员设置成响应式数据，它的内部原理是什么。 答： 不是响应式数据，可以使用 Vue.set 或

调试不带 key 的列表渲染 patch(app, vnode) 进入 patch 方法，由于 app 不是 vnode，所以要将这个 dom 元素转换成 vnode，即 oldVnode 为： 传入

patchVnode 在 patch 方法中对比两个新旧 Vnode 节点时，如果新旧节点是相同节点，调用 patchVnode 方法。在 patchVnode 方法内，分为以下几步： 触发用户设置的

案例调试 在 Snabbdom 的使用 这一篇中，安装了 parcel 打包工具，在使用 npm run dev 的时候会在 dist 目录下生成对应的 .js 文件和 .js.map 文件。.js

下载 Snabbdom 源码 拉取代码 使用 v2.1.0 作为示例： 安装依赖 对于 node 版本有要求，我用的 v12，可以成功安装。 编译 因为测试案例中使用了编译之后的目录，所以在运行测试代

Virtual Dom 库 Virtual Dom 就是又普通的 js 对象来描述 Dom 对象，因为 Dom 对象是非常庞大，而且兼容性不好，虚拟 Dom 在复杂视图中可以提升性能还可以跨平台使用。

回顾一下，整个建议的 vue 响应式代码中，首先在 vue.js 中存储了传入的参数，然后将 data 中数据都转换为 getter/setter 添加到了 vue 实例上。然后在 observer.

对于这个简易的 Vue 还有一些问题，比如在实现 v-model 的时候我们还没有实现在输入的同时改变绑定的 data 属性。 双向绑定 这里对于输入框的绑定很简单，监听他的 input 事件，然后修

前面我们已经处理好了数据，并将数据都显示到了页面上，接下来要做的就是实现数据的响应式。 在 Vue 的响应式模式中我们需要用到前几篇说过的观察者模式来实现，观察者模式中就有 Dep(目标) 和 Wat

至此我们已经将数据都存储好，而且将 data 中的属性都转换为响应式的了，接下来我们需要做的就是编译插值表达式和指令，将 html 中的 {{}}、 v-text 和 v-model 都解析成 dat

我们已经实现了 Vue 接收存储参数并将 $data 中的属性转换成 getter/setter，注入到 vue 实例中。 在上篇中我们也提到过 $data 中的 setter 是真正监视数据变化的地

模拟实例 我们就按照以下基础使用，其中包含了差值表达式、v-text 和 v-model，实现一个简单的 Vue。 先在浏览器的控制台上打印一下 vue 实例，看一下我们需要实现其中的哪些属性。 模拟

发布订阅模式 发布订阅模式有三个部分，发布者和订阅者是通过事件中心联系的，vue 中的 $on 和 $emit 就是使用发布订阅模式的，调用 $emit 的组件就是发布者，调用 $on 的组件就是订阅

数据驱动 数据响应式 数据改变 ==> 视图改变 当我们改变数据的时候，视图会相应的更新，不需要我们做任何的 DOM 操作。Vue 封装了很多 DOM 操作，不需要我们再像 jquery 一样去写很多

initEvent 还有一个问题，现在当我们点击浏览器的前进后退按钮的时候，浏览器地址变化了，但是 router-view 的内容却没有变化，这就需要我们监听 popState 事件。 模拟 VueR

initComponents initComponents 是用于创建 router-link 和 router-view 组件的方法，她接收 Vue 参数，虽然 Vue 已经被我们记录到了全局变量中

前面我们已经实现了 VueRouter 作为 Vue 插件所需的 install 方法，接下来就需要实现 VueRouter 的构造函数，在此之前，我们先了解一下 vueRouter 这个类有哪些方法

回顾 VueRouter 的核心代码 分析 Vue.use(VueRouter) 这里使用了 Vue 的插件机制，Vue.use 接收一个函数或者对象，如果是一个方法则直接调用，如果是一个对象则调用其

初始化 vur-router router/index.js 注册路由插件 书写路由规则 创建 router 对象并导出 main.js 注册 router 对象 注册 router 会在创建出来的

hash 模式和 history 模式的区别 表现 hash 模式： https://juejin.cn/#/drafts?id=256500 history 模式：https://juejin.cn