手写Vue入口及实例

我会带着你远行 2022-09-02 04:29 136阅读 0赞

前言：在开始之前，我首先是问了自己vue 到底是个啥？我的潜意识觉得他就是一个为了更加快速的搭建UI而成的基于javascript上的一个渐进式框架

之前觉得其是一个MVVM

现在才知道Vue并不是一个纯粹的MVVM框架，只是在发展的长河中，借鉴了MVVM的设计模式

1.MVVM什么是MVVM前提是只在数据改变的时候去更新视图层，视图层改变，数据改变，比如说form表单

但是在vue中存在一个不符合如此规则的现象，就是$ref这是通过ref句柄对dom直接进行操作的，所以严格意义上来说，他不属于一个纯粹的MVVM

首先：

1.mk dir vue-source && cd vue-source .code

2.在新建的vue-source中npm init -y

3.创建src目录/index.js pubilc/index.html dist/umd/vue.js rollup.config.js

3.npm install rollup @babel/core @babel/preset-env rollup-plugin-babel rollup-plugin-server cross-env 安装插件和相关依赖

4.babelrc配置

![6f5ca09d95216b8fd4e0380fe31593e2.png][]

4.rollup.config.js配置

![8af014b373ee1c5b5bc9f1b9e6b43733.png][]

5./src/index.js

![30ac368234e7ce8c2e4e5668db7d724d.png][]

6.initMixin.js

![c50b292f904ed240839c892f42114d02.png][]

7.initState.js

![f16fa7772fc19ae97c53224c0d5be0b8.png][]

8.observer.js

![5a916829b4aac423980f2c2f8b0aa0ac.png][]

[6f5ca09d95216b8fd4e0380fe31593e2.png]: /images/20220829/885fe99015604fb393e3ce5c264d7a64.png
[8af014b373ee1c5b5bc9f1b9e6b43733.png]: /images/20220829/9cd553e6db354b2fa5345c0795da1396.png
[30ac368234e7ce8c2e4e5668db7d724d.png]: /images/20220829/005601d20e034caa9e7a1046ef9a5246.png
[c50b292f904ed240839c892f42114d02.png]: /images/20220829/999a34aaaca643e480030abf34c84f5c.png
[f16fa7772fc19ae97c53224c0d5be0b8.png]: /images/20220829/387958a7babf48eab23d7b216f73a371.png
[5a916829b4aac423980f2c2f8b0aa0ac.png]: /images/20220829/f84486694084499291373a828b1e2f5f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，136人围观）

还没有评论，来说两句吧...

相关阅读

相关手写vue3响应系统

目录 1.目标： 2.原理 3.实现代码 4.小结： -------------------- 1.目标：假设我现在有一个对象obj let ob

电玩女神/ 2023年09月28日 12:27/ 0 赞/ 132 阅读

相关手写ArrayList实例

效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

刺骨的言语ヽ痛彻心扉/ 2023年07月04日 14:09/ 0 赞/ 2 阅读

相关 vue 手写一个vue-router

实现效果如下： ![598820dbdaf0431ad7875db103b3714b.png][] 1. 准备好环境使用 vue/cil 初始化项目配置：

电玩女神/ 2022年12月12日 02:00/ 0 赞/ 208 阅读

相关 vue 实现手写电子签名-vue-esign

npm install vue-esign --save 1. `在main.js中` 2. `Vue.use(vueEsign)`

我会带着你远行/ 2022年11月27日 07:05/ 0 赞/ 352 阅读

相关 vue手写星级评分

基于vue的星级评分方法效果图如下 ![在这里插入图片描述][20210407193414912.png] <u-image @click='score(in

素颜马尾好姑娘i/ 2022年11月16日 15:15/ 0 赞/ 173 阅读

相关手写vue2的Lazyload

调用方式，express写个后台服务调图片，具体使用不贴了 import VueLazyload from "./modules/vue-lazyload";

青旅半醒/ 2022年09月16日 15:27/ 0 赞/ 177 阅读

相关手写vue实例中对数组拦截

在上一次的代码中，对于监听vue data 的构造函数里，对于数据的劫持，没有对数组进行特殊处理，那么出现的比较头疼的是，在实际开发中，是不对数组进行索引操作的，但是之前所定义

蔚落/ 2022年09月02日 04:29/ 0 赞/ 91 阅读

相关手写Vue入口及实例

前言：在开始之前，我首先是问了自己vue 到底是个啥？我的潜意识觉得他就是一个为了更加快速的搭建UI而成的基于javascript上的一个渐进式框架之前觉得其是一个MVVM

我会带着你远行/ 2022年09月02日 04:29/ 0 赞/ 137 阅读

相关 vue3手写签名

代码贴到项目即可使用。 <template> <div style="width: 300px;height: 200px;border: 1px so

刺骨的言语ヽ痛彻心扉/ 2022年08月30日 15:50/ 0 赞/ 319 阅读

相关 Promise原理及手写Promise

原理： > Promise 原理围绕以下三个问题进行解决： > > （有任何一步不了解的话请先往下看手写Promise，会一步步剖析原理，看完后再继续回顾这里！！） >

浅浅的花香味﹌/ 2022年05月28日 01:55/ 0 赞/ 275 阅读