Skip to content

Commit

Permalink
something about vue
Browse files Browse the repository at this point in the history
  • Loading branch information
yk committed Apr 30, 2024
1 parent c72d4a0 commit 37a6141
Show file tree
Hide file tree
Showing 26 changed files with 678 additions and 48 deletions.
2 changes: 1 addition & 1 deletion content/posts/algorithm/trick/必掌握的排序算法.md
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ public int merge(int[] arr, int left, int mid, int right) {

```java
/**
* 荷兰国旗问题,可以想象两个游标卡尺两端往中间挤
* 荷兰国旗问题,可以想象游标卡尺的两端往中间挤
*
* @param arr
* @param target
Expand Down
1 change: 0 additions & 1 deletion content/posts/react/React-hooks.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
title: 'React -- Hooks'
date: 2022-11-27T11:28:43
+08:00
tags: [React]
draft: true
---
Expand Down
4 changes: 3 additions & 1 deletion content/posts/vue/Vue响应式原理.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
---
title: 'Vue2响应式原理'
date: 2022-10-26T09:58:34+08:00
tags: [Vue]
series: []
categories: [Vue]
weight:
---

![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202210261654753.png)
Expand Down
14 changes: 14 additions & 0 deletions content/posts/vue/Vue源码中的设计美学.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
title: 'Vue 源码中的设计美学'
date: 2024-04-30
series: []
categories: [Vue]
weight:
---

## 为什么能通过 this.xxx 就能访问到对应的 methods 和 data

```js {oppen=false}
// test
function sayHello() {}
```
12 changes: 12 additions & 0 deletions public/categories/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,18 @@ <h3 class="card-item-title">
</article><article class="archive-item">
<a href="/vscode%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%BB%BA%E8%AE%AE/" class="archive-item-link">VsCode格式化建议</a>
</article></div>
</div><div class="card-item">
<div class="card-item-wrapper">
<h3 class="card-item-title">
<a href="/categories/vue/">
<svg class="icon"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M464 128H272l-54.63-54.63c-6-6-14.14-9.37-22.63-9.37H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48zm0 272H48V112h140.12l54.63 54.63c6 6 14.14 9.37 22.63 9.37H464v224z"/></svg>&nbsp;Vue <sup>2</sup>
</a>
</h3><article class="archive-item">
<a href="/vue%E6%BA%90%E7%A0%81%E4%B8%AD%E7%9A%84%E8%AE%BE%E8%AE%A1%E7%BE%8E%E5%AD%A6/" class="archive-item-link">Vue 源码中的设计美学</a>
</article><article class="archive-item">
<a href="/vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/" class="archive-item-link">Vue2响应式原理</a>
</article></div>
</div><div class="card-item">
<div class="card-item-wrapper">
<h3 class="card-item-title">
Expand Down
9 changes: 8 additions & 1 deletion public/categories/index.xml
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,14 @@
<link>http://localhost:1313/categories/</link>
<description>Categories - 分类 - Hello World</description>
<generator>Hugo -- gohugo.io</generator><language>zh-CN</language><managingEditor>[email protected] (EricYuan)</managingEditor>
<webMaster>[email protected] (EricYuan)</webMaster><lastBuildDate>Wed, 21 Feb 2024 00:00:00 &#43;0000</lastBuildDate><atom:link href="http://localhost:1313/categories/" rel="self" type="application/rss+xml" /><item>
<webMaster>[email protected] (EricYuan)</webMaster><lastBuildDate>Tue, 30 Apr 2024 00:00:00 &#43;0000</lastBuildDate><atom:link href="http://localhost:1313/categories/" rel="self" type="application/rss+xml" /><item>
<title>Vue</title>
<link>http://localhost:1313/categories/vue/</link>
<pubDate>Tue, 30 Apr 2024 00:00:00 &#43;0000</pubDate><author>
<name>EricYuan</name>
</author><guid>http://localhost:1313/categories/vue/</guid>
<description><![CDATA[]]></description>
</item><item>
<title>Algorithm</title>
<link>http://localhost:1313/categories/algorithm/</link>
<pubDate>Wed, 21 Feb 2024 00:00:00 &#43;0000</pubDate><author>
Expand Down
237 changes: 237 additions & 0 deletions public/categories/vue/index.html

Large diffs are not rendered by default.

30 changes: 30 additions & 0 deletions public/categories/vue/index.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
<channel>
<title>Vue - 分类 - Hello World</title>
<link>http://localhost:1313/categories/vue/</link>
<description>Vue - 分类 - Hello World</description>
<generator>Hugo -- gohugo.io</generator><language>zh-CN</language><managingEditor>[email protected] (EricYuan)</managingEditor>
<webMaster>[email protected] (EricYuan)</webMaster><lastBuildDate>Tue, 30 Apr 2024 00:00:00 &#43;0000</lastBuildDate><atom:link href="http://localhost:1313/categories/vue/" rel="self" type="application/rss+xml" /><item>
<title>Vue 源码中的设计美学</title>
<link>http://localhost:1313/vue%E6%BA%90%E7%A0%81%E4%B8%AD%E7%9A%84%E8%AE%BE%E8%AE%A1%E7%BE%8E%E5%AD%A6/</link>
<pubDate>Tue, 30 Apr 2024 00:00:00 &#43;0000</pubDate><author>
<name>EricYuan</name>
</author><guid>http://localhost:1313/vue%E6%BA%90%E7%A0%81%E4%B8%AD%E7%9A%84%E8%AE%BE%E8%AE%A1%E7%BE%8E%E5%AD%A6/</guid>
<description><![CDATA[ 为什么能通过 this.xxx 就能访问到对应的 methods 和 datafunction test { this.name = &#39;hello world&#39; } ]]></description>
</item><item>
<title>Vue2响应式原理</title>
<link>http://localhost:1313/vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/</link>
<pubDate>Wed, 26 Oct 2022 09:58:34 &#43;0800</pubDate><author>
<name>EricYuan</name>
</author><guid>http://localhost:1313/vue%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/</guid>
<description><![CDATA[核心VUE2 的响应式原理实现主要基于:
Object.defineProperty(obj, prop, descriptor) 观察者模式 init - reactive 化Vue 初始化实例时,通过 Object.defineProperty 为 data 中的所有数据添加 setter/getter。这个过程称为 reactive 化。
所以:
vue 监听不到 data 中的对象属性的增加和删除,必须在初始化的时候就声明好对象的属性。
解决方案:或者使用 Vue 提供的 $set 方法;也可以用 Object.assign({}, source, addObj) 去创建一个新对象来触发更新。
Vue 也监听不到数组索引和长度的变化,因为当数据是数组时,Vue 会直接停止对数据属性的监测。至于为什么这么做,尤大的解释是:解决性能问题。
解决方案:新增用 $set,删除用 splice,Vue 对数组的一些方法进行了重写来实现响应式。
看下 defineReactive 源码:
// 以下所有代码为简化后的核心代码,详细的见vue2的gihub仓库哈 export function defineReactive(obj: object, key: string, val?: any, ...otehrs) { const dep = new Dep() Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter() { if (Dep.]]></description>
</item></channel>
</rss>
10 changes: 10 additions & 0 deletions public/categories/vue/page/1/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>http://localhost:1313/categories/vue/</title>
<link rel="canonical" href="http://localhost:1313/categories/vue/">
<meta name="robots" content="noindex">
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/categories/vue/">
</head>
</html>
2 changes: 1 addition & 1 deletion public/index.json

Large diffs are not rendered by default.

14 changes: 6 additions & 8 deletions public/index.xml
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<link>http://localhost:1313/</link>
<description>A website documenting front-end technology and everyday life</description>
<generator>Hugo -- gohugo.io</generator><language>zh-CN</language><managingEditor>[email protected] (EricYuan)</managingEditor>
<webMaster>[email protected] (EricYuan)</webMaster><lastBuildDate>Wed, 21 Feb 2024 00:00:00 &#43;0000</lastBuildDate>
<webMaster>[email protected] (EricYuan)</webMaster><lastBuildDate>Tue, 30 Apr 2024 00:00:00 &#43;0000</lastBuildDate>
<atom:link href="http://localhost:1313/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Mysql_1_基础</title>
Expand Down Expand Up @@ -120,13 +120,11 @@ useMemo 是加在数据上的缓存,而 memo api 是加在组件上的,只
useCallbackconst cachedFn = useCallback(fn, dependencies)
reference useMemo useCallback ]]></description>
</item><item>
<title>滑动窗口</title>
<link>http://localhost:1313/%E6%BB%91%E5%8A%A8%E7%AA%97%E5%8F%A3/</link>
<pubDate>Wed, 21 Feb 2024 00:00:00 &#43;0000</pubDate><author>
<title>Vue 源码中的设计美学</title>
<link>http://localhost:1313/vue%E6%BA%90%E7%A0%81%E4%B8%AD%E7%9A%84%E8%AE%BE%E8%AE%A1%E7%BE%8E%E5%AD%A6/</link>
<pubDate>Tue, 30 Apr 2024 00:00:00 &#43;0000</pubDate><author>
<name>EricYuan</name>
</author><guid>http://localhost:1313/%E6%BB%91%E5%8A%A8%E7%AA%97%E5%8F%A3/</guid>
<description><![CDATA[核心滑动窗口的核心就是维持一个 [i..j) 的区间窗口,在数据上游走,来获取到需要的信息,在数组,字符串等中的表现,往往如下:
function slideWindow() { // 前后快慢双指针 let left = 0 let right = 0 /** 具体的条件逻辑根据实际问题实际处理,多做练习 */ while(slide condition) { window.push(s[left]) // s 为总数据(字符串、数组) right++ while(shrink condition) { window.shift(s[left]) left++ } } } 滑动窗口的算法时间复杂度为 O(n),适用于处理大型数据集
练一练 lc.3 无重复字符的最长子串/** * @param {string} s * @return {number} */ var lengthOfLongestSubstring = function (s) { let max = 0 let l = 0, r = 0 let window = {} while (r &lt; s.]]></description>
</author><guid>http://localhost:1313/vue%E6%BA%90%E7%A0%81%E4%B8%AD%E7%9A%84%E8%AE%BE%E8%AE%A1%E7%BE%8E%E5%AD%A6/</guid>
<description><![CDATA[ 为什么能通过 this.xxx 就能访问到对应的 methods 和 datafunction test { this.name = &#39;hello world&#39; } ]]></description>
</item></channel>
</rss>
1 change: 1 addition & 0 deletions public/js/giscus.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions public/posts/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,9 @@
<a href="/%E5%9B%BE/" class="archive-item-link"></a>
<span class="archive-item-date">04-03</span>
</article><h3 class="group-title">2024</h3><article class="archive-item">
<a href="/vue%E6%BA%90%E7%A0%81%E4%B8%AD%E7%9A%84%E8%AE%BE%E8%AE%A1%E7%BE%8E%E5%AD%A6/" class="archive-item-link">Vue 源码中的设计美学</a>
<span class="archive-item-date">04-30</span>
</article><article class="archive-item">
<a href="/%E6%BB%91%E5%8A%A8%E7%AA%97%E5%8F%A3/" class="archive-item-link">滑动窗口</a>
<span class="archive-item-date">02-21</span>
</article><article class="archive-item">
Expand Down Expand Up @@ -209,9 +212,6 @@
</article><article class="archive-item">
<a href="/%E6%B7%B1%E5%85%A5package.json/" class="archive-item-link">深入package.json</a>
<span class="archive-item-date">03-24</span>
</article><article class="archive-item">
<a href="/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F--%E8%A1%8C%E4%B8%BA%E5%9E%8B/" class="archive-item-link">重学设计模式 -- 行为型</a>
<span class="archive-item-date">03-15</span>
</article><ul class="pagination"><li class="page-item active">
<span class="page-link">
<a href="/posts/">1</a>
Expand Down
14 changes: 6 additions & 8 deletions public/posts/index.xml
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<link>http://localhost:1313/posts/</link>
<description>所有文章 | Hello World</description>
<generator>Hugo -- gohugo.io</generator><language>zh-CN</language><managingEditor>[email protected] (EricYuan)</managingEditor>
<webMaster>[email protected] (EricYuan)</webMaster><lastBuildDate>Wed, 21 Feb 2024 00:00:00 &#43;0000</lastBuildDate><atom:link href="http://localhost:1313/posts/" rel="self" type="application/rss+xml" /><item>
<webMaster>[email protected] (EricYuan)</webMaster><lastBuildDate>Tue, 30 Apr 2024 00:00:00 &#43;0000</lastBuildDate><atom:link href="http://localhost:1313/posts/" rel="self" type="application/rss+xml" /><item>
<title>Mysql_1_基础</title>
<link>http://localhost:1313/mysql_1/</link>
<pubDate>Thu, 30 Nov 2023 15:42:23 &#43;0800</pubDate><author>
Expand Down Expand Up @@ -118,13 +118,11 @@ useMemo 是加在数据上的缓存,而 memo api 是加在组件上的,只
useCallbackconst cachedFn = useCallback(fn, dependencies)
reference useMemo useCallback ]]></description>
</item><item>
<title>滑动窗口</title>
<link>http://localhost:1313/%E6%BB%91%E5%8A%A8%E7%AA%97%E5%8F%A3/</link>
<pubDate>Wed, 21 Feb 2024 00:00:00 &#43;0000</pubDate><author>
<title>Vue 源码中的设计美学</title>
<link>http://localhost:1313/vue%E6%BA%90%E7%A0%81%E4%B8%AD%E7%9A%84%E8%AE%BE%E8%AE%A1%E7%BE%8E%E5%AD%A6/</link>
<pubDate>Tue, 30 Apr 2024 00:00:00 &#43;0000</pubDate><author>
<name>EricYuan</name>
</author><guid>http://localhost:1313/%E6%BB%91%E5%8A%A8%E7%AA%97%E5%8F%A3/</guid>
<description><![CDATA[核心滑动窗口的核心就是维持一个 [i..j) 的区间窗口,在数据上游走,来获取到需要的信息,在数组,字符串等中的表现,往往如下:
function slideWindow() { // 前后快慢双指针 let left = 0 let right = 0 /** 具体的条件逻辑根据实际问题实际处理,多做练习 */ while(slide condition) { window.push(s[left]) // s 为总数据(字符串、数组) right++ while(shrink condition) { window.shift(s[left]) left++ } } } 滑动窗口的算法时间复杂度为 O(n),适用于处理大型数据集
练一练 lc.3 无重复字符的最长子串/** * @param {string} s * @return {number} */ var lengthOfLongestSubstring = function (s) { let max = 0 let l = 0, r = 0 let window = {} while (r &lt; s.]]></description>
</author><guid>http://localhost:1313/vue%E6%BA%90%E7%A0%81%E4%B8%AD%E7%9A%84%E8%AE%BE%E8%AE%A1%E7%BE%8E%E5%AD%A6/</guid>
<description><![CDATA[ 为什么能通过 this.xxx 就能访问到对应的 methods 和 datafunction test { this.name = &#39;hello world&#39; } ]]></description>
</item></channel>
</rss>
6 changes: 3 additions & 3 deletions public/posts/page/2/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,9 @@
<div id="search-dropdown-mobile"></div>
</div><main class="main">
<div class="container"><div class="page archive"><h2 class="single-title animate__animated animate__pulse animate__faster">所有文章</h2><h3 class="group-title">2023</h3><article class="archive-item">
<a href="/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F--%E8%A1%8C%E4%B8%BA%E5%9E%8B/" class="archive-item-link">重学设计模式 -- 行为型</a>
<span class="archive-item-date">03-15</span>
</article><article class="archive-item">
<a href="/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F--%E7%BB%93%E6%9E%84%E5%9E%8B/" class="archive-item-link">重学设计模式 -- 结构型</a>
<span class="archive-item-date">03-13</span>
</article><article class="archive-item">
Expand Down Expand Up @@ -200,9 +203,6 @@
</article><article class="archive-item">
<a href="/%E7%BB%8F%E5%85%B8%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80/" class="archive-item-link">经典三栏布局</a>
<span class="archive-item-date">09-27</span>
</article><article class="archive-item">
<a href="/sc/" class="archive-item-link">层叠上下文(SC)</a>
<span class="archive-item-date">09-27</span>
</article><ul class="pagination"><li class="page-item ">
<span class="page-link">
<a href="/posts/">1</a>
Expand Down
6 changes: 3 additions & 3 deletions public/posts/page/3/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,9 @@
<div id="search-dropdown-mobile"></div>
</div><main class="main">
<div class="container"><div class="page archive"><h2 class="single-title animate__animated animate__pulse animate__faster">所有文章</h2><h3 class="group-title">2022</h3><article class="archive-item">
<a href="/sc/" class="archive-item-link">层叠上下文(SC)</a>
<span class="archive-item-date">09-27</span>
</article><article class="archive-item">
<a href="/bfc/" class="archive-item-link">块级格式化上下文(BFC)</a>
<span class="archive-item-date">09-27</span>
</article><article class="archive-item">
Expand Down Expand Up @@ -200,9 +203,6 @@
</article><article class="archive-item">
<a href="/koa%E6%B4%8B%E8%91%B1%E6%A8%A1%E5%9E%8B/" class="archive-item-link">Koa洋葱模型</a>
<span class="archive-item-date">09-20</span>
</article><article class="archive-item">
<a href="/babel/" class="archive-item-link">Babel</a>
<span class="archive-item-date">09-20</span>
</article><ul class="pagination"><li class="page-item ">
<span class="page-link">
<a href="/posts/">1</a>
Expand Down
3 changes: 3 additions & 0 deletions public/posts/page/4/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,9 @@
<div id="search-dropdown-mobile"></div>
</div><main class="main">
<div class="container"><div class="page archive"><h2 class="single-title animate__animated animate__pulse animate__faster">所有文章</h2><h3 class="group-title">2022</h3><article class="archive-item">
<a href="/babel/" class="archive-item-link">Babel</a>
<span class="archive-item-date">09-20</span>
</article><article class="archive-item">
<a href="/node%E7%9A%84%E7%89%B9%E7%82%B9/" class="archive-item-link">Node的特点</a>
<span class="archive-item-date">09-20</span>
</article><article class="archive-item">
Expand Down
Loading

0 comments on commit 37a6141

Please sign in to comment.