BNTang

2023年10月28日

摘要：经过上一篇的介绍，了解到了 Vuex 的实现本质就是一个插件，所以要做的事情就是实现这个插件的代码编写即可。本篇文章主要是实现一个全局的 $store，这个 $store 是挂载在 Vue 的原型上的，所以在任何一个组件当中都可以通过 this.$store 访问到。我们先来看看 Vue 官方的阅读全文

posted @ 2023-10-28 14:43 BNTang 阅读(88) 评论(0) 推荐(0) 编辑

手撕Vuex-Vuex实现原理分析

摘要：本章节主要围绕着手撕 Vuex，那么在手撕之前，先来回顾一下 Vuex 的基本使用。创建一个 Vuex 项目，我这里采用 vue-cli 创建一个项目，然后安装 Vuex。 vue create vuex-demo 选择 Manually select features。这里只需要，Babel 阅读全文

posted @ 2023-10-28 11:27 BNTang 阅读(294) 评论(0) 推荐(0) 编辑

2023年10月21日

手撕Vue-实现计算属性

摘要：前言经过上一篇的学习, 完成了将数据代理到了 Nue 的实例上方，这个我们已经撕完了。接下来要实现的是计算属性，计算属性的实现原理是通过 Object.defineProperty() 来实现的，我们先来看看计算属性的使用。看之前先来改造一下我们的代码基础模板，首先是 example.html 阅读全文

posted @ 2023-10-21 22:34 BNTang 阅读(36) 评论(0) 推荐(0) 编辑

手撕Vue-实现将数据代理到Vue实例

摘要：前言经过上一篇文章的学习，完成了 v-on 指令的实现，接下来我们来实现将数据代理到 Vue 实例上。为什么要完成这个功能呢？因为我们在使用 Vue 的时候，可以直接通过 this.xxx 的方式来访问 data 中的数据，这样就不用每次都去访问 data 中的数据了，这样就方便了很多。现在在阅读全文

posted @ 2023-10-21 20:31 BNTang 阅读(25) 评论(0) 推荐(0) 编辑

手撕Vue-实现事件相关指令

摘要：经过上一篇文章的学习，实现了界面驱动数据更新，接下来实现一下其它相关的指令，比如事件相关的指令，v-on 这个指令的使用频率还是很高的，所以我们先来实现这个指令。 v-on 的作用是什么，是不是可以给某一个元素绑定一个事件。紧接着了解了 v-on 的作用之后，我在 example.html 的结构阅读全文

posted @ 2023-10-21 16:42 BNTang 阅读(290) 评论(2) 推荐(1) 编辑

手撕Vue-界面驱动数据更新

摘要：经过上一篇文章，已经将数据驱动界面改变的过程实现了，本章节将实现界面驱动数据更新的过程。界面驱动数据更新的过程，主要是通过 v-model 指令实现的, 只有 v-model 指令才能实现界面驱动数据更新的过程。好了，那么说了是通过 v-model 那么直接处理下 CompilerUtil 中的阅读全文

posted @ 2023-10-21 00:31 BNTang 阅读(46) 评论(0) 推荐(0) 编辑

2023年10月19日

手撕Vue-数据驱动界面改变下

摘要：经过上一篇的介绍，数据驱动界面改变 v-model 的双向绑定已告一段落, 剩余的就以这篇文章来完成。首先完成我们的 v-html，v-text, 其实很简单，就是将我们之前的 v-model 创建观察者的方法，在 v-html 和 v-text 中再写一次即可，创建属于 v-html 和 v-t 阅读全文

posted @ 2023-10-19 23:55 BNTang 阅读(575) 评论(0) 推荐(1) 编辑

2023年10月15日

手撕Vue-数据驱动界面改变中

摘要：经过上一篇的介绍，已经实现了观察者模式的基本内容，接下来要完成的就是将上一篇的发布订阅模式运用到 Nue 中，实现数据驱动界面改变。在监听数据变化的章节当中，根据指定的区域和数据去编译渲染界面这个步骤处，我写了一个注释，这个注释是这样的：第一步：给外界传入的所有数据都添加get/set方法，第二阅读全文

posted @ 2023-10-15 23:07 BNTang 阅读(45) 评论(0) 推荐(0) 编辑

手撕Vue-数据驱动界面改变上

摘要：经过上一篇的介绍，已经实现了监听数据的变化，接下来就是要实现数据变化后，界面也跟着变化，这就是数据驱动界面改变。想要实现数据变化之后更新UI界面，我们可以使用发布订阅模式来实现，先定义一个观察者类, 再定义一个发布订阅类, 然后再通过发布订阅的类来管理观察者类。接下来我们就来实现这个代码。定义阅读全文

posted @ 2023-10-15 22:00 BNTang 阅读(75) 评论(0) 推荐(0) 编辑

手撕Vue-监听数据变化

摘要：经过上一篇的介绍，已经实现了将模板编译成具体数据，接下来要介绍的是如何监听数据的变化，本章主要完成这个需求即可。在我们文章的开始，我写了一个 Vue 双向数据绑定原理的文章当中封装了一个 Observer 类，这个类的作用就是监听数据的变化，当数据发生变化的时候，会通知订阅者，订阅者会去更新视图。阅读全文

posted @ 2023-10-15 18:58 BNTang 阅读(56) 评论(0) 推荐(0) 编辑

公告