![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
问也去
GIS开发工程师,欢迎交流学习
展开
-
vue生命周期详解
准备工作 vue生命周期的帖子网上已经一大片,这里通过代码的形式体验一下vue每一个阶段所发生的事 基础代码如下: <div id="root"> <span>{{n}}</span> <button @click="n++">点击</button> </div> <script> new Vue({ el:'#root',原创 2022-02-24 20:56:38 · 243 阅读 · 0 评论 -
手撕Vue源码(四)模板渲染
1.将数据劫持之后,就可以根据数据变化对dom树进行更新,即对模板进行数据渲染。 主要流程为: 2.按词法解析html vue中解析词法没有用状态机,而是设置了一些正则指令,以此匹配开始标签、结束标签、属性等标志 主要原理: 3.词法解析结束后,会返回一个root树,这棵树记录了html中的每个节点,节点的属性,以及父子关系,接下来需要对root树生成对应的代码, 4.获得code字符串代码,就可以构造render函数,构造一个function,用来返回code 5.相关代码地址:原创 2021-04-27 21:28:48 · 133 阅读 · 0 评论 -
手撕Vue源码(三)数组数据劫持
我们在建立观察者的时候,没有考虑数据是数组的情况,如果数据是数组,按照之前的逻辑,会将数组以索引为属性名进行劫持,这样对性能并不高,我们不考虑对数组索引进行劫持,而只封装数组的方法 建立观察者时,添加对数组的判断 若为数组,则分流进行下一步操作 重建数组父类,重新添加数组方法 若数组里面的值为对象,则应该监听 遍历数组,对值调用观察者 数组可以通过封装的方法来追加对象,应该对追加的内容进行监听 在数组上追加属性,指向观察者实例 判断数组追加内容原创 2021-04-09 10:17:29 · 108 阅读 · 0 评论 -
手撕Vue源码(一) rollup的基本配置
rollup简介 rollup类似于webpack,可以用来打包我们写的类库,今天我们尝试模仿vue,写一个相似的类库。 安装 npm install rollup @babel/core @babel/preset-env rollup-plugin-babel -D 环境配置 入口文件设置 入口文件表示我们用rollup将要封装的类库 这里将文件新建在src/index.js中 rollup配置 在全局目录下新家rollup.config.js文件 文件配置如下: import原创 2021-04-07 10:37:51 · 362 阅读 · 0 评论