陈恩秦前端面试整理

最新推荐文章于 2023-07-01 13:00:56 发布

鹏鱼雁

最新推荐文章于 2023-07-01 13:00:56 发布

阅读量991

点赞数

分类专栏：面经

本文链接：https://blog.csdn.net/CEO___/article/details/103026756

版权

面经专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

一、自我介绍
二、前端了解与发展
三、有了解其他框架吗，为什么选择vue
四、项目总结
五、Vue初学
- - 项目中的疑问，促使去学习vue原理
  - 1、响应式原理
- 前端开发规范化

一、自我介绍

面试官您好，我是广东工业大学17级软件工程的陈恩秦。我学前端有一年多的时间，现在在学校担任一个计算机学院工作室的负责人，同时也是前端负责人。在工作室期间，我学到了很多知识也结交了很多朋友，并共同完成了政府以及企业项目，现在我想趁这次机会进入贵公司实习，得到更多的成长！

二、前端了解与发展

1、为什么要选择前端

JavaScript不像java等语言，需要对环境变量等内容进行配置，只需要一个浏览器和一个文本编辑器就能够开始学习。
前端的学习路线刚开始时比较简单，容易引起兴趣。只需要会HTML，CSS就能够做出很好看的静态页面，能够让人有一些小小的成就感。不同于C或C++只能对着黑色的命令行。
JavaScript能做的事情和解决的问题也比较多。不光光是用户与界面的交互和前端与后端的数据交互，也可以使用Node.js来做服务器或者网络爬虫。
从前景上来看，Web App 能够替代许多的Native App，Google也有推出PWA来让Web App具有更近似于Native App的体验。另一方面Web App能够节省企业招人的成本。原来可能需要招一个Android开发和一个IOS开发，现在可能只需要招一个Web前端开发。
个人对数据可视化方向非常感兴趣。

2、如何学习前端（你的优势）

整体了解，解决了什么问题，有什么作用，如何使用
看视频写demo，学会应用
看书籍，文章，GitHub深入理解原理
写文章加上自己的思考做总结
不断关注前端发展，因为发展很快，要不断学习

优势：
由于项目一直在赶时间，很多时候秉着能出来效果就行的心态来做，很多细节并没有我想象中做的那么完美，而且框架里面偶尔会出一些问题，但是我并没有时间去理解其中的原理。我觉得这并不是我要追求的东西。这种心态，说的好听点叫追求极致，难听点，就是强迫症。因此我马上了投入了更深一步的学习。

对外在的方面，我在输入一些信息的同时，会加入自己的思考和推敲，然后用自己的方式来输出总结，整理成博客，这使得我能够对知识体系本身有更加深刻的理解，同时也能在忘记这部分知识点之后，重新回顾的时候能够很快捡起来，节省了非常多复习的时间。
对内在的方面，我觉得自驱力是一个比较重要的因素，即自己驱动自己学习的能力。其实说起来容易，做起来是非常难的，因为外界的诱惑实在是太多，而且学习本身就是脱离舒适区的活动，是一种反人性的活动，本身就是让人不舒服的，因此很多人不愿意主动学习，这是完全可以理解的。那我为什么会有这种强烈的自驱力呢？

3、前端技术发展过程

《前端发展severless》、《浅谈web前端的发展趋势及PWA》、《看懂 Serverless，这一篇就够了》

在早起的互联网时代，我们的网页很简单，就是一些静态或动态的页面，主要目的是用来做信息的展示和传播。这个时候开发一个网页也很easy，主要就是通过 JSP、PHP 等技术写一些动态模板，然后通过 Web Server（nginx，apache）将模板解析成一个个 HTML 文件，浏览器只负责渲染这些 HTML 文件。这个阶段还没有前后端的分工，通常是后端工程师顺便写了前端页面
2005 年 AJAX 技术的正式提出，翻开了 Web 开发的新篇章。基于 AJAX，我们可以把 Web 分为前端和后端，前端负责界面和交互，后端负责业务逻辑的处理。前后端通过接口进行数据交互。我们也不再需要在各个后端语言里面写着难以维护的 HTML。网页的复杂度也由后端的 Web Server 转向了浏览器端的 JavaScript。也正因如此，开始有了前端这个职位
2009年 Node.js 的出现，对于前端来说，也是一个历史性的时刻。随着 Node.js 一同出现的还有 CommonJS 规范和 npm 包管理机制。随后也出现了 Grunt、Gulp、Webpack 等一系列基于 Node.js 的前端开发构建工具
在 2013 年前后，前端三大框架 React.js/Angular/Vue.js 相继发布第一个版本。我们可以从以往基于一个个页面的开发，变为基于一个个组件进行开发。开发完成后使用 webpack 等工具进行打包构建，并通过基于 Node.js 实现的命令行工具将构建结果发布上线。前端开发开始变得规范化、标准化、工程化
未来的一些方向，比如 PWA, 跨端，serverless，微前端，webassemblely

（1）PWA（progressive web app渐进式网页应用）：
谷歌推出的，使我们的 web 应用，能够像一款 app 一样使用。并且对比与 app, 它不用复杂的安装，也不用下载更新包，刷新页面就可以了。
解决的问题：

生产桌面图标(用户认为已经下载到页面上)
离线缓存（Service Worker）
消息推送

（2）Service Worker：
我们原有的整个 Web 应用，都是建立在用户能上网的前提之下的，所以一离线就只能看转圈圈了。web社区也做过很多类似的尝试，如APP Cache。但是它，几乎没有路由机制，出了BUG无法监控，现下已经在html5.1中被干掉了。这个时候，Service workers 横空出世

Service workers 本质上充当Web应用程序与浏览器之间的代理服务器。

（3）WebAssembly：

WebAssembly 是一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案
总而言之，使用WebAssembly，可以更快地在 web 应用上运行代码
- 文件加载 - WebAssembly 文件体积更小，所以下载速度更快。
- 解析 - 解码 WebAssembly 比解析 JavaScript 要快
- 编译和优化 - 编译和优化所需的时间较少，因为在将文件推送到服务器之前已经进行了更多优化，JavaScript 需要为动态类型多次编译代码
- 重新优化 - WebAssembly 代码不需要重新优化，因为编译器有足够的信息可以在第一次运行时获得正确的代码
- 执行 - 执行可以更快，WebAssembly 指令更接近机器码
- 垃圾回收 - 目前 WebAssembly 不直接支持垃圾回收，垃圾回收都是手动控制的，所以比自动垃圾回收效率更高。

（4）Serverless（无服务器运算）：
（5）微前端：《如何实现前端微服务化？》
（6）Deno：《阮一峰讲deno》

因为node的一些问题所以开发者才会开发出deno代替node，比如Node.js 的模块管理工具 npm，逻辑越来越复杂、Node.js 也几乎没有安全措施，用户只要下载了外部模块，就只好听任别人的代码在本地运行，进行各种读写操作、Node.js 自己的模块格式 CommonJS 与 ES 模块不兼容，导致迟迟无法完全支持 ES 模块、Node.js 的功能也不完整，导致外部工具层出不穷，让开发者疲劳不堪：webpack，babel，typescript、eslint、prettier.
Deno 只有一个可执行文件，所有操作都通过这个文件完成。它支持跨平台（Mac、Linux、Windows）
让 node 运行 es6 模块文件的方式有两种：
- 转码 es6 模块为 commonjs 模块
- hook node 的 require 机制，直接让 node 的 require 加载 import/export

三、有了解其他框架吗，为什么选择vue

vue和其他框架的对比
 简单描述 vue 和其他框架的区别

Vue优点：

Vue学习简单， API简单，模式拥抱传统的web，入手快，适合快速开发
社区和官网都在更新发展相对于的功能，React的JSX，Angular的TS等都可以支持，Angular的watcher慢等问题在vue中都得到了相应的解决
性能更好，体积更小
构建工具webpack等有默认配置，可以让你专注于应用，但同时又很灵活，可以根据你的需求配置
基于依赖追踪的观察系统并且异步队列更新，所有数据变化都是独立触发的，除非他们之间有明确的依赖关系
组件指令，生命周期，数据流都更清楚
在普通js对象上建立响应，提供自动化计算属性

Vue和React：

相同点
- 使用 Virtual DOM
- 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件
- 保持对核心库的专注, 而像路由和全局状态管理这样的关注点则交给附带的库来处理
不同点
- 运行时性能：Vue应用中，组件的依赖是在渲染过程中自动追踪的，所以系统精准的知道哪个组件确实需要被重新渲染，而React对于不必要重渲染的子组件时需要手动实现shouldComponentUpdate方法
- HTML&CSS：在react中，一切皆JavaScript，不仅HTML用JSX来表达，CSS也被纳入JavaScript中，语法繁杂，vue的模板形式比jsx读写起来更自然，提高开发效率，因为你更熟悉传统的web写法。react学习曲线陡峭，对新手或者想要快速开发一个项目的人员不友好
- Vue.js 中的双向数据绑定在你使用了v-model 时就会当的简单。而在 React 中, vue中的v-on等指令在react中需要大量代码实现

Vue和Angular：

Angular 的学习曲线是非常陡峭的，作为一个框架，它的 API 面积比起 Vue 要大得多，因此需要理解更多的概念才能开始有效率地工作。当然，Angular 本身的复杂度是因为它的设计目标就是只针对大型的复杂应用；但不可否认的是，这也使得它对于经验不甚丰富的开发者相当的不友好。

复杂性： VUE在api与设计上更简单，可以快速学习并投入开发
灵活性和模块化：Vue有vuecli可以快速构建。配置默认，不需要花费太多的时间在配置上，你可以专注于应用本身。同时提供了根据实际需求调整每个工具配置的灵活性，
数据绑定：Vue在不同组件内强制使用单向数据流，这使得数据流更加清晰易懂
指令和组件：vue的指令和组件分的更清晰

四、项目总结

（1）《玉兰》：移动端和pc端

《项目经历——SEO优化解决方案》

初次接触移动端适配
封装的思想：api 封装api请求，利于管理、复用。模块化编程
对异步编程更深入理解

1、移动端首屏性能优化

《单页应用和多页应用》、《web移动端页面性能优化方案》、《移动H5前端性能优化指南》、《掘金：记一次前端性能优化》、《掘金：前端性能优化一篇就够了》

由于本项目采用的是单页面，大家都知道单页面的一个问题就是首页加载的东西过多，特别在移动端，处理不好，就会出现页面启动白屏现象，我在本项目中就出现了，因此需要对它做一个优化。

webpack-bundle-analyzer：用来分析 Webpack 生成的包体组成并且以可视化的方式反馈给开发者的工具

1、静态资源使用cdn引入（css、图片、字体）：减小服务器带宽压力
CDN配置详解

2、路由懒加载：
《vue中使用import路由懒加载的原理、import和require的区别》
路由组件如果不按需加载的话，就会把所有的组件一次性打包到app.js中，导致首次加载内容过多

原理：

普通情况：页面一加载就会执行 import Login from '@/views/login'，相当于在打包编译时就执行加载了组件
懒加载：只会在进入当前这个路由时候才会运行import编译加载相应的组件

{
  path: 'buyerSummary',
  name: 'buyerSummary',
  component: () => import('VIEWS/buyer/buyerSummary/index'),
},

3、图片懒加载（懒加载和预加载区别）

懒加载也叫延迟加载，当用户需要访问时，再去加载。通过减少请求数或延迟请求数来缓解服务端压力

原理：将页面上的图片的 src属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的src 属性

预加载也叫提前加载，提前将图片缓存到本地后，如果图片路径不变，页面在使用图片时，浏览器就可以直接使用缓存了。预加载能够增加用户体验，不过增大了服务器压力

最常用的方式是使用 js 中的 image 对象，通过为new image 对象并设置 scr 属性，来实现图片的预加载

4、减少http请求数量

合并css、js文件、合并小图片使用雪碧图（ps或者在线生成工具生成）
前端缓存（强缓存、协商缓存）后端设置字段

5、减小http请求大小

HTML，css，js代码使用插件压缩。html:HtmlWebpackPlugin、css-loader 内置了压缩，配合MiniCssExtractPlugin、js:UglifyJsPlugin
服务端开启 gzip资源文件压缩，减小传输文件的大小，提高页面加载速度、节省带宽（其实前端使用插件compression-webpack-plugin也可以压缩）
《gzip压缩初探》
gzip是一种流行的文件压缩算法，他会把文件压缩为.gz然后传给浏览器，最后浏览器负责解压文件呈现给客户
图片svg(iconfont) webp
按需加载，当前流行的UI框架如vant,Element UI都支持按需加载

6、渲染方面（减少回流和重绘）：平时代码中

用transform 代替 top，left ，margin-top， margin-left… 这些位移属性（transform不发生回流重绘）
visibilty：hidden代替display:none
缓存dom的选择和计算，减少dom增删行为
缓存元素的偏移量属性scrollTop、offsetTop、offsetWidth 等属性
尽量减少table使用：因为table 的每一个行甚至每一个单元格的样式更新都会导致整个table 重新布局

7、防抖：用户输入自动搜索。节流
8、因为本项目甲方在首页就是页面展示类、介绍类和导航类页面，因此可以采用Prerender-pla-Plugin进行首屏的预渲染
9、封装可复用组件（插槽slot、props、$emit）

2、移动端安卓和 IOS 上的兼容性问题

移动端兼容性问题解决方案、 kao12个前端必会 H5 问题及解决方法、总结移动端H5开发常用技巧（干货满满哦！）

物理像素（设备像素）：在同一个设备上，他的物理像素是固定的，设备厂商出厂是就设置好了，即，一个设备的分辨率是固定的
逻辑像素（css像素）：我们在写css代码的时候，用的就是css像素
设备像素比（dpr）= 设备像素 / css像素（垂直方向或水平方向）
比如在Iphone 4中，设备像素是640px * 960px；而逻辑像素是 320px * 480px,他的dpr为2

1、1px太粗问题

《移动端1px像素问题及解决办法》
表现原理：设计师对于 UI 的要求也越来越高，比如 1px 的边框。在高清屏下，移动端的 1px 会很粗。我们其实想要的是1 物理像素，在DPR = 1时，1物理像素刚好 = 1css像素；在DPR = 2时，1物理像素 = 0.5css像素；在DPR = 3时，1物理像素 = 0.33css像素。并不是所有手机浏览器都能识别小于1px即带小数的px值，有时小于1px会被当成0px处理，无法达到我们想要的效果

最常用解决方法：使用伪类:before:after结合transform：scale(0.5)
原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border，使用绝对定位，并 transform 的 scale 缩小一半。

单条border样式设置：

.scale-1px{
     position: relative;
     border:none;
 } 
.scale-1px:after{
     content: '';
     position: absolute; 
     bottom: 0; 
     background: #000; 
     width: 100%; 
     height: 1px;
     -webkit-transform: scaleY(0.5); 
     transform: scaleY(0.5); 
     -webkit-transform-origin: 0 0; 
     transform-origin: 0 0; 
}

2、click 点击穿透与延迟问题（只有移动端会出现，pc端不会）：

《！！！移动端300ms点击延迟和点击穿透》、《你真的了解FastClick吗？》、《fastclick的介绍和使用》

表现：

监听元素 click 事件，点击元素触发时间延迟约 300ms
点击蒙层，蒙层消失后，下层元素点击触发。

产生原因：
1、为什么会产生 click 延时？

iOS 中的 safari，移动端点击有 300ms 的延迟是因为移动端会有双击缩放的这个操作，因此浏览器在 click 之后要等待 300ms，看用户有没有下一次点击，来判断这次操作是不是双击。

2、为什么会产生 click 点击穿透？

事件触发顺序:touchstart—touchmove—touchend，然后大约过300ms再触发click事件

双层元素叠加时，在上层元素上绑定 touch 事件，下层元素绑定 click 事件。由于 click 发生在 touch 之后，点击上层元素，元素消失，下层元素绑定 click 事件的话就会触发，由此产生了点击穿透的效果。

解决方案：
1、使用 touchstart替换click
不仅解决了 click 事件都延时问题，还解决了穿透问题。因为穿透问题是在 touch 和 click 混用时产生。

2、使用 fastclick库（npm安装import进来）
使用fastclick库后，click 延时和穿透问题都没了

fastclick原理：
原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉

needsclick：
对于页面上不需要使用fastclick来立刻触发点击事件的元素在元素标签的class上添加needsclick

不使用它的原因：首先引入fastclick库，再把页面内所有touch事件都换成click，其实稍微有点麻烦，建议引入这几KB就为了解决点透问题不值得，不如用第一种方法呢

思考：（不要自己讲）
是否可以将 click 事件全部替换成 touchstart 呢？为什么开源框架还会给出 click 事件呢？（vantUI的button组件中既提供了click事件，又提供了touchstart事件）

同时需要点击和滑动的场景下。如果将 click 替换成 touchstart 的话，在我需要touchmove滑动时候，优先触发了touchstart的点击事件，这样句产生冲突了。因此在具有滚动的情况下，还是建议使用 click 处理

3、总结移动开发实践中遇到的坑

总结移动开发实践中遇到的坑

4、SEO优化

项目经历之SEO优化

ssr（服务端需要node环境，成本高）
简单的页面可使用webpack插件Prerender-spa-plugin

1、chrome真机调试：（如果国内要墙，可下载离线包）

手机打开『USB调试』
手机和PC连接USB
PC端chrome地址栏访问 chrome://inspect/#devices
在pc端输入要调试的页面地址（需要将localhost替换成本机ip，并且在同一个局域网）

2、weinre调试（web inspect remote）网页远程审查：手机和电脑也要在同一个网段下

npm安装weinre包
启动weinre服务（代理【agent】服务）weinre --httpPort 8090 --boundHost -all-
在需要调试的页面通过script从代理服务中引入target/target-script-min.js
在手机端访问需要调试的页面
调试完毕后记得删除之前增加的script脚本

原理就是通过建立一个服务端代理（agent server），为client和target页建立起通信，Client页面的任何操作命令都会发给target页面执行，同样target的任何操作也会发给client执行。注：无法进行js断点调试

3、spy-debugger调试：

npm全局安装插件
spy-debugger启动（默认窗口是9888）
设置手机的HTTP代理：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
手机打开需要调试的页面进行调试

其内部集成了weinre，原理是拦截所有页面请求注入weinre所需要的js代码。简化了weinre需要给每个调试的页面添加js代码，让页面调试更加方便。

8、移动端适配（rem、vw）

主要有rem适配和vm适配《最简单的移动端适配方案(rem+vw)》

1、本项目采用vm适配。主要思路：配置下面的几个PostCSS插件：

postcss-aspect-ratio-mini
postcss-px-to-viewport（计算核心）：设计稿通常是750px,屏幕一共是100vw,那么1px就是0.1333333vw，我们按照设计稿的宽度直接写px，这个插件会自动帮我们进行转换为vw
postcss-write-svg
postcss-cssnext
cssnano
postcss-viewport-units

接下来在.postcssrc.js文件对新安装的PostCSS插件进行配置：

"postcss-px-to-viewport": {
     viewportWidth: 375,// (Number) 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 667, // (Number) 窗的高度，根据750设备的宽度来指定，一般指定1334
      unitPrecision: 3, // (Number) 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines','::-webkit-scrollbar','.protocol'], // (Array) 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // (Number) 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // (Boolean) 允许在媒体查询中转换`px`
      },

2、rem适配：

【移动端适配方案一弹性布局】@media标签+rem+viewport实现移动端屏幕适配

前端开发工程师根据UI设计师给的设计稿进行开发。
为了保证在各种屏幕上的不失真，就要根据实际屏幕宽度做等比例换算，才能写进CSS：需要满足

写入CSS的尺寸/屏幕宽度 = UI图标注的尺寸/UI图宽度（由于设置了理想视口，所以视口宽度=屏幕宽度，这里在比值的时候就直接用屏幕宽度）
即：写入CSS的尺寸 = (UI图标注的尺寸*屏幕宽度)/UI图宽度
我们将根元素基准值设置为100px
然而为了不失真要计算出对应的比例，于是1rem = 屏幕宽度/UI设计图宽度*100px
即：屏幕640px，给的设计稿宽640px，那么这种情况下1rem就表示100px
如果屏幕320px，给的设计稿宽640px，那么这种情况下1rem就表示50px
要想做成响应式，只需要配合@media计算好对应屏幕下html font-size的值。
于是：写入CSS的尺寸 = UI图标注的尺寸/100px*1rem

9、如何实现安全登陆（token）Vue项目中鉴权（axios拦截）

《Vue项目中实现用户登录及token验证》、《token一般是保存在哪里》、《为什么还要往vuex中再存一次token》、《axios封装api接口、鉴权拦截》

第一次登录的时候，前端调后端的登陆接口，发送用户名和密码
后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token
前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面（一般存放在Vuex，是为了不每次都去读取localStorage，因为State读取效率更高。localStorage可以作用于刷新后，vuex刷新就没了，将vuex初始化localStorage存的变量，防止刷新使用的）
前端每次跳转路由，就判断 localStroage中有无token ，没有就跳转到登录页面，有则跳转到对应路由页面
每次调后端接口，都要在请求头中加token
后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401
如果前端拿到状态码为401，就清除token信息并跳转到登录页面

10、鉴权方法

《前后端常见的几种鉴权方式》

HTTP Basic Authentication
session-cookie
Token 验证（目前使用的方法）
OAuth(开放授权)

11、异步操作（promise）可以联系到vue的nextTick实现原理

浅谈异步任务操作

（2）《智能塑料瓶回收箱》

《项目经历之——轮询后端接口（setInterval、websocket）》

1、Echarts的实现

其实Echarts只是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库，底层依赖轻量级的 Canvas 库 ZRender

2、浏览器兼容

《如何机智地回答浏览器兼容性问题》、《面试必问题：谈谈浏览器的兼容性》、《浏览器兼容性问题解决方案 · 总结》

3、websocket轮询后端接口

五、Vue初学

《Vue的深入理解》

项目中的疑问，促使去学习vue原理

记一次思否问答的问题思考：Vue为什么不能检测数组变动
一开始使用vue做项目时，看了vue的文档，了解了vue是响应式的，但是在项目中使用的时候出现了
1、不能检测到的数组变动是：

当利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue；
当修改数组的长度时，例如：vm.items.length = newLength；

总结：其实一开始遍历data里面的数据时，当数据是数组时，会停止对数据属性的监测。尤大说是性能问题。

2、不能检测到的对象变动是：

向响应式对象添加属性；
向响应式对象删除属性；

总结：虽然他们的值改变了，但是无法触发视图更新，因为这些属性没有dep，一开始没有监听到，不是响应式数据

这些问题在Vue3.0通过proxy代替defineProperty来解决,但是proxy兼容性不好

defineProperty缺点：

无法监听数组变化，只针对了以上八种方法
,只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历，如果属性值也是对象那么需要深度遍历（因为监听的是属性，所以新属性无法监听）

proxy优点：

可以直接监听数组的变化
Proxy直接可以劫持整个对象，并返回一个新对象，即直接监听对象而非属性（可能是解决了对象属性的添加和删除监听）

通过这个，然后我就又去大概了解了vue3.0有哪些新特性

1、响应式原理

《ceq浅谈Vue的响应式原理》、Vue 数据响应式原理

Vue 的响应式，核心机制是观察者模式。

首先在init过程中，调用initState(),接着调用initData(), 在这里会执行observe(data),他会通过observe(data),目的是让传入的整个对象成为响应式的，它会遍历data对象的所有属性，然后执行defineReactive这个核心函数,在每个属性上新建一个 dep 对象,并通过defineProperty添加getter,setter这就可以用来依赖收集，派发更新.

依赖收集：
dep有subs属性，该属性存放的是 watcher数组，在组件渲染的过程，该方法会执行render函数，即访问到data,触发某个属性的getter, 该属性的dep就会将此时的watcher收集起来

派发更新：
当修改某个属性的时候，会触发setter，此时该属性的dep 对他所收集的watcher进行派发更新，通知他们执行update()