{"id":3214,"date":"2021-04-10T15:58:33","date_gmt":"2021-04-10T07:58:33","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=3214"},"modified":"2026-08-18T12:35:34","modified_gmt":"2026-08-18T04:35:34","slug":"%e8%af%b4%e8%af%b4%e4%bd%a0%e5%af%b9%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a%e7%9a%84%e7%90%86%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=3214","title":{"rendered":"\u8bf4\u8bf4\u4f60\u5bf9\u53cc\u5411\u7ed1\u5b9a\u7684\u7406\u89e3?"},"content":{"rendered":"<section id=\"wenyan\" style=\"font-family: system-ui, 'Apple Color Emoji', 'Segoe UI', 'Segoe UI Symbol', 'Noto Sans', Roboto, sans-serif; line-height: 1.75; font-size: 16px; color: #000000; caret-color: #000000;\" data-provider=\"WenYan\">\n<p style=\"margin: 1em 0px;\">\u5355\u5411\u7ed1\u5b9a\u5f88\u7b80\u5355\uff1a\u628a <strong style=\"color: #4870ac;\">Model<\/strong> \u7ed1\u5230 <strong style=\"color: #4870ac;\">View<\/strong>\uff0cJS \u6539\u6570\u636e\uff0c\u754c\u9762\u81ea\u52a8\u66f4\u65b0\u3002\u53cc\u5411\u7ed1\u5b9a\u518d\u8d70\u4e00\u6b65\uff1a\u7528\u6237\u6539\u4e86 View\uff08\u6bd4\u5982\u586b\u8868\uff09\uff0cModel \u4e5f\u8ddf\u7740\u53d8\u3002Vue \u628a\u8fd9\u5957\u5c01\u88c5\u5728 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">MVVM<\/code> \u7684 ViewModel \u91cc\u3002<\/p>\n<p style=\"margin: 1em 0px;\">\u672c\u6587\u4ece\u5173\u7cfb\u56fe\u8bb2\u5230 Vue2 \u65f6\u4ee3\u7684 Observer \/ Compile \/ Watcher \/ Dep\uff0c\u5e76\u7ed9\u51fa\u4e00\u4efd\u53ef\u8fd0\u884c\u7684\u7cbe\u7b80\u5b9e\u73b0\uff0c\u65b9\u4fbf\u9762\u8bd5\u65f6\u628a\u94fe\u8def\u8bf4\u5b8c\u6574\u3002<\/p>\n<table style=\"display: table; text-align: left; overflow: auto; border-collapse: collapse; margin: 1.4em auto; max-width: 100%; table-layout: fixed; overflow-wrap: break-word; word-break: break-all;\" width=\"800\">\n<thead>\n<tr>\n<th style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top; text-align: center; font-weight: bold; color: #4870ac; background: #f7f7f7;\">\u89d2\u8272<\/th>\n<th style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top; text-align: center; font-weight: bold; color: #4870ac; background: #f7f7f7;\">\u804c\u8d23<\/th>\n<th style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top; text-align: center; font-weight: bold; color: #4870ac; background: #f7f7f7;\">\u5bf9\u5e94\u4ee3\u7801<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">Model<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u6570\u636e\u548c\u4e1a\u52a1<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">options.data<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">View<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">UI \/ \u6a21\u677f<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">el \u4e0a\u7684 DOM<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">Observer<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u52ab\u6301\u5c5e\u6027<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">defineReactive<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">Compiler<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u89e3\u6790\u6307\u4ee4\u548c\u63d2\u503c<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">Compile<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">Watcher + Dep<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u4f9d\u8d56\u6536\u96c6\u4e0e\u901a\u77e5<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">Dep.target \/ notify<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e00\u3001\u4ec0\u4e48\u662f\u53cc\u5411\u7ed1\u5b9a<\/h2>\n<p style=\"margin: 1em 0px;\">\u5148\u770b\u5355\u5411\uff1aModel \u53d8\uff0cView \u53d8\u3002<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/68747470733a2f2f7374617469632e7675652d6a732e636f6d2f64363537333864302d336163392d313165622d616239302d6439616538313462323430642e706e67.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-3216\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/68747470733a2f2f7374617469632e7675652d6a732e636f6d2f64363537333864302d336163392d313165622d616239302d6439616538313462323430642e706e67.png\" alt=\"68747470733a2f2f7374617469632e7675652d6a732e636f6d2f64363537333864302d336163392d313165622d616239302d6439616538313462323430642e706e67\" width=\"376\" height=\"254\" srcset=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/68747470733a2f2f7374617469632e7675652d6a732e636f6d2f64363537333864302d336163392d313165622d616239302d6439616538313462323430642e706e67.png 376w, https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/68747470733a2f2f7374617469632e7675652d6a732e636f6d2f64363537333864302d336163392d313165622d616239302d6439616538313462323430642e706e67-90x60.png 90w\" sizes=\"(max-width: 376px) 100vw, 376px\" \/><\/a><\/p>\n<p style=\"margin: 1em 0px;\">\u7528\u6237\u586b\u8868\u65f6 View \u72b6\u6001\u66f4\u65b0\uff1b\u82e5\u80fd\u81ea\u52a8\u5199\u56de Model\uff0c\u5c31\u662f\u53cc\u5411\u7ed1\u5b9a\u3002<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/68747470733a2f2f7374617469632e7675652d6a732e636f6d2f64636331643461302d336163392d313165622d616239302d6439616538313462323430642e706e67.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-3217\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/68747470733a2f2f7374617469632e7675652d6a732e636f6d2f64636331643461302d336163392d313165622d616239302d6439616538313462323430642e706e67.png\" alt=\"68747470733a2f2f7374617469632e7675652d6a732e636f6d2f64636331643461302d336163392d313165622d616239302d6439616538313462323430642e706e67\" width=\"392\" height=\"236\" \/><\/a><\/p>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e8c\u3001\u53cc\u5411\u7ed1\u5b9a\u7684\u539f\u7406<\/h2>\n<p style=\"margin: 1em 0px;\">Vue \u53cc\u5411\u7ed1\u5b9a\u7531\u4e09\u5c42\u6784\u6210\uff0c\u5408\u79f0 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">MVVM<\/code>\u3002\u63a7\u5236\u5c42\u7684\u6838\u5fc3\u5c31\u662f\u6570\u636e\u53cc\u5411\u7ed1\u5b9a\uff1a<\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u6570\u636e\u5c42\uff08Model\uff09\uff1a\u5e94\u7528\u7684\u6570\u636e\u53ca\u4e1a\u52a1\u903b\u8f91<\/section>\n<\/li>\n<li>\n<section>\u89c6\u56fe\u5c42\uff08View\uff09\uff1a\u5c55\u793a\u6548\u679c\uff0c\u5404\u7c7b UI \u7ec4\u4ef6<\/section>\n<\/li>\n<li>\n<section>\u4e1a\u52a1\u903b\u8f91\u5c42\uff08ViewModel\uff09\uff1a\u628a\u6570\u636e\u548c\u89c6\u56fe\u5173\u8054\u8d77\u6765<\/section>\n<\/li>\n<\/ul>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u7406\u89e3 ViewModel<\/h3>\n<p style=\"margin: 1em 0px;\">\u4e24\u4ef6\u4e3b\u8d23\uff1a\u6570\u636e\u53d8\u5316\u540e\u66f4\u65b0\u89c6\u56fe\uff1b\u89c6\u56fe\u53d8\u5316\u540e\u66f4\u65b0\u6570\u636e\u3002\u5185\u90e8\u4e24\u5757\uff1a<\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u76d1\u542c\u5668\uff08Observer\uff09\uff1a\u5bf9\u6240\u6709\u6570\u636e\u5c5e\u6027\u76d1\u542c<\/section>\n<\/li>\n<li>\n<section>\u89e3\u6790\u5668\uff08Compiler\uff09\uff1a\u626b\u63cf\u6307\u4ee4\uff0c\u6309\u6a21\u677f\u66ff\u6362\u6570\u636e\uff0c\u7ed1\u5b9a\u66f4\u65b0\u51fd\u6570<\/section>\n<\/li>\n<\/ul>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e09\u3001\u5b9e\u73b0\u53cc\u5411\u7ed1\u5b9a<\/h2>\n<p style=\"margin: 1em 0px;\">\u4ee5 Vue \u4e3a\u4f8b\uff0c\u6d41\u7a0b\u662f\uff1a<\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">new Vue()<\/code> \u521d\u59cb\u5316\uff0c\u5bf9 data \u505a\u54cd\u5e94\u5316\uff0c\u53d1\u751f\u5728 Observe \u4e2d<\/section>\n<\/li>\n<li>\n<section>\u540c\u65f6\u7f16\u8bd1\u6a21\u677f\uff0c\u627e\u5230\u52a8\u6001\u7ed1\u5b9a\uff0c\u4ece data \u53d6\u503c\u521d\u59cb\u5316\u89c6\u56fe\uff0c\u53d1\u751f\u5728 Compile \u4e2d<\/section>\n<\/li>\n<li>\n<section>\u5b9a\u4e49\u66f4\u65b0\u51fd\u6570\u548c Watcher\uff0c\u6570\u636e\u53d8\u4e86\u7531 Watcher \u8c03\u66f4\u65b0\u51fd\u6570<\/section>\n<\/li>\n<li>\n<section>\u540c\u4e00\u4e2a key \u53ef\u80fd\u51fa\u73b0\u591a\u6b21\uff0c\u6240\u4ee5\u6bcf\u4e2a key \u9700\u8981\u4e00\u4e2a\u7ba1\u5bb6 Dep \u7ba1\u7406\u591a\u4e2a Watcher<\/section>\n<\/li>\n<li>\n<section>data \u53d8\u5316\u5148\u627e\u5bf9\u5e94 Dep\uff0c\u901a\u77e5\u6240\u6709 Watcher \u6267\u884c\u66f4\u65b0<\/section>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/68747470733a2f2f7374617469632e7675652d6a732e636f6d2f65353336393835302d336163392d313165622d383566362d3666616337376330633962332e706e67.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-3218\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/68747470733a2f2f7374617469632e7675652d6a732e636f6d2f65353336393835302d336163392d313165622d383566362d3666616337376330633962332e706e67.png\" alt=\"68747470733a2f2f7374617469632e7675652d6a732e636f6d2f65353336393835302d336163392d313165622d383566362d3666616337376330633962332e706e67\" width=\"730\" height=\"390\" \/><\/a><\/p>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u54cd\u5e94\u5316 data<\/h3>\n<p style=\"margin: 1em 0px;\">\u6784\u9020\u51fd\u6570\uff1a\u6267\u884c\u521d\u59cb\u5316\uff0c\u5bf9 data \u54cd\u5e94\u5316\u3001\u4ee3\u7406\u5230 vm\uff0c\u518d\u7f16\u8bd1\u3002<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">class Vue {\n  constructor(options) {\n    this.$options = options;\n    this.$data = options.data;\n\n    \/\/ \u5bf9data\u9009\u9879\u505a\u54cd\u5e94\u5f0f\u5904\u7406\n    observe(this.$data);\n\n    \/\/ \u4ee3\u7406data\u5230vm\u4e0a\n    proxy(this);\n\n    \/\/ \u6267\u884c\u7f16\u8bd1\n    new Compile(options.el, this);\n  }\n}<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u5bf9 data \u505a\u54cd\u5e94\u5316\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">function observe(obj) {\n  if (typeof obj !== \"object\" || obj == null) {\n    return;\n  }\n  new Observer(obj);\n}\n\nclass Observer {\n  constructor(value) {\n    this.value = value;\n    this.walk(value);\n  }\n  walk(obj) {\n    Object.keys(obj).forEach((key) => {\n      defineReactive(obj, key, obj[key]);\n    });\n  }\n}<\/code><\/pre>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u7f16\u8bd1 Compile<\/h3>\n<p style=\"margin: 1em 0px;\">\u626b\u63cf\u6bcf\u4e2a\u5143\u7d20\u8282\u70b9\u7684\u6307\u4ee4\uff0c\u6309\u6a21\u677f\u66ff\u6362\u6570\u636e\uff0c\u7ed1\u5b9a\u66f4\u65b0\u51fd\u6570\u3002<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/68747470733a2f2f7374617469632e7675652d6a732e636f6d2f66323765313963302d336163392d313165622d383566362d3666616337376330633962332e706e67.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-3219\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/68747470733a2f2f7374617469632e7675652d6a732e636f6d2f66323765313963302d336163392d313165622d383566362d3666616337376330633962332e706e67.png\" alt=\"68747470733a2f2f7374617469632e7675652d6a732e636f6d2f66323765313963302d336163392d313165622d383566362d3666616337376330633962332e706e67\" width=\"1016\" height=\"443\" \/><\/a><\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">class Compile {\n  constructor(el, vm) {\n    this.$vm = vm;\n    this.$el = document.querySelector(el);  \/\/ \u83b7\u53d6dom\n    if (this.$el) {\n      this.compile(this.$el);\n    }\n  }\n  compile(el) {\n    const childNodes = el.childNodes;\n    Array.from(childNodes).forEach((node) => { \/\/ \u904d\u5386\u5b50\u5143\u7d20\n      if (this.isElement(node)) {   \/\/ \u5224\u65ad\u662f\u5426\u4e3a\u8282\u70b9\n        console.log(\"\u7f16\u8bd1\u5143\u7d20\" + node.nodeName);\n      } else if (this.isInterpolation(node)) {\n        console.log(\"\u7f16\u8bd1\u63d2\u503c\u6587\u672c\" + node.textContent);  \/\/ \u5224\u65ad\u662f\u5426\u4e3a\u63d2\u503c\u6587\u672c {{}}\n      }\n      if (node.childNodes &amp;&amp; node.childNodes.length > 0) {  \/\/ \u5224\u65ad\u662f\u5426\u6709\u5b50\u5143\u7d20\n        this.compile(node);  \/\/ \u5bf9\u5b50\u5143\u7d20\u8fdb\u884c\u9012\u5f52\u904d\u5386\n      }\n    });\n  }\n  isElement(node) {\n    return node.nodeType == 1;\n  }\n  isInterpolation(node) {\n    return node.nodeType == 3 &amp;&amp; \/\\{\\{(.*)\\}\\}\/.test(node.textContent);\n  }\n}<\/code><\/pre>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u4f9d\u8d56\u6536\u96c6<\/h3>\n<p style=\"margin: 1em 0px;\">\u89c6\u56fe\u7528\u5230 data \u91cc\u67d0\u4e2a <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">key<\/code> \u5c31\u53eb\u4f9d\u8d56\u3002\u540c\u4e00 key \u53ef\u80fd\u51fa\u73b0\u591a\u6b21\uff0c\u6bcf\u6b21\u7528\u4e00\u4e2a Watcher \u7ef4\u62a4\uff0c\u591a\u4e2a Watcher \u4ea4\u7ed9 Dep\uff0c\u66f4\u65b0\u65f6\u7edf\u4e00\u901a\u77e5\u3002<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/68747470733a2f2f7374617469632e7675652d6a732e636f6d2f66613139316634302d336163392d313165622d616239302d6439616538313462323430642e706e67.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-3220\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/68747470733a2f2f7374617469632e7675652d6a732e636f6d2f66613139316634302d336163392d313165622d616239302d6439616538313462323430642e706e67.png\" alt=\"68747470733a2f2f7374617469632e7675652d6a732e636f6d2f66613139316634302d336163392d313165622d616239302d6439616538313462323430642e706e67\" width=\"764\" height=\"283\" \/><\/a><\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">defineReactive<\/code> \u65f6\u4e3a\u6bcf\u4e00\u4e2a key \u521b\u5efa\u4e00\u4e2a Dep \u5b9e\u4f8b<\/section>\n<\/li>\n<li>\n<section>\u521d\u59cb\u5316\u89c6\u56fe\u65f6\u8bfb\u53d6\u67d0\u4e2a key\uff08\u4f8b\u5982 name1\uff09\uff0c\u521b\u5efa\u4e00\u4e2a watcher1<\/section>\n<\/li>\n<li>\n<section>\u89e6\u53d1 name1 \u7684 getter\uff0c\u628a watcher1 \u52a0\u5230 name1 \u5bf9\u5e94\u7684 Dep<\/section>\n<\/li>\n<li>\n<section>name1 \u66f4\u65b0\u65f6 setter \u89e6\u53d1\uff0c\u901a\u8fc7 Dep \u901a\u77e5\u6240\u6709 Watcher<\/section>\n<\/li>\n<\/ul>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">\/\/ \u8d1f\u8d23\u66f4\u65b0\u89c6\u56fe\nclass Watcher {\n  constructor(vm, key, updater) {\n    this.vm = vm\n    this.key = key\n    this.updaterFn = updater\n\n    \/\/ \u521b\u5efa\u5b9e\u4f8b\u65f6\uff0c\u628a\u5f53\u524d\u5b9e\u4f8b\u6307\u5b9a\u5230Dep.target\u9759\u6001\u5c5e\u6027\u4e0a\n    Dep.target = this\n    \/\/ \u8bfb\u4e00\u4e0bkey\uff0c\u89e6\u53d1get\n    vm[key]\n    \/\/ \u7f6e\u7a7a\n    Dep.target = null\n  }\n\n  \/\/ \u672a\u6765\u6267\u884cdom\u66f4\u65b0\u51fd\u6570\uff0c\u7531dep\u8c03\u7528\u7684\n  update() {\n    this.updaterFn.call(this.vm, this.vm[this.key])\n  }\n}<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u58f0\u660e <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">Dep<\/code>\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">class Dep {\n  constructor() {\n    this.deps = [];  \/\/ \u4f9d\u8d56\u7ba1\u7406\n  }\n  addDep(dep) {\n    this.deps.push(dep);\n  }\n  notify() {\n    this.deps.forEach((dep) => dep.update());\n  }\n}<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u521b\u5efa watcher \u65f6\u89e6\u53d1 getter\uff08\u7cbe\u7b80\u5199\u6cd5\uff09\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">class Watcher {\n  constructor(vm, key, updateFn) {\n    Dep.target = this;\n    this.vm[this.key];\n    Dep.target = null;\n  }\n}<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u4f9d\u8d56\u6536\u96c6\uff0c\u521b\u5efa Dep \u5b9e\u4f8b\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">function defineReactive(obj, key, val) {\n  this.observe(val);\n  const dep = new Dep();\n  Object.defineProperty(obj, key, {\n    get() {\n      Dep.target &amp;&amp; dep.addDep(Dep.target);\/\/ Dep.target\u4e5f\u5c31\u662fWatcher\u5b9e\u4f8b\n      return val;\n    },\n    set(newVal) {\n      if (newVal === val) return;\n      dep.notify(); \/\/ \u901a\u77e5dep\u6267\u884c\u66f4\u65b0\u65b9\u6cd5\n    },\n  });\n}<\/code><\/pre>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u56db\u3001\u53c2\u8003\u6587\u732e<\/h2>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section><a class=\"url\" href=\"https:\/\/www.liaoxuefeng.com\/wiki\/1022910821149312\/1109527162256416\" target=\"_blank\">https:\/\/www.liaoxuefeng.com\/wiki\/1022910821149312\/1109527162256416<\/a><\/section>\n<\/li>\n<li>\n<section><a class=\"url\" href=\"https:\/\/juejin.cn\/post\/6844903942254510087#heading-9\" target=\"_blank\">https:\/\/juejin.cn\/post\/6844903942254510087#heading-9<\/a><\/section>\n<\/li>\n<li>\n<section>\u539f\u6587: https:\/\/github.com\/febobo\/web-interview\/issues\/2<\/section>\n<\/li>\n<\/ul>\n<blockquote style=\"display: block; font-size: 0.9em; border-left: 3px solid #4870ac; padding: 0.5em 1em; margin: 0px; background: #f6f8fa; color: #40464f;\">\n<p style=\"margin: 1em 0px;\"><strong style=\"color: #4870ac;\">\u4e00\u53e5\u8bdd\u603b\u7ed3\uff1a\u53cc\u5411\u7ed1\u5b9a = Observer \u52ab\u6301 data + Compile \u89e3\u6790\u6a21\u677f + Watcher \u8ba2\u9605 + Dep \u901a\u77e5\uff1b\u8bfb\u5c5e\u6027\u6536\u96c6\u4f9d\u8d56\uff0c\u5199\u5c5e\u6027\u89e6\u53d1\u66f4\u65b0\u3002<\/strong><\/p>\n<\/blockquote>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>\u5355\u5411\u7ed1\u5b9a\u5f88\u7b80\u5355\uff1a\u628a Model \u7ed1\u5230 View\uff0cJS \u6539\u6570\u636e\uff0c\u754c\u9762\u81ea\u52a8\u66f4\u65b0\u3002\u53cc\u5411\u7ed1\u5b9a\u518d\u8d70\u4e00\u6b65\uff1a\u7528\u6237\u6539\u4e86 Vie [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[105,128],"tags":[205,140],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3214"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3214"}],"version-history":[{"count":2,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3214\/revisions"}],"predecessor-version":[{"id":3221,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3214\/revisions\/3221"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}