vue
文章平均质量分 81
辛巴德2018
这个作者很懒,什么都没留下…
展开
-
谈谈对Vue2响应式系统的理解
谈谈对Vue2响应式系统的理解对于Vue的响应式系统随着框架不断的迭代,使用者不断的学习,对其已经相当的熟悉。再加上Vue官方文档上也有对于响应式系统的深入讲解。使我们对其实现的原理也有了足够的了解。现在是时候通过Vue的源码来对响应式系统进行一个细致的了解了。响应式系统的构成及局限通过官方文档我们都知道Vue的响应式系统是通过Object.defineProperty方法来设置一个普通js对象的属性描述符。进而通过自定义js对象属性的getter/setter实现了数据拦截的效果。使其可以在获取原创 2021-05-20 21:10:55 · 280 阅读 · 0 评论 -
Vue中的nextTick浅析
nextTick(基于Vue2.6.x)在Vue中提供的nextTick方法,其作用是将回调函数推入到当前执行主栈后的任务队列之中。使其可以在主栈同步代码执行结束后执行。具体实现是通过nextTick方法将回调函数包裹到一个匿名函数中,然后推入到一个callbacks队列之中。随后就调用初始化后的timerFunc。最后在支持promise的环境未传入callback函数时会返回一个promise对象。其中的重点内容是对timerFunc的实现:支持原生Promise则首选Promise使回调函数原创 2021-05-13 10:21:16 · 254 阅读 · 0 评论 -
vue3中的watch源码浅析
watch源码浅析通过对reactive的解读中明白了在vue中将被响应式系统收集的依赖为组件更新,computed,watch三类。而watch的具体实现具体是怎样的?这就是本次学习的目标。依然通过暴露的composition api入手,从watch方法看整个watch的实现过程。一开始就是连续的4个函数重载,就知道vue3中的watch肯定也还是有所变化的了。// apiWatch.ts// overload #1: array of multiple sources + cbexport原创 2021-04-16 10:14:08 · 972 阅读 · 0 评论 -
vue3中的computed源码浅析
computed源码浅析前面通过对reactive的阅读了解了一下响应式系统的概貌。现在开始对computed进行一定的了解,学习和理解这其中的思路。在vue3中computed以composition api的形式暴露出来,因此可以直接通过computed方法作为入口去阅读理解其中的思路。// computed.ts// 函数重载export function computed<T>(getter: ComputedGetter<T>): ComputedRef<T原创 2021-04-14 16:36:27 · 737 阅读 · 0 评论 -
vue3中reactive源码浅析
reactive源码学习这次clone下来的vue3.0.5的代码,学习reactive模块相关内容。了解vue3中的响应式数据的设计、实现。首先进入到源码中,可以很方便的找到reactivity模块。打开这个模块之后呢?要如何下手就一脸懵逼了,然后猛然发现了__test__文件夹,灵机一动从单测入手不就可以快速的知道这个模块下主要暴露出的api会有哪些,具体的功能会有哪些了吗?于是就愉快的开始阅读单测相关的内容。测试用例第一个相关单测:test('Object', () => { con原创 2021-04-02 17:01:12 · 495 阅读 · 0 评论 -
浅析vue-router中history模式
浅析vue-router中history模式文章目录浅析vue-router中history模式路由初始化history模式初始化history模式浏览器行为监听history模式路由导航流程之前的学习中写过一篇有关vue-router中hash模式的一点思考现在呢有时间就打算把history模式的源码也看一看学习一下。然后写一下自己对于history模式的理解。路由初始化本次学习使用的是vue-router v3.0.2版本源码进行。对于前端路由主要就是解决了改变浏览器url输入框中的值,可以在不原创 2021-01-28 17:29:08 · 2491 阅读 · 0 评论 -
html有趣行为——直接通过id操作dom
分享一个有趣的经验最近在学习中,偶然发现一个有趣情况:在html文档中可以在未定义变量的情况下直接通过html标签上的id值获取到dom元素并进行操作。可以先看看如下的情况:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-09-17 15:33:00 · 485 阅读 · 0 评论 -
使用vue-cli 3+构建的vue项目实现保存时按eslint规则自动格式化代码格式
使用vue-cli 3+构建的vue项目实现保存时按eslint规则自动格式化代码格式标签(空格分隔): vue eslint vue-cli3+最近学习了一下vue-cli 3+的使用,也使用vue-cli 3+创建了一个demo项目。在感受其vue GUI的魅力的同时也深深的被vue-cli 3+创建的项目的简洁所折服。本文主要叙述如何在vue-cli 3+的项目中配置eslint-l...原创 2019-04-18 23:28:23 · 4564 阅读 · 8 评论 -
weex及vue多页面应用编译优化
weex采用的是多页面app模式,在此模式下每次编译会编译各个html文件尤为耗费时间,而在页面数量不断增加的情况下,编译耗时会越来越长,此种问题在vue的多页面开发中应该也是存在的。需要一个优化方法来解决编译时间过长的问题,那么就会想到如果只是在有修改的html文档中去编译文件,那么速度就会得到很大的提升。因此采用了html-webpack-plugin-for-multihtml...原创 2019-05-01 16:36:03 · 521 阅读 · 0 评论