-
Notifications
You must be signed in to change notification settings - Fork 16
/
21.Vue 常考进阶知识点.htm
265 lines (261 loc) · 49.1 KB
/
21.Vue 常考进阶知识点.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!DOCTYPE html>
<!-- saved from url=(0080)https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5bdc7327f265da616b102924 -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover"><meta name="google-site-verification" content="cCHsgG9ktuCTgWgYfqCJql8AeR4gAne4DTZqztPoirE"><meta name="apple-itunes-app" content="app-id=987739104"><meta name="baidu-site-verification" content="qiK2a1kcFc"><meta name="360-site-verification" content="4c3c7d57d59f0e1a308462fbc7fd7e51"><meta name="sogou_site_verification" content="c49WUDZczQ"><style>body {
font-size: 16px;
line-height: 2;
}
a, button, input {
margin: 1rem 1.5rem;
}
img {
width: 0;
height: 0;
}
#juejin {
overflow-x: hidden;
}</style><title data-vue-meta="true">前端面试之道 - yck - 掘金小册</title><link rel="apple-touch-icon" sizes="180x180" href="https://b-gold-cdn.xitu.io/favicons/v2/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon-16x16.png"><link rel="manifest" href="https://b-gold-cdn.xitu.io/favicons/v2/manifest.json"><link rel="mask-icon" href="https://b-gold-cdn.xitu.io/favicons/v2/safari-pinned-tab.svg" color="#5bbad5"><link rel="shortcut icon" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon.ico"><meta name="msapplication-config" content="https://b-gold-cdn.xitu.io/favicons/v2/browserconfig.xml"><meta name="theme-color" content="#ffffff"><link rel="search" title="掘金" href="https://b-gold-cdn.xitu.io/conf/search.xml" type="application/opensearchdescription+xml"><link rel="stylesheet" href="./21.Vue 常考进阶知识点_files/ionicons.min.css"><link rel="stylesheet" href="./21.Vue 常考进阶知识点_files/iconfont.css"><link href="./21.Vue 常考进阶知识点_files/0.f53dd8c7dec37187a1f0.css" rel="stylesheet"><script async="" src="./21.Vue 常考进阶知识点_files/hm.js"></script><script async="" src="./21.Vue 常考进阶知识点_files/analytics.js"></script><script type="text/javascript" async="" src="./21.Vue 常考进阶知识点_files/vds.js"></script><script charset="utf-8" src="./21.Vue 常考进阶知识点_files/13.be327205e46595a11182.js"></script><meta data-vmid="keywords" name="keywords" content="掘金,稀土,Vue.js,微信小程序,Kotlin,RxJava,React Native,Wireshark,敏捷开发,Bootstrap,OKHttp,正则表达式,WebGL,Webpack,Docker,MVVM" data-vue-meta="true"><meta data-vmid="description" name="description" content="掘金是一个帮助开发者成长的社区，是给开发者用的 Hacker News，给设计师用的 Designer News，和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货，其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时，掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户，我们相信你也可以在这里有所收获。" data-vue-meta="true"></head><body><div id="juejin" data-v-c5c2a81e=""><div class="global-component-box" data-v-c5c2a81e=""><!----><div data-v-c8da6528="" data-v-c5c2a81e="" class="alert-list alert-list"></div><!----><!----><!----><div class="emoji-barrage" data-v-beb06b1a="" data-v-c5c2a81e=""><!----></div><div class="book-new-user-award-popup" style="display:none;" data-v-40eb6fce="" data-v-c5c2a81e=""><div class="content-box" style="display:;" data-v-40eb6fce=""><div class="close ion-close-round" data-v-40eb6fce=""></div><div class="header" data-v-40eb6fce=""><div class="icon" data-v-40eb6fce=""><img src="./21.Vue 常考进阶知识点_files/icon.a87e5ae.svg" data-v-40eb6fce=""></div><div class="txt" data-v-40eb6fce="">新人专享好礼</div></div><div class="desc" data-v-40eb6fce="">凡未购买过小册的用户，均可领取三张 5 折新人专享券，购买小册时自动使用专享券，最高可节省 45 元。</div><div class="tickets" data-v-40eb6fce=""><div class="ticket" data-v-40eb6fce=""><div class="ticket__inner" data-v-40eb6fce=""><div class="enjoy" data-v-40eb6fce=""><span class="new-title" data-v-40eb6fce="">小册新人 5 折券</span></div><div class="sale" data-v-40eb6fce="">最高可省 15 元</div></div></div><div class="ticket" data-v-40eb6fce=""><div class="ticket__inner" data-v-40eb6fce=""><div class="enjoy" data-v-40eb6fce=""><span class="new-title" data-v-40eb6fce="">小册新人 5 折券</span></div><div class="sale" data-v-40eb6fce="">最高可省 15 元</div></div></div><div class="ticket" data-v-40eb6fce=""><div class="ticket__inner" data-v-40eb6fce=""><div class="enjoy" data-v-40eb6fce=""><span class="new-title" data-v-40eb6fce="">小册新人 5 折券</span></div><div class="sale" data-v-40eb6fce="">最高可省 15 元</div></div></div></div><div class="remark" data-v-40eb6fce="">注：专享券的使用期限在领券的七天内。</div><div class="submit-btn" data-v-40eb6fce="">一键领取</div></div><div class="model success" style="display:none;" data-v-40eb6fce=""><div class="heading" data-v-40eb6fce="">领取成功</div><div class="content-text" data-v-40eb6fce="">购买小册时自动使用专享券</div><div class="btn-success-footer" data-v-40eb6fce=""><div class="btn-ok" data-v-40eb6fce="">知道了</div><div class="btn-ok btn-link" data-v-40eb6fce="">前往小册首页</div></div></div><div class="model fail" style="display:none;" data-v-40eb6fce=""><div class="heading" data-v-40eb6fce="">领取失败</div><div class="content-text" data-v-40eb6fce="">本活动仅适用于小册新用户</div><div class="btn-ok" data-v-40eb6fce="">知道了</div></div></div><!----></div><!----><div data-v-25b273c2="" data-v-c5c2a81e="" class="book-read-view"><section data-v-25b273c2="" class="book-section"><div data-v-25b273c2="" class="book-summary"><div data-v-25b273c2="" class="book-summary-masker"></div><div data-v-25b273c2="" class="book-summary-inner"><div data-v-25b273c2="" class="book-summary__header"><a data-v-25b273c2="" href="https://juejin.im/books" target="" rel="" class="logo"><img data-v-25b273c2="" src="./21.Vue 常考进阶知识点_files/logo.a7995ad.svg"></a><div data-v-25b273c2="" class="label">小册</div><!----></div><!----><div data-v-d0eb2184="" data-v-25b273c2="" class="book-directory book-directory bought"><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">1</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">小册食用指南</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">2</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 基础知识点及常考面试题（一）</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">3</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 基础知识点及常考面试题（二）</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">4</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">ES6 知识点及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">5</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 异步编程及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">6</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">手写 Promise</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">7</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Event Loop</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">8</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 进阶知识点及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">9</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 思考题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">10</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">DevTools Tips</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">11</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">浏览器基础知识点及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">12</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">浏览器缓存机制</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">13</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">浏览器渲染原理</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">14</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">安全防范知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">15</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">从 V8 中看 JS 性能优化</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">16</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">性能优化琐碎事</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">17</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Webpack 性能优化</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">18</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">实现小型打包工具</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">19</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">React 和 Vue 两大框架之间的相爱相杀</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">20</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Vue 常考基础知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section route-active section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">21</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Vue 常考进阶知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">22</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">React 常用知识点</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">23</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">React 进阶</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">24</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">监控</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">25</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">TCP / UDP</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">26</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">HTTP 及 TLS</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">27</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">HTTP 2.0</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">28</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">输入 URL 到页面渲染的整个流程</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">29</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">设计模式</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">30</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">常见数据结构</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">31</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">常考算法题解析</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">32</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">CSS 常考面试题解析</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">33</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">如何写好一封简历</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">34</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">面试常用技巧</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">35</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">前方的路，让我们结伴同行</div><!----><!----></div><!----></a></div><div data-v-25b273c2="" class="book-summary__footer"><div data-v-25b273c2="" class="qr-icon"><img data-v-25b273c2="" src="./21.Vue 常考进阶知识点_files/qr-icon.881015a.svg"></div><div data-v-25b273c2="" class="qr-tips"><span data-v-25b273c2="" class="ion-close"></span><div data-v-25b273c2="" class="title"><span data-v-25b273c2="">关注公众号</span><span data-v-25b273c2="">领取优惠码</span></div><div data-v-25b273c2="" class="qr-img"><img data-v-25b273c2="" src="./21.Vue 常考进阶知识点_files/wx-qr.13d8b4d.png"></div></div></div></div></div><div data-v-25b273c2="" class="book-content"><div data-v-25b273c2="" class="book-content-inner"><div data-v-25b273c2="" class="book-content__header visible"><div data-v-25b273c2="" class="switch"><img data-v-25b273c2="" src="./21.Vue 常考进阶知识点_files/icon.3e69d5a.svg"></div><div data-v-25b273c2="" class="menu"><img data-v-25b273c2="" src="./21.Vue 常考进阶知识点_files/menu.74b9add.svg"></div><div data-v-25b273c2="" class="title"><a data-v-25b273c2="" href="https://juejin.im/book/5bdc715fe51d454e755f75ef" target="" rel="">前端面试之道</a></div><div data-v-e1714a36="" data-v-25b273c2="" class="user-auth user-auth"><div data-v-e1714a36="" class="nav-item menu"><div data-v-57c47624="" data-v-cf310dfc="" data-v-e1714a36="" data-src="https://avatars0.githubusercontent.com/u/33979626?v=4" class="lazy avatar avatar loaded" style="background-image: url("https://avatars0.githubusercontent.com/u/33979626?v=4");"></div><div data-v-e1714a36="" class="nav-menu user-dropdown-list" style="display: none;"><ul data-v-e1714a36="" class="nav-menu-item-group"><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36=""><i data-v-e1714a36="" class="fengwei fw-write"></i><span data-v-e1714a36="">写文章</span></a></li><!----><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36=""><i data-v-e1714a36="" class="fengwei fw-draft"></i><span data-v-e1714a36="">草稿</span></a></li></ul><ul data-v-e1714a36="" class="nav-menu-item-group"><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://juejin.im/user/5aa105a7518825555f0c8a90"><i data-v-e1714a36="" class="fengwei fw-person"></i><span data-v-e1714a36="">我的主页</span></a></li><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://juejin.im/user/5aa105a7518825555f0c8a90/likes"><i data-v-e1714a36="" class="fengwei fw-like"></i><span data-v-e1714a36="">我喜欢的</span></a></li><!----><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://juejin.im/user/5aa105a7518825555f0c8a90/collections"><i data-v-e1714a36="" class="fengwei fw-collection"></i><span data-v-e1714a36="">我的收藏集</span></a></li><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://juejin.im/user/5aa105a7518825555f0c8a90/books?type=bought"><i data-v-e1714a36="" class="fengwei fw-bought"></i><span data-v-e1714a36="">已购</span></a></li><!----><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://juejin.im/subscribe"><i data-v-e1714a36="" class="fengwei fw-tag"></i><span data-v-e1714a36="">标签管理</span></a></li></ul><ul data-v-e1714a36="" class="nav-menu-item-group"><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://juejin.im/user/settings"><i data-v-e1714a36="" class="fengwei fw-setting"></i><span data-v-e1714a36="">设置</span></a></li><li data-v-e1714a36="" class="nav-menu-item more"><a data-v-e1714a36=""><i data-v-e1714a36="" class="fengwei fw-info"></i><span data-v-e1714a36="">关于</span><i data-v-e1714a36="" class="ion-chevron-right more-icon"></i></a><div data-v-e1714a36="" class="nav-menu more-dropdown-list"><ul data-v-e1714a36="" class="nav-menu-item-group"><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://juejin.im/app" target="_blank">下载应用</a></li><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://juejin.im/about" target="_blank">关于</a></li><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://xitu.io/jobs" target="_blank">加入我们</a></li><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://github.com/xitu/gold-miner" rel="nofollow noopener noreferrer" target="_blank">翻译计划</a></li><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://bd.juejin.im/?utm_campaign=bd&utm_source=web&utm_medium=nav" target="_blank">合作伙伴</a></li></ul></div></li></ul><ul data-v-e1714a36="" class="nav-menu-item-group"><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36=""><i data-v-e1714a36="" class="fengwei fw-logout"></i><span data-v-e1714a36="">登出</span></a></li></ul></div></div><!----></div><!----></div><div data-v-25b273c2="" class="book-body transition--next"><div data-v-b0f6a942="" data-v-25b273c2="" class="section-view book-section-content"><div data-v-ecce5e7e="" data-v-b0f6a942="" class="section-content"><div data-v-ecce5e7e="" class="section-page book-section-view"><div data-v-ecce5e7e="" class="entry-content article-content"><h1 class="heading" data-id="heading-0">Vue 常考进阶知识点</h1>
<p>这一章节我们将来学习 Vue 的一些经常考到的进阶知识点。这些知识点相对而言理解起来会很有难度，可能需要多次阅读才能理解。</p>
<h2 class="heading" data-id="heading-1">响应式原理</h2>
<p>Vue 内部使用了 <code>Object.defineProperty()</code> 来实现数据响应式，通过这个函数可以监听到 <code>set</code> 和 <code>get</code> 的事件。</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">var</span> data = { <span class="hljs-attr">name</span>: <span class="hljs-string">'yck'</span> }
observe(data)
<span class="hljs-keyword">let</span> name = data.name <span class="hljs-comment">// -> get value</span>
data.name = <span class="hljs-string">'yyy'</span> <span class="hljs-comment">// -> change value</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">observe</span>(<span class="hljs-params">obj</span>) </span>{
<span class="hljs-comment">// 判断类型</span>
<span class="hljs-keyword">if</span> (!obj || <span class="hljs-keyword">typeof</span> obj !== <span class="hljs-string">'object'</span>) {
<span class="hljs-keyword">return</span>
}
<span class="hljs-built_in">Object</span>.keys(obj).forEach(<span class="hljs-function"><span class="hljs-params">key</span> =></span> {
defineReactive(obj, key, obj[key])
})
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">defineReactive</span>(<span class="hljs-params">obj, key, val</span>) </span>{
<span class="hljs-comment">// 递归子属性</span>
observe(val)
<span class="hljs-built_in">Object</span>.defineProperty(obj, key, {
<span class="hljs-comment">// 可枚举</span>
enumerable: <span class="hljs-literal">true</span>,
<span class="hljs-comment">// 可配置</span>
configurable: <span class="hljs-literal">true</span>,
<span class="hljs-comment">// 自定义函数</span>
get: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">reactiveGetter</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'get value'</span>)
<span class="hljs-keyword">return</span> val
},
<span class="hljs-attr">set</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">reactiveSetter</span>(<span class="hljs-params">newVal</span>) </span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'change value'</span>)
val = newVal
}
})
}
</code></pre><p>以上代码简单的实现了如何监听数据的 <code>set</code> 和 <code>get</code> 的事件，但是仅仅如此是不够的，因为自定义的函数一开始是不会执行的。只有先执行了依赖收集，从能在属性更新的时候派发更新，所以接下来我们需要先触发依赖收集。</p>
<pre><code class="hljs html" lang="html"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
{{name}}
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre><p>在解析如上模板代码时，遇到 <code>{{name}}</code> 就会进行依赖收集。</p>
<p>接下来我们先来实现一个 <code>Dep</code> 类，用于解耦属性的依赖收集和派发更新操作。</p>
<pre><code class="hljs js" lang="js"><span class="hljs-comment">// 通过 Dep 解耦属性的依赖和更新操作</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Dep</span> </span>{
<span class="hljs-keyword">constructor</span>() {
<span class="hljs-keyword">this</span>.subs = []
}
<span class="hljs-comment">// 添加依赖</span>
addSub(sub) {
<span class="hljs-keyword">this</span>.subs.push(sub)
}
<span class="hljs-comment">// 更新</span>
notify() {
<span class="hljs-keyword">this</span>.subs.forEach(<span class="hljs-function"><span class="hljs-params">sub</span> =></span> {
sub.update()
})
}
}
<span class="hljs-comment">// 全局属性，通过该属性配置 Watcher</span>
Dep.target = <span class="hljs-literal">null</span>
</code></pre><p>以上的代码实现很简单，当需要依赖收集的时候调用 <code>addSub</code>，当需要派发更新的时候调用 <code>notify</code>。</p>
<p>接下来我们先来简单的了解下 Vue 组件挂载时添加响应式的过程。在组件挂载时，会先对所有需要的属性调用 <code>Object.defineProperty()</code>，然后实例化 <code>Watcher</code>，传入组件更新的回调。在实例化过程中，会对模板中的属性进行求值，触发依赖收集。</p>
<p>因为这一小节主要目的是学习响应式原理的细节，所以接下来的代码会简略的表达触发依赖收集时的操作。</p>
<pre><code class="hljs js" lang="js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Watcher</span> </span>{
<span class="hljs-keyword">constructor</span>(obj, key, cb) {
<span class="hljs-comment">// 将 Dep.target 指向自己</span>
<span class="hljs-comment">// 然后触发属性的 getter 添加监听</span>
<span class="hljs-comment">// 最后将 Dep.target 置空</span>
Dep.target = <span class="hljs-keyword">this</span>
<span class="hljs-keyword">this</span>.cb = cb
<span class="hljs-keyword">this</span>.obj = obj
<span class="hljs-keyword">this</span>.key = key
<span class="hljs-keyword">this</span>.value = obj[key]
Dep.target = <span class="hljs-literal">null</span>
}
update() {
<span class="hljs-comment">// 获得新值</span>
<span class="hljs-keyword">this</span>.value = <span class="hljs-keyword">this</span>.obj[<span class="hljs-keyword">this</span>.key]
<span class="hljs-comment">// 调用 update 方法更新 Dom</span>
<span class="hljs-keyword">this</span>.cb(<span class="hljs-keyword">this</span>.value)
}
}
</code></pre><p>以上就是 <code>Watcher</code> 的简单实现，在执行构造函数的时候将 <code>Dep.target</code> 指向自身，从而使得收集到了对应的 <code>Watcher</code>，在派发更新的时候取出对应的 <code>Watcher</code> 然后执行 <code>update</code> 函数。</p>
<p>接下来，需要对 <code>defineReactive</code> 函数进行改造，在自定义函数中添加依赖收集和派发更新相关的代码。</p>
<pre><code class="hljs js" lang="js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">defineReactive</span>(<span class="hljs-params">obj, key, val</span>) </span>{
<span class="hljs-comment">// 递归子属性</span>
observe(val)
<span class="hljs-keyword">let</span> dp = <span class="hljs-keyword">new</span> Dep()
<span class="hljs-built_in">Object</span>.defineProperty(obj, key, {
<span class="hljs-attr">enumerable</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">configurable</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">get</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">reactiveGetter</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'get value'</span>)
<span class="hljs-comment">// 将 Watcher 添加到订阅</span>
<span class="hljs-keyword">if</span> (Dep.target) {
dp.addSub(Dep.target)
}
<span class="hljs-keyword">return</span> val
},
<span class="hljs-attr">set</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">reactiveSetter</span>(<span class="hljs-params">newVal</span>) </span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'change value'</span>)
val = newVal
<span class="hljs-comment">// 执行 watcher 的 update 方法</span>
dp.notify()
}
})
}
</code></pre><p>以上所有代码实现了一个简易的数据响应式，核心思路就是手动触发一次属性的 getter 来实现依赖收集。</p>
<p>现在我们就来测试下代码的效果，只需要把所有的代码复制到浏览器中执行，就会发现页面的内容全部被替换了。</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">var</span> data = { <span class="hljs-attr">name</span>: <span class="hljs-string">'yck'</span> }
observe(data)
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">update</span>(<span class="hljs-params">value</span>) </span>{
<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'div'</span>).innerText = value
}
<span class="hljs-comment">// 模拟解析到 `{{name}}` 触发的操作</span>
<span class="hljs-keyword">new</span> Watcher(data, <span class="hljs-string">'name'</span>, update)
<span class="hljs-comment">// update Dom innerText</span>
data.name = <span class="hljs-string">'yyy'</span>
</code></pre><h3 class="heading" data-id="heading-2">Object.defineProperty 的缺陷</h3>
<p>以上已经分析完了 Vue 的响应式原理，接下来说一点 <code>Object.defineProperty</code> 中的缺陷。</p>
<p>如果通过下标方式修改数组数据或者给对象新增属性并不会触发组件的重新渲染，因为 <code>Object.defineProperty</code> 不能拦截到这些操作，更精确的来说，对于数组而言，大部分操作都是拦截不到的，只是 Vue 内部通过重写函数的方式解决了这个问题。</p>
<p>对于第一个问题，Vue 提供了一个 API 解决</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">set</span> (<span class="hljs-params">target: Array<any> | Object, key: any, val: any</span>): <span class="hljs-title">any</span> </span>{
<span class="hljs-comment">// 判断是否为数组且下标是否有效</span>
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">Array</span>.isArray(target) && isValidArrayIndex(key)) {
<span class="hljs-comment">// 调用 splice 函数触发派发更新</span>
<span class="hljs-comment">// 该函数已被重写</span>
target.length = <span class="hljs-built_in">Math</span>.max(target.length, key)
target.splice(key, <span class="hljs-number">1</span>, val)
<span class="hljs-keyword">return</span> val
}
<span class="hljs-comment">// 判断 key 是否已经存在</span>
<span class="hljs-keyword">if</span> (key <span class="hljs-keyword">in</span> target && !(key <span class="hljs-keyword">in</span> <span class="hljs-built_in">Object</span>.prototype)) {
target[key] = val
<span class="hljs-keyword">return</span> val
}
<span class="hljs-keyword">const</span> ob = (target: any).__ob__
<span class="hljs-comment">// 如果对象不是响应式对象，就赋值返回</span>
<span class="hljs-keyword">if</span> (!ob) {
target[key] = val
<span class="hljs-keyword">return</span> val
}
<span class="hljs-comment">// 进行双向绑定</span>
defineReactive(ob.value, key, val)
<span class="hljs-comment">// 手动派发更新</span>
ob.dep.notify()
<span class="hljs-keyword">return</span> val
}
</code></pre><p>对于数组而言，Vue 内部重写了以下函数实现派发更新</p>
<pre><code class="hljs js" lang="js"><span class="hljs-comment">// 获得数组原型</span>
<span class="hljs-keyword">const</span> arrayProto = <span class="hljs-built_in">Array</span>.prototype
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> arrayMethods = <span class="hljs-built_in">Object</span>.create(arrayProto)
<span class="hljs-comment">// 重写以下函数</span>
<span class="hljs-keyword">const</span> methodsToPatch = [
<span class="hljs-string">'push'</span>,
<span class="hljs-string">'pop'</span>,
<span class="hljs-string">'shift'</span>,
<span class="hljs-string">'unshift'</span>,
<span class="hljs-string">'splice'</span>,
<span class="hljs-string">'sort'</span>,
<span class="hljs-string">'reverse'</span>
]
methodsToPatch.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">method</span>) </span>{
<span class="hljs-comment">// 缓存原生函数</span>
<span class="hljs-keyword">const</span> original = arrayProto[method]
<span class="hljs-comment">// 重写函数</span>
def(arrayMethods, method, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">mutator</span> (<span class="hljs-params">...args</span>) </span>{
<span class="hljs-comment">// 先调用原生函数获得结果</span>
<span class="hljs-keyword">const</span> result = original.apply(<span class="hljs-keyword">this</span>, args)
<span class="hljs-keyword">const</span> ob = <span class="hljs-keyword">this</span>.__ob__
<span class="hljs-keyword">let</span> inserted
<span class="hljs-comment">// 调用以下几个函数时，监听新数据</span>
<span class="hljs-keyword">switch</span> (method) {
<span class="hljs-keyword">case</span> <span class="hljs-string">'push'</span>:
<span class="hljs-keyword">case</span> <span class="hljs-string">'unshift'</span>:
inserted = args
<span class="hljs-keyword">break</span>
<span class="hljs-keyword">case</span> <span class="hljs-string">'splice'</span>:
inserted = args.slice(<span class="hljs-number">2</span>)
<span class="hljs-keyword">break</span>
}
<span class="hljs-keyword">if</span> (inserted) ob.observeArray(inserted)
<span class="hljs-comment">// 手动派发更新</span>
ob.dep.notify()
<span class="hljs-keyword">return</span> result
})
})
</code></pre><h2 class="heading" data-id="heading-3">编译过程</h2>
<p>想必大家在使用 Vue 开发的过程中，基本都是使用模板的方式。那么你有过「模板是怎么在浏览器中运行的」这种疑虑嘛？</p>
<p>首先直接把模板丢到浏览器中肯定是不能运行的，模板只是为了方便开发者进行开发。Vue 会通过编译器将模板通过几个阶段最终编译为 <code>render</code> 函数，然后通过执行 <code>render</code> 函数生成 Virtual DOM 最终映射为真实 DOM。</p>
<p>接下来我们就来学习这个编译的过程，了解这个过程中大概发生了什么事情。这个过程其中又分为三个阶段，分别为：</p>
<ol>
<li>将模板解析为 AST</li>
<li>优化 AST</li>
<li>将 AST 转换为 <code>render</code> 函数</li>
</ol>
<p>在第一个阶段中，最主要的事情还是通过各种各样的正则表达式去匹配模板中的内容，然后将内容提取出来做各种逻辑操作，接下来会生成一个最基本的 AST 对象</p>
<pre><code class="hljs js" lang="js">{
<span class="hljs-comment">// 类型</span>
type: <span class="hljs-number">1</span>,
<span class="hljs-comment">// 标签</span>
tag,
<span class="hljs-comment">// 属性列表</span>
attrsList: attrs,
<span class="hljs-comment">// 属性映射</span>
attrsMap: makeAttrsMap(attrs),
<span class="hljs-comment">// 父节点</span>
parent,
<span class="hljs-comment">// 子节点</span>
children: []
}
</code></pre><p>然后会根据这个最基本的 AST 对象中的属性，进一步扩展 AST。</p>
<p>当然在这一阶段中，还会进行其他的一些判断逻辑。比如说对比前后开闭标签是否一致，判断根组件是否只存在一个，判断是否符合 HTML5 <a target="_blank" href="https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FGuide%2FHTML%2FContent_categories" rel="nofollow noopener noreferrer">Content Model</a> 规范等等问题。</p>
<p>接下来就是优化 AST 的阶段。在当前版本下，Vue 进行的优化内容其实还是不多的。只是对节点进行了静态内容提取，也就是将永远不会变动的节点提取了出来，实现复用 Virtual DOM，跳过对比算法的功能。在下一个大版本中，Vue 会在优化 AST 的阶段继续发力，实现更多的优化功能，尽可能的在编译阶段压榨更多的性能，比如说提取静态的属性等等优化行为。</p>
<p>最后一个阶段就是通过 AST 生成 <code>render</code> 函数了。其实这一阶段虽然分支有很多，但是最主要的目的就是遍历整个 AST，根据不同的条件生成不同的代码罢了。</p>
<h2 class="heading" data-id="heading-4">NextTick 原理分析</h2>
<p><code>nextTick</code> 可以让我们在下次 DOM 更新循环结束之后执行延迟回调，用于获得更新后的 DOM。</p>
<p>在 Vue 2.4 之前都是使用的 microtasks，但是 microtasks 的优先级过高，在某些情况下可能会出现比事件冒泡更快的情况，但如果都使用 macrotasks 又可能会出现渲染的性能问题。所以在新版本中，会默认使用 microtasks，但在特殊情况下会使用 macrotasks，比如 v-on。</p>
<p>对于实现 macrotasks ，会先判断是否能使用 <code>setImmediate</code> ，不能的话降级为 <code>MessageChannel</code> ，以上都不行的话就使用 <code>setTimeout</code></p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> setImmediate !== <span class="hljs-string">'undefined'</span> && isNative(setImmediate)) {
macroTimerFunc = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
setImmediate(flushCallbacks)
}
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (
<span class="hljs-keyword">typeof</span> MessageChannel !== <span class="hljs-string">'undefined'</span> &&
(isNative(MessageChannel) ||
<span class="hljs-comment">// PhantomJS</span>
MessageChannel.toString() === <span class="hljs-string">'[object MessageChannelConstructor]'</span>)
) {
<span class="hljs-keyword">const</span> channel = <span class="hljs-keyword">new</span> MessageChannel()
<span class="hljs-keyword">const</span> port = channel.port2
channel.port1.onmessage = flushCallbacks
macroTimerFunc = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
port.postMessage(<span class="hljs-number">1</span>)
}
} <span class="hljs-keyword">else</span> {
macroTimerFunc = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
setTimeout(flushCallbacks, <span class="hljs-number">0</span>)
}
}
</code></pre><p>以上代码很简单，就是判断能不能使用相应的 API。</p>
<h2 class="heading" data-id="heading-5">小结</h2>
<p>以上就是 Vue 的几个高频核心问题了，如果你还想了解更多的源码相关的细节，强烈推荐黄老师的 <a target="_blank" href="https://link.juejin.im/?target=https%3A%2F%2Fustbhuangyi.github.io%2Fvue-analysis%2F" rel="nofollow noopener noreferrer">Vue 技术揭秘</a>。</p>
</div><section data-v-ecce5e7e="" class="book-comments"><div data-v-ecce5e7e="" class="box-title">留言</div><div data-v-ecce5e7e="" class="comment-box"><div data-v-1146c0e6="" data-v-ecce5e7e="" class="comment-form comment-form" id="comment"><div data-v-57c47624="" data-v-cf310dfc="" data-v-1146c0e6="" data-src="https://avatars0.githubusercontent.com/u/33979626?v=4" class="lazy avatar avatar loaded" style="background-image: url("https://avatars0.githubusercontent.com/u/33979626?v=4");"></div><textarea data-v-1146c0e6="" placeholder="评论将在后台进行审核，审核通过后对所有人可见" class="content-input" style="overflow: hidden; overflow-wrap: break-word; height: 60px;"></textarea><div data-v-1146c0e6="" class="action-box" style="display: none;"><div data-v-627e3889="" data-v-1146c0e6="" class="image-uploader image-uploader" style="display: none;"><input data-v-627e3889="" type="file" class="input"><button data-v-627e3889="" class="upload-btn"><i data-v-627e3889="" class="icon ion-image"></i><span data-v-627e3889="">上传图片</span></button></div><div data-v-1146c0e6="" class="submit-box"><span data-v-1146c0e6="" class="submit-text">Ctrl or ⌘ + Enter</span><button data-v-1146c0e6="" class="submit-btn">评论</button></div></div><!----></div></div><ul data-v-6adae277="" data-v-ecce5e7e="" st:block="commentList" class="comment-list comment-list"><li data-v-6adae277="" class="item"><div data-v-38783431="" data-v-6adae277="" class="comment"><div data-v-3a6943ce="" data-v-38783431="" st:block="userPopover" st:state="59959f3e6fb9a024927a199d" class="user-popover-box"><!----><a data-v-38783431="" href="https://juejin.im/user/59959f3e6fb9a024927a199d" target="_blank" rel="" data-v-3a6943ce=""><div data-v-57c47624="" data-v-cf310dfc="" data-v-38783431="" data-src="https://wx.qlogo.cn/mmopen/Z7bt2HkP1nW96uvO81dzh6lbQaM9azwpkR96FIybc0hH6Yr2MDSfDwwtN3YpeT1FLmvZwc48q67I6qvkPJddG2CrqjgkamAE/0" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-38783431="" class="content-box"><div data-v-38783431="" class="header"><div data-v-38783431="" class="user-info"><div data-v-3a6943ce="" data-v-38783431="" st:block="userPopover" st:state="59959f3e6fb9a024927a199d" class="user-popover-box"><!----><a data-v-38783431="" href="https://juejin.im/user/59959f3e6fb9a024927a199d" target="_blank" rel="" class="username" data-v-3a6943ce="">小林其</a></div><div data-v-38783431="" class="position">软件工程师 @ 没得公司</div></div></div><div data-v-38783431="" class="content"><!----><span data-v-38783431="" class="content-html">麻烦讲一下 可能用Proxy 实现的简易Vue版本，可能在面试里需要注意的细节？</span><!----></div><div data-v-38783431="" class="footer"><button data-v-38783431="" class="like-btn"><i data-v-38783431="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-38783431="">0</span></button><span data-v-38783431="" class="sub-comment-btn text-pointer"><span data-v-38783431="" class="title">收起评论</span><div data-v-38783431="" class="sub-comment--arrow" style=""></div></span><span data-v-38783431="" class="date">3天前</span><!----></div><div data-v-4afc11f9="" data-v-38783431="" class="sub-comment-box sub-comment-box"><div data-v-4afc11f9="" class="sub-comment-box__top"><div data-v-4afc11f9="" class="icon-close"></div><h3 data-v-4afc11f9="">评论</h3></div><div data-v-4afc11f9="" class="sub-comment-box__inner"><div data-v-4afc11f9=""><ul data-v-4afc11f9="" class="sub-comment-list"><li data-v-4afc11f9="" class="item"><div data-v-6fd44370="" data-v-4afc11f9="" class="sub-comment sub-comment"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="574f8d8d2e958a005fd4edac" class="user-popover-box user-popover--avatar"><!----><div data-v-57c47624="" data-v-cf310dfc="" data-v-6fd44370="" data-src="https://user-gold-cdn.xitu.io/2018/10/30/166c3fd3666b5d05?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar loaded" data-v-3a6943ce="" style="background-image: url("https://user-gold-cdn.xitu.io/2018/10/30/166c3fd3666b5d05?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1");"></div></div><div data-v-6fd44370="" class="content-box"><div data-v-6fd44370="" class="header"><div data-v-6fd44370="" class="user-info"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="574f8d8d2e958a005fd4edac" class="user-popover-box user-popover--info"><!----><a data-v-6fd44370="" href="https://juejin.im/user/574f8d8d2e958a005fd4edac" target="_blank" rel="" class="username" data-v-3a6943ce="">yck</a></div><div data-v-6fd44370="" class="position"></div></div></div><div data-v-6fd44370="" class="content"><!----><span data-v-6fd44370="" class="content-html">和当下的 Vue 的实现不同的地方，有什么优势</span><!----></div><div data-v-6fd44370="" class="footer"><span data-v-6fd44370="" class="date">2天前</span><a data-v-6fd44370="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-4afc11f9="" class="item"><div data-v-6fd44370="" data-v-4afc11f9="" class="sub-comment sub-comment"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="59959f3e6fb9a024927a199d" class="user-popover-box user-popover--avatar"><!----><div data-v-57c47624="" data-v-cf310dfc="" data-v-6fd44370="" data-src="https://wx.qlogo.cn/mmopen/Z7bt2HkP1nW96uvO81dzh6lbQaM9azwpkR96FIybc0hH6Yr2MDSfDwwtN3YpeT1FLmvZwc48q67I6qvkPJddG2CrqjgkamAE/0" class="lazy avatar avatar" data-v-3a6943ce="" style="background-image: none;"></div></div><div data-v-6fd44370="" class="content-box"><div data-v-6fd44370="" class="header"><div data-v-6fd44370="" class="user-info"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="59959f3e6fb9a024927a199d" class="user-popover-box user-popover--info"><!----><a data-v-6fd44370="" href="https://juejin.im/user/59959f3e6fb9a024927a199d" target="_blank" rel="" class="username" data-v-3a6943ce="">小林其</a></div><div data-v-6fd44370="" class="position">软件工程师 @ 没得公司</div></div></div><div data-v-6fd44370="" class="content"><!----><span data-v-6fd44370="" class="content-html">所以，Proxy 是不是能解决 Object.defineProperty 的缺陷？ （是不是可以拦截到通过下标方式修改数组数据或者给对象新增属性 等动作）</span><!----></div><div data-v-6fd44370="" class="footer"><span data-v-6fd44370="" class="date">6小时前</span><a data-v-6fd44370="" class="reply-btn">回复</a><!----></div></div><!----></div></li></ul><!----></div><form data-v-4afc11f9="" class="reply-form"><textarea data-v-4afc11f9="" rows="1" maxlength="1024" placeholder="评论审核通过后显示" style="overflow: hidden; overflow-wrap: break-word; height: 35px;"></textarea><button data-v-4afc11f9="" class="reply-btn">评论</button></form></div></div></div><!----></div></li><!----></ul></section></div></div><!----><!----></div></div><div data-v-06852630="" data-v-25b273c2="" class="book-handle book-direction" style=""><div data-v-06852630="" class="step-btn step-btn--prev"><img data-v-06852630="" src="./21.Vue 常考进阶知识点_files/prev.87ad47e.svg"></div><div data-v-06852630="" class="step-btn step-btn--next"><img data-v-06852630="" src="./21.Vue 常考进阶知识点_files/next.54d8a35.svg"></div><!----><!----></div><!----></div></div></section><!----><!----><!----><div data-v-2a6f6ec0="" data-v-25b273c2="" class="image-viewer-box"><!----></div></div><!----></div>
<script type="text/javascript" src="./21.Vue 常考进阶知识点_files/runtime.24cd77f11899da1ef6dd.js"></script><script type="text/javascript" src="./21.Vue 常考进阶知识点_files/0.2c5447c62a349d40ad0f.js"></script><script type="text/javascript" src="./21.Vue 常考进阶知识点_files/1.8a1ec2e286c0cc0327eb.js"></script>
</body></html>