前端必会题

一. 前端有了解嘛

要说了解肯定是了解的 , 只不过之前工作过程中做后端比较多, 前端仅仅停留在基础的使用上面 , 对于一些基本的HTML标签 , 基本的CSS选择器和样式 , JS的一些基本的组成和语法还是知道的 , 也使用过 Vue+ElementUI 做过一些简单管理端的页面 , 做过表单 , 表格之类的页面 , 也使用过axios发送ajax请求实现前端和后端的通信 , 做的都比较基础 , 如果公司需要我做前端的话, 我也会尽快利用休息的时间提升我的前端技术 , 尽快把自己的前端能力锻炼起来

二. HTML基础

2.1 常用的HTML标签有哪些

HTML标签有很多 , 例如 :

1. 标题标签

1. 1. <h1> : 一级标题
   2. <h2>: 二级标题
   3. <h3>: 三级标题
   4. <h4>: 四级标题
   5. <h5>: 五级标题
   6. <h6>: 六级标题

1. 表格标签

1. 1. <table> : 表格标签
   2. <tr> : 表格行标签
   3. <td> : 单元格标签
   4. <thead> : 表头标签
   5. <tbody> : 表格体标签

1. 表单标签

1. 1. <form> : 表单标签 , action 属性代表表单提交地址 , method属性代表表单提交方式 , enctype 属性代表表单提交的数据格式
   2. <input>文本输入框 : 根据type属性不同 , 展示的形式不同

1. 1. 1. type = text : 文本输入框
      2. type="password" 密码框
      3. type="hidden" : 隐藏域
      4. type="date" : 日期选择框框
      5. type="radio" : 单选框
      6. type="checkbox" : 复选框
      7. type="file" : 文件选择域

1. 1. <select> : 下拉选择框
   2. <textarea> : 文本域

1. 布局标签

1. 1. <div> : 块级元素, 代表一个区域
   2. <span> : 行内元素 , 代表一段文本区域
   3. <p> : 段落标签, 代表一个段落

1. 列表标签

1. 1. <ul> : 无序列表
   2. <ol> : 有序列表
   3. <li> : 列表项

1. 多媒体标签

1. 1. <img src="文件路径"> : 图片标签, 引用一张图片
   2. <video src="文件路径"></video> : 视频标签, 引用一个视频文件
   3. <audio src="文件路径"></audio> : 音频标签, 引用一个音频文件

1. 超链接

1. 1. <a href="链接地址"> : 超链接标签

2.2 src和href有什么区别

src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
src属性
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。

<script src="js.js"></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js 脚本放在底部而不是头部。
href属性
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果在文档中添加

<link href="common.css"  rel="stylesheet"/>

那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。

2.3 块级元素和行内元素有哪些

行内元素和块级元素的区别：

• 行内元素：

• • 与其他行内元素并排
  • 不能设置宽高，默认的宽度就是文字的宽度

• 块级元素：

• • 独占一行，不能与其他任何元素并列。
  • 能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。

HTML中的行内元素和块级元素有 :

1. 行内元素有：

1. 1. <a> : 超链接标签
   2. <b> : 字体加粗标签
   3. <span> : 文本标签
   4. <img> : 图片标签
   5. <input> : 输入框标签
   6. <select> : 下拉框标签

1. 块级元素有：

1. 1. <div>标签
   2. <ul> : 无序列表表
   3. <ol> : 有序列表标签
   4. <li> : 列表项标签
   5. <h1>- <h6> : 标题标签
   6. <p> : 段落标签

三. CSS基础

3.1 常用的CSS选择器有哪些

CSS选择器有很多 , 例如 :

1. id选择器 : 语法格式 #id值 , 选择id属性等于指定值的标签
2. 类选择器 : 语法格式.classname , 选择class属性等于指定值的标签
3. 属性选择器 : 语法格式标签名称[属性名='属性值'] , 选择指定标签, 指定属性名称等于指定属性值的元素
4. 标签选择器 : 语法格式 标签名称 , 根据标签名称选择标签
5. 子选择器 : 语法格式父选择器 > 子选择器 , 从父选择器选择的范围中找第一层级符合子选择器的标签
6. 后代选择器 : 语法格式父选择器 > 子选择器, 从父选择器选择的范围中找所有符合子选择器的标签

注意 : 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

3.2 隐藏元素的方法有哪些

1. display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
2. visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
3. opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
4. position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
5. z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。

3.3 display的block , inline 和 inline-block有什么区别

这两个属性都是让元素隐藏，不可见。两者区别如下：

1. display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；
2. visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。
3. display:none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
4. visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；
5. 修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；
6. 如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。

3.4 link和@import有什么区别

两者都是外部引用CSS的方式，它们的区别如下：

1. link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3. link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4. link支持使用Javascript控制DOM去改变样式；而@import不支持。

3.5 伪类和伪元素的区别和作用

1. 伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例
2. 伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：
3. 总结：伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。

3.6 什么叫响应式 , 他的基本原理是什么

响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
关于原理： 基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。为不同屏幕尺寸适配不同的样式

四. JavaScript基础

4.1 JavaScript有哪些数据类型, 有什么区别 ?

JavaScript共有八种数据类型，分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。

其中 Symbol 和 BigInt 是ES6 中新增的数据类型：

• Symbol 代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。
• BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。

这些数据可以分为原始数据类型和引用数据类型：

• 栈：原始数据类型（Undefined、Null、Boolean、Number、String）
• 堆：引用数据类型（对象、数组和函数）

两种类型的区别在于存储位置的不同：

• 原始数据类型直接存储在栈（stack）中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
• 引用数据类型存储在堆（heap）中的对象，占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体

4.2 null和undefined区别

首先 Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。

undefined 代表的含义是未定义，null 代表的含义是空对象。

一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化。

当对这两种类型使用 typeof 进行判断时，Null 类型化会返回 “object”，这是一个历史遗留的问题。当使用双等号对两种类型的值进行比较时会返回 true，使用三个等号时会返回 false

4.3 let、const、var的区别

1. 块级作用域：块作用域由 { }包括，let和const具有块级作用域，var不存在块级作用域。块级作用域解决了ES5中的两个问题：

1. 1. 内层变量可能覆盖外层变量
   2. 用来计数的循环变量泄露为全局变量

1. 变量提升：var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否在会报错。
2. 给全局添加属性：浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let和const不会。
3. 重复声明：var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的遍历。const和let不允许重复声明变量。
4. 指针指向：let和const都是ES6新增的用于创建变量的语法。 let创建的变量是可以更改指针指向（可以重新赋值）。但const声明的变量是不允许改变指针的指向。

4.4 箭头函数与普通函数的区别

JS箭头函数跟Java的Lambda表达式比较类似 , 箭头函数比普通函数更加简洁

• 如果没有参数，就直接写一个空括号即可
• 如果只有一个参数，可以省去参数的括号
• 如果有多个参数，用逗号分割
• 如果函数体的返回值只有一句，可以省略大括号
• 如果函数体不需要返回值，且只有一句话，可以给这个语句前面加一个void关键字。最常见的就是调用一个函数

4.5 什么是DOM和BOM

1. DOM 指的是文档对象模型，它指的是把文档当做一个对象，这个对象主要定义了处理网页内容的方法和接口。
2. BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的法和接口。
3. BOM的核心是 window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者方法存在。window 对象含有 location 对象、navigator 对象、screen 对象等子对象，并且 DOM 的最根本的对象 document 对象也是 BOM 的 window 对象的子对象。

4.6 如何实现一个Ajax请求

AJAX是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的 异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。
创建AJAX请求的步骤：

1. 创建一个 XMLHttpRequest 对象。
2. 在这个对象上使用 open 方法创建一个 HTTP 请求，open 方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。
3. 在发起请求前，可以为这个对象添加一些信息和监听函数。比如说可以通过 setRequestHeader 方法来为请求添加头信息。还可以为这个对象添加一个状态监听函数。一个 XMLHttpRequest 对象一共有 5 个状态，当它的状态变化时会触发onreadystatechange 事件，可以通过设置监听函数，来处理请求成功后的结果。当对象的 readyState 变为 4 的时候，代表服务器返回的数据接收完成，这个时候可以通过判断请求的状态，如果状态是 2xx 或者 304 的话则代表返回正常。这个时候就可以通过 response 中的数据来对页面进行更新了。
4. 当对象的属性和监听函数设置完成后，最后调用 sent 方法来向服务器发起请求，可以传入参数作为发送的数据体。

4.7 常见的DOM操作有哪些

1. 获取DOM元素

1. 1. getElementById : 按照 id 查询
   2. getElementsByTagName : 按照标签名查询
   3. getElementsByClassName : 按照类名查询
   4. querySelectorAll : 按照 css 选择器查询

1. 新增DOM元素

1. 1. document.createElement('span') : 创建元素
   2. container.insertBefore(content,title) : 插入元素

1. 删除DOM对象

1. 1. container.removeChild(targetNode) : 从容器删除元素

4.8 for...in和for...of的区别

for…of 是ES6新增的遍历方式，允许遍历一个含有iterator接口的数据结构（数组、对象等）并且返回各项的值，和ES3中的for…in的区别如下:

1. for…of 遍历获取的是对象的键值，for…in 获取的是对象的键名；
2. for… in 会遍历对象的整个原型链，性能非常差不推荐使用，而 for … of 只遍历当前对象不会遍历原型链；
3. 对于数组的遍历，for…in 会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)，for…of 只返回数组的下标对应的属性值；

总结：for...in 循环主要是为了遍历对象而生，不适用于遍历数组；for...of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象。

4.9 forEach和map方法有什么区别
这方法都是用来遍历数组的，两者区别如下：

1. forEach()方法会针对每一个元素执行提供的函数，对数据的操作会改变原数组，该方法没有返回值；
2. map()方法不会改变原数组的值，返回一个新数组，新数组中的值为原数组调用函数处理之后的值；

4.10 call和apply的区别

它们的作用一模一样，区别仅在于传入参数的形式的不同。

• apply 接受两个参数，第一个参数指定了函数体内 this 对象的指向，第二个参数为一个带下标的集合，这个集合可以为数组，也可以为类数组，apply 方法把这个集合中的元素作为参数传递给被调用的函数。
• call 传入的参数数量不固定，跟 apply 相同的是，第一个参数也是代表函数体内的 this 指向，从第二个参数开始往后，每个参数被依次传入函数。\

4.11 有没有使用过Promise

Promise是异步编程的一种解决方案，它是一个对象，可以获取异步操作的消息，他的出现大大改善了异步编程的困境，避免了地狱回调，它比传统的解决方案回调函数和事件更合理和更强大。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
Promise的实例有三个状态:

1. Pending（进行中）
2. Resolved（已完成）
3. Rejected（已拒绝）

当把一件事情交给promise时，它的状态就是Pending，任务完成了状态就变成了Resolved、没有完成失败了就变成了Rejected。

状态的改变是通过 resolve() 和 reject() 函数来实现的，可以在异步操作结束后调用这两个函数改变 Promise 实例的状态，它的原型上定义了一个 then 方法，使用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务，会在本轮事件循环的末尾执行

4.12 说说你对JS闭包的理解

我的理解是，闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁
闭包的作用:
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中

注意事项:

1. 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2. 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

4.13 JavaScript中如何判断this指向

1. 以函数的形式调用时，this永远都是window。比如fun();相当于window.fun();
2. 以方法的形式调用时，this是调用方法的那个对象
3. 以构造函数的形式调用时，this是新创建的那个对象
4. 使用call和apply调用时，this是指定的那个对象
5. 箭头函数：箭头函数的this看外层是否有函数 如果有，外层函数的this就是内部箭头函数的this 如果没有，就是window
6. 特殊情况：通常意义上this指针指向为最后调用它的对象。这里需要注意的一点就是如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例

4.14 深拷贝和浅拷贝
浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。
深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

五. VUE基础

5.1 Vue的基本原理

当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty将它们转为 getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新

5.2 什么是双向数据绑定

Vue的双向数据绑定是指model（模型，也就是vue实例中的数据）和view（视图）的双向绑定，即一个发生改变，另一个也会改变 ,

当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化；可以这样说用户在视图上的修改会自动同步到数据模型中去，数据模型也是同样的变化。

双向数据绑定的优点：无需和单向数据绑定那样进行CRUD（Create，Retrieve，Update，Delete）操作，双向数据绑定最常应用在就表单上，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户输入好的数据，并放到数据模型中了

5.3 双向数据绑定原理

在 MVVM 架构中，引入了 ViewModel 的概念，ViewModel 相当于一个中间件。ViewModel 只关心数据和业务的处理，不关心 View 如何处理数据，在这种情况下，View 和 Model 都可以独立出来，任何一方改变了也不一定需要改变另一方，并且可以将一些可复用的逻辑放在一个 ViewModel 中，让多个 View 复用这个 ViewModel。

整个变化到渲染的过程，大致就是：

首先通过数据劫持来监听data的数据变化，一旦监听到了数据发生变化，订阅发布开始获取数据，然后调用Dep的notify方法发布通知到每个订阅，订阅根据最新的数据渲染DOM

5.4 Compute和Watch的区别

1. computed是计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值
2. watch是侦听器 : 更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

运用场景：

1. 当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。
2. 当需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许执行异步操作 ( 访问一个 API )，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

5.5 v-if , v-show 的区别

v-if 是动态添加，当值为 false 时，是完全移除该元素，即 dom 树中不存在该元素。
v-show 仅是隐藏 / 显示，值为 false 时，该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。

5.6 v-model的实现原理

vue中v-model可以实现数据的双向绑定，但是为什么这个指令就可以实现数据的双向绑定呢？其实v-model是vue的一个语法糖。即利用v-model绑定数据后，既绑定了数据，又添加了一个input事件监听

5.7 Vue常用的指令有哪些

5.8 说一下Vue的生命周期

Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。

1. beforeCreate（创建前）：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。
2. created（创建后）：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但是此时渲染得节点还未挂载到 DOM，所以不能访问到 $el 属性。
3. beforeMount（挂载前）：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。
4. mounted（挂载后）：在el被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html 页面中。此过程中进行ajax交互。
5. beforeUpdate（更新前）：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染。
6. updated（更新后） ：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
7. beforeDestroy（销毁前）：实例销毁之前调用。这一步，实例仍然完全可用，this 仍能获取到实例。
8. destroyed（销毁后）：实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用

5.9 created和mounted的区别

1. created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
2. mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

5.10 Vue父子组件如何通信

父传子 : 子组件上添加props
子传父 : 子组件通过Vue实例方法$emit进行触发并且可以携带参数，父组件监听使用@v-on进行监听
非父子 : 第三方new Vue定义为eventBus，created中订阅方法eventBus.on，另一个兄弟组件中的methods中写函数，在函数中发布eventBus订阅的方法eventBus.emit("自定义事件名”) ，在组件的template中绑定事件(比如click)

5.11 什么是mvvm 、 mvc 模型？

1. MVC: MVC即model-view-controller（模型-视图-控制器）是项目的一种分层架构思想，它把复杂的业务逻辑，抽离为职能单一的小模块，每个模块看似相互独立，其实又各自有相互依赖关系。它的好处是：保证了模块的智能单一性，方便程序的开发、维护、耦合度低。
2. mvvm: MVVM：MVVM即 Model-View-ViewModel，(模型-视图-控制器)它是一种双向数据绑定的模式，用viewModel来建立起model数据层和view视图层的连接，数据改变会影响视图，视图改变会影响数据

文章参考语雀公开整理