未生丶silence-优快云博客

原创 Vue响应式原理中篇：结合源码来理解响应式原理！

上一章我们通过从零构建了一个极简响应式系统后，对响应式系统中的Dep类、Watcher类和defineReactive方法都有了一定的了解。这一章我们将会结合源码来看看Vue到底是如何实现响应式系统的，以及还有哪些细节需要我们注意和优化。这一章主要分为以下几个模块：observe方法的作用与实现Observer类的实现defineReactive方法做了哪些额外处理？拦截数组变异方法 - Vue是如果处理数组的监听的？$set/$del的实现Dep类的实现Watc

2021-07-22 08:58:21 179

原创 Vue响应式原理上篇：如何从零构建一个响应式系统？

响应式系统是什么？以一个简单例子来说明响应式系统？什么是依赖？什么是依赖搜集？Watcher 是什么？Dep 是什么？如何建立Dep和Watcher之间的关系？完整的实现一个简单的响应式系统?简介响应式系统是Vue非常核心的特性之一。每当我们在Vue中改变数据时，视图会自动进行更新，不用我们做额外的处理，极大地提高了我们的开发效率。那么，Vue又是如何实现响应式系统的呢？其实，响应式系统的核心实现是主要运用了一个方法 - Object.defineProp..

2021-07-21 13:03:01 178

原创 Vue源码解析：丰富的选项合并策略

简介在Vue的初始化过程中，最开始的阶段就是选项合并阶段。它通过调用mergeOptions函数将两个选项配置合并成一个选项配置。这里的选项options的形式实际上就是我们平时开发时在Vue中写的对象配置，形式如下：{ components: {}, filters: {}, data() { return {} }, computed: {}, created: {}, methods: {}, ... }因此，选项合并实际可以简单的看作是两个上面的对象合

2021-07-20 13:35:29 419

原创 Vue源码解析：Vue是如何设计的？

项目文件结构在Vue项目中，所有核心的代码都是在src目录下完成，为了更好的了解Vue的底层实现，我们首先来了解一下src目录下代码的组织情况，从全局入手，在脑海里留下简单的印象，方便后续的学习。（注意：当前使用Vue的版本为2.6.12，不同版本的内容可能会有所差异）.├── compiler // 编译模块：将 template 编译成为可以生成 vnode 的 render 函数│ ├── codeframe.js│ ├── codegen // 代码生成文

2021-07-20 00:41:16 284

原创 egret实现微信排行榜功能（2018-8-20）

找了很多资料，最后自己将官方提供的排行榜的代码看了一遍终于给弄出来了。egret实现微信排行榜功能心累。。。。。。。。。。。。。https://www.jianshu.com/p/600543c4be42...

2018-08-20 11:24:57 1923

原创一次爬坑历程——数组sort（）方法（浅拷贝、深拷贝、console机制）

一次爬坑历程——数组的sort()方法今天偶然看到一个关于sort排序的问题，本以为比较简单，但最后弄了一上午，终于给弄明白了。问题代码如下： function compare(pro) {return function(obj1, obj2) { var val1 = obj1[pro] var val2 = obj2[pro] if (...

2018-06-05 16:36:05 902

原创我对this和闭包的理解

全局代码中的this,始终都是全局对象本身——window，这种情况比较简单。但是在函数中，this并不是静态的绑定到一个函数。所以需要确认this到底指的是什么。那么该如何来确定this的值呢？根据我的理解是，this取决于调用this所在函数的方式。调用函数方式如何影响this值可参见w3c中的引用类型（Reference type）的介绍。引用类型的值只有两种情况：一是处理标示符，二是属性...

2018-05-12 15:04:30 275

原创 CSS资料内容总结

（对相关CSS资料的总结）1. 类选择器注意点：（1）长名称或词组可以使用中横线来为选择器命名。（2）不建议使用“_”下划线来命名CSS选择器。输入的时候少按一个shift键;　浏览器兼容问题 (比如使用_tips的选择器命名，在IE6是无效的)；　能良好区分JavaScript变量命名(JS变量命名是用“_”。（3）不要纯数字、中文等命名，尽量使用英文字母来表示。2. f...

2018-05-04 09:02:03 276

原创 HTML资料——生疏内容总结

（对他人资料的小结）1. <html lang="en"> 向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english 这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，以这句话就是让搜索引擎知道，你的站点是中文站，对htm...

2018-05-02 15:23:00 204

原创《Head-First-HTML-and-CSS》简要小结

1. 标签 <p> 用于短的引用，如一句简短的话，它为内联元素；标签 <blockquote> 用于长的引用，如多行话的引用，它为块级元素。 2. <ol> 与 <ul> 元素只能包含 <li> 元素。3. 域名跟网站名的区别：如guangui.com 为域名,www(特定服务器的名字）.guanghui.com为网站名。 ...

2018-05-02 15:04:20 211

qq_42108498的博客