手写 Vue 系列之从 Vue1 升级到 Vue2

前言

上一篇文章手写 Vue 系列之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理，包括如下功能：

数据响应式拦截
- 普通对象
- 数组
数据响应式更新
- 依赖收集
  - Dep
  - Watcher
- 编译器
  - 文本节点
  - v-on:click
  - v-bind
  - v-model

在最后也详细讲解了 Vue1 的诞生以及存在的问题：Vue1.x 在中小型系统中性能会很好，定向更新 DOM 节点，但是大型系统由于 Watcher 太多，导致资源占用过多，性能下降。于是 Vue2 中通过引入 VNode 和 Diff 的来解决这个问题，

所以接下来的系列内容就是升级上一篇文章编写的 lyn-vue 框架，将它从 Vue1 升级到 Vue2。所以建议整个系列大家按顺序去阅读学习，如若强行阅读，可能会产生云里雾里的感觉，事倍功半。

另外欢迎关注以防迷路，同时系列文章都会收录到精通 Vue 技术栈的源码原理专栏，也欢迎关注该专栏。

目标

升级后的框架需要将如下示例代码跑起来

示例

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Lyn Vue2.0</title>

</head>

<body>

  <div id="app">

    <h3>数据响应式更新 原理</h3>

    <div>{{ t }}</div>

    <div>{{ t1 }}</div>

    <div>{{ arr }}</div>

    <h3>methods + computed + 异步更新队列 原理</h3>

    <div>

      <p>{{ counter }}</p>

      <div>{{ doubleCounter }}</div>

      <div>{{ doubleCounter }}</div>

      <div>{{ doubleCounter }}</div>

      <button v-on:click="handleAdd"> Add </button>

      <button v-on:click="handleMinus"> Minus </button>

    </div>

    <h3>v-bind</h3>

    <span v-bind:title="title">右键审查元素查看我的 title 属性</span>

    <h3>v-model 原理</h3>

    <div>

      <input type="text" v-model="inputVal" />

      <div>{{ inputVal }}</div>

    </div>

    <div>

      <input type="checkbox" v-model="isChecked" />

      <div>{{ isChecked }}</div>

    </div>

    <div>

      <select v-model="selectValue">

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

      </select>

      <div>{{ selectValue }}</div>

    </div>

    <h3>组件 原理</h3>

    <comp></comp>

    <h3>插槽 原理</h3>

    <scope-slot></scope-slot>

    <scope-slot>

      <template v-slot:default="scopeSlot">

        <div>{{ scopeSlot }}</div>

      </template>

    </scope-slot>

  </div>

  <script type="module">

    import Vue from './src/index.js'

    const ins = new Vue({

      el: '#app',

      data() {

        return {

          // 原始值和对象的响应式原理

          t: 't value',

          t1: {

            tt1: 'tt1 value'

          },

          // 数组的响应式原理

          arr: [1, 2, 3],

          // 响应式更新

          counter: 0,

          // v-bind

          title: "I am title",

          // v-model

          inputVal: 'test',

          isChecked: true,

          selectValue: 2,

        }

      },

      // methods + 事件 + 数据响应式更新 原理

      methods: {

        handleAdd() {

          this.counter++

        },

        handleMinus() {

          this.counter--

        }

      },

      // computed + 异步更新队列 的原理

      computed: {

        doubleCounter() {

          console.log('evalute doubleCounter')

          return this.counter * 2

        }

      },

      // 组件

      components: {

        // 子组件

        'comp': {

          template: `

            <div>

              <p>{{ compCounter }}</p>

              <p>{{ doubleCompCounter }}</p>

              <p>{{ doubleCompCounter }}</p>

              <p>{{ doubleCompCounter }}</p>

              <button v-on:click="handleCompAdd"> comp add </button>

              <button v-on:click="handleCompMinus"> comp minus </button>

            </div>`,

          data() {

            return {

              compCounter: 0

            }

          },

          methods: {

            handleCompAdd() {

              this.compCounter++

            },

            handleCompMinus() {

              this.compCounter--

            }

          },

          computed: {

            doubleCompCounter() {

              console.log('evalute doubleCompCounter')

              return this.compCounter * 2

            }

          }

        },

        // 插槽

        'scope-slot': {

          template: `

            <div>

              <slot name="default" v-bind:slotKey="slotKey">{{ slotKey }}</slot>

            </div>

          `,

          data() {

            return {

              slotKey: 'scope slot content'

            }

          }

        }

      }

    })

    // 数据响应式拦截

    setTimeout(() => {

      console.log('********** 属性值为原始值时的 getter、setter ************')

      console.log(ins.t)

      ins.t = 'change t value'

      console.log(ins.t)

    }, 1000)

    setTimeout(() => {

      console.log('********** 属性的新值为对象的情况 ************')

      ins.t = {

        tt: 'tt value'

      }

      console.log(ins.t.tt)

    }, 2000)

    setTimeout(() => {

      console.log('********** 验证对深层属性的 getter、setter 拦截 ************')

      ins.t1.tt1 = 'change tt1 value'

      console.log(ins.t1.tt1)

    }, 3000)

    setTimeout(() => {

      console.log('********** 将值为对象的属性更新为原始值 ************')

      console.log(ins.t1)

      ins.t1 = 't1 value'

      console.log(ins.t1)

    }, 4000)

    setTimeout(() => {

      console.log('********** 数组操作方法的拦截 ************')

      console.log(ins.arr)

      ins.arr.push(4)

      console.log(ins.arr)

    }, 5000)

  </script>

</body>

</html>

知识点

示例代码涉及的知识点包括：

基于模版解析的编译器
- 解析模版得到 AST
- 基于 AST 生成渲染函数
- render helper
  - _c，创建指定标签的 VNode
  - _v，创建文本节点的 VNode
  - _t，创建插槽节点的 VNode
- VNode
patch
- 原生标签和组件的初始渲染
  - v-model
  - v-bind
  - v-on
- diff
插槽原理
computed
异步更新队列

效果

示例代码最终的运行效果如下：

说明

该框架只为讲解 Vue 的核心原理，没有什么健壮性可言，说不定你换个示例代码可能就会报错、跑不起来，但是用来学习是完全足够了，基本上把 Vue 的核心原理（知识点）都实现了一遍。

所以接下来就开始正式的学习之旅吧，加油！！

链接

配套视频，微信公众号回复："精通 Vue 技术栈源码原理视频版" 获取
精通 Vue 技术栈源码原理专栏
github 仓库 liyongning/Vue 欢迎 Star
github 仓库 liyongning/Lyn-Vue-DOM 欢迎 Star
github 仓库 liyongning/Lyn-Vue-Template 欢迎 Star

感谢各位的：关注、点赞、收藏和评论，我们下期见。

当学习成为了习惯，知识也就变成了常识。 感谢各位的关注、点赞、收藏和评论。

新视频和文章会第一时间在微信公众号发送，欢迎关注：李永宁lyn

文章已收录到 github 仓库 liyongning/blog，欢迎 Watch 和 Star。

手写 Vue 系列之从 Vue1 升级到 Vue2的更多相关文章

手写 Vue 系列之 Vue1.x
前言前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...
tensorflow笔记（四）之MNIST手写识别系列一
tensorflow笔记(四)之MNIST手写识别系列一版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7436310.html ...
tensorflow笔记（五）之MNIST手写识别系列二
tensorflow笔记(五)之MNIST手写识别系列二版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7455233.html ...
剖析手写Vue，你也可以手写一个MVVM框架
剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...
vue1升级到vue2的问题
router 不能用map方法了,需要改router的结构改为 routers= [ { // 当没有匹配路由时默认返回的首页 path:'/index', compone ...
手写vue中v-bind:style效果的自定义指令
自定义指令什么是自定义指令以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到 ...
手写vue双向绑定数据
来一张原理图: 实现思路: (1)绑定data 种的数据,为每个数据添加指令.通过Object,defineProperty() 来通知属性是否更改 (2) 找到每个DOM节点的指令.绑定事件.并绑定 ...
常见python面试题-手写代码系列
1.如何反向迭代一个序列 #如果是一个list,最快的方法使用reversetempList = [1,2,3,4]tempList.reverse()for x in tempList: pr ...
学习手写vue，理解原理
class Compiler{ constructor(el,vm){ // 判断el属性是不是一个元素, 如果不是就获取 this.el = this.isElementNode(el)?el: ...

随机推荐

IDE连接数据库时测试Test Connection 无法点击
问题: IDE连接数据库时测试Test Connection 无法点击解决: IDE缺少对应的驱动第一步: 点击驱动第二步: 下载驱动注意:不同版本的驱动下载位置不同,此版本为2017
k8s之资源限制以及探针检查
k8s之资源限制以及探针检查一.资源限制 1. 资源限制的使用当定义Pod时可以选择性地为每个容器设定所需要的资源数量.最常见的可设定资源是CPU和内存大小,以及其他类型的资源. 2. reuqe ...
Solon 1.6.21 发布，轻量级应用开发框架
关于官网千呼万唤始出来: https://solon.noear.org .整了一个月多了...还得不断接着整! 关于 Solon Solon 是一个轻量级应用开发框架.支持 Web.Data.Jo ...
fiddler模拟弱网1
第一步: 首先你得将你的fiddle配置好了,并链接上了移动端. 参考这篇文章:http://www.cnblogs.com/lijiageng/p/6214162.html 第二步: 使用 ...
《PHP程序员面试笔试宝典》——如何准备集体面试？
本文摘自<PHP程序员面试笔试宝典>. PHP面试技巧分享,PHP面试题,PHP宝典尽在"琉忆编程库". 集体面试也被称为群面.无领导小组面试.由于计算机发展至今,软件 ...
Rust语言开发
Rust开发第一个程序 fn main() { println!("Hello, world!"); // 带!号的都是宏并不是函数 } fn main() { let nam ...
突然发现，npm里request依赖包已经弃用，怎么办？
摘要:在npm官网查看了request依赖包的当前状态,果然在2020年就被弃用了. 本文分享自华为云社区<npm里request依赖包已经弃用?致敬并调研替代方案!>,作者: gentl ...
了解MySQL存储引擎工作原理
MySql数据库最大的特色就是其插件式的存储引擎架构,本文主要介绍MySql常用的存储引擎,为开发时选择合适的存储引擎提供参考. 1. MySql体系结构# 在介绍存储引擎之前先来介绍下MySql的体 ...
flask 中使用蓝图将路由分开写在不同文件
flask 若想将不同的路由写在不同的文件中(如将 user 对象的相关接口写在一个文件中,将 customer 对象的相关接口写在另一个文件中),可以使用蓝图来实现. 有关蓝图的定义:A Bluep ...
RFC2544优化步长测试——信而泰网络测试仪实操
一.测试拓扑拓扑说明 1.测试仪两个端口和DUT两个端口相连 2.测试仪P1端口发出流量,经过DUT转发后,从B端口发出,进入测试仪P2端口. 二.测试思路 1.在测试仪端口上创建两个Interfa ...

手写 Vue 系列 之 从 Vue1 升级到 Vue2

前言

目标

示例

知识点

效果

说明

链接

手写 Vue 系列 之 从 Vue1 升级到 Vue2的更多相关文章

随机推荐

热门专题

手写 Vue 系列之从 Vue1 升级到 Vue2

手写 Vue 系列之从 Vue1 升级到 Vue2的更多相关文章