<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<style>
.left{
margin-left: 5%;
}
p{
margin-left: 6%;
}
</style>
<body>
<div>
<!-- css -->
<div>
<h1>一、css</h1>
<div class="left">
<h3>1、css和ie盒子模型</h3>
<p>margin+pading+border+count(width和height)</p>
<p>标准css盒子的宽指的是count的宽</p>
<p>ie和低端css盒子的宽指的是margin(宽)+border(宽)+count(宽)</p>
<h3>2、css选择器有哪些</h3>
<p>id选择器(id)、类选择器(class)、标签选择器(p)、相邻选择器(div+div)、子选择器(div>p)、后代选择器(div p)、通配符选择器(*)</p>
<p>伪类选择器(a:hover, li:nth-child)</p>
<p>可继承属性：color、font-size、font-family</p>
<p>不可继承属性：padding、margin、border</p>
<p>优先级：就近原则(!important > id > class > tag )</p>
<h3>3、css3新增伪类有哪些</h3>
<p>p:first-of-type 选择属于其父元素的首个元素</p>
<p>p:last-of-type 选择属于其父元素的最后元素</p>
<p>p:only-of-type 选择属于其父元素唯一的元素</p>
<p>p:only-child 选择属于其父元素的唯一子元素</p>
<p>p:nth-child(2) 选择属于其父元素的第二个子元素</p>
<p>:enabled :disabled 表单控件的禁用状态。</p>
<p>:checked 单选框或复选框被选中。</p>
<h3>4、绝对定位居中（固定宽高）</h3>
<p>position:absolute;</p>
<p>width: 200px;</p>
<p>height: 200px;</p>
<p>left: 50%;</p>
<p>top:50%;</p>
<p>margin-top:-50px;</p>
<p>margin-left: -100px;</p>
<h3>5、display有哪些值</h3>
<p>inline（默认）–内联</p>
<p>none–隐藏</p>
<p>block–块显示</p>
<p>table–表格显示</p>
<p>list-item–项目列表</p>
<p>inline-block</p>
<p>display:flex;()弹性布局，适用于移动端</p>
<h3>6、position定位的值</h3>
<p> static（默认）：按照正常文档流进行排列；</p>
<p> relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；</p>
<p> absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；</p>
<p> fixed(固定定位)：所固定的参照对像是可视窗口。</p>
<p> static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）</p>
<p> absolute: 向上找最近的定位为absolute/relative的元素</p>
<p> fixed: 它的containing block一律为根元素(html/body)</p>
<h3>7、css3的新特性有哪些</h3>
<p>1、RGBA和透明度</h3>
<p>2、 background-image background-origin(content-box/padding-box/border-box) background-size background-repeat</h3>
<p>3、 word-wrap（对长的不可分割单词换行）word-wrap：break-word</h3>
<p>4、 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）</h3>
<p>5、 font-face属性：定义自己的字体</h3>
<p>6、 圆角（边框半径）：border-radius 属性用于创建圆角</h3>
<p>7、 边框图片：border-image: url(border.png) 30 30 round</h3>
<p>8、 盒阴影：box-shadow: 10px 10px 5px #888888</h3>
<p>9、 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性（@media mediatype and|not|only (media feature) {
CSS-Code;
}）
<h3>8、用css创建一个三角形原理</h3>
<p>首先，需要把元素的宽度、高度设为0。然后设置边框样式。</p>
<p>width: 0;</p>
<p>height: 0;</p>
<p>border-top:40px solid transparent;</p>
<p>border-left:40px solid transparent;</p>
<p>border-right:40px solid transparent;</p>
<p>border-bottom:40px solid red</p>
</p>
<h3>9、为什么要初始化css样式（*{padding:0;margin:0;}）</h3>
<p>因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。</p>
<h3>10、css优化提高性能的方法有哪些</h3>
<p>避免过度约束</p>
<p>避免后代选择符</p>
<p>避免链式选择符</p>
<p>使用紧凑的语法</p>
<p>避免不必要的命名空间</p>
<p>避免不必要的重复</p>
<p>最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么</p>
<p>避免！important，可以选择其他选择器</p>
<p>尽可能的精简规则，你可以合并不同类里的重复规则</p>
<h3>11、全屏滚动的原理是什么？用到了CSS的哪些属性？</h3>
<p>有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现</p>
<p>overflow：hidden；transition：all 1000ms ease；</p>
<h3>12、::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用</h3>
<p>单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。</p>
<p>::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。</p>
<p>:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after</p>
<h3>13、CSS属性overflow属性定义溢出元素内容区的内容会如何处理?</h3>
<p>参数是scroll时候，必会出现滚动条。</p>
<p>参数是auto时候，子元素内容大于父元素时出现滚动条。</p>
<p>参数是visible时候，溢出的内容出现在父元素之外。</p>
<p>参数是hidden时候，溢出隐藏。</p>
<h3>14、 一个盒子为行内块级元素，即 display:inline-block; 给该元素添加margin-top:-10px;负值不起作用，这是为什么呢？</h3>
<p></p>
<h3>14、CSS3 ::before 和 :after中双冒号和单冒号 有什么区别？</h3>
<p>单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素</p>
<h3>15、如何判断当前代码是运行在浏览器还是node环境中</h3>
<p> this === window ? console.log('browser') : console.log('node');</p>
</div>
</div>
<!-- js -->
<div>
<h1>二、js</h1>
<div class="left">
<h3>1、type的作用</h3>
<p> 可以判断出'string','number','boolean','undefined','symbol'</p>
<p>但判断 typeof(null) 时值为 'object'; 判断数组和对象时值均为 'object'</p>
<h3>2、instanceof</h3>
<p>原理是 构造函数的 prototype 属性是否出现在对象的原型链中的任何位置</p>
<p>function A() {}</p>
<p> let a = new A();</p>
<p> a instanceof A //true,因为 Object.getPrototypeOf(a) === A.prototype;</p>
<h3> 3、Array.isArray()</h3>
<p>用于判断是否为数组</p>
<h3>4、ES5和ES6分别有几种方式声明变量</h3>
<p>ES5 有俩种：var 和 function</p>
<p>ES6 有六种：增加四种，let、const、class 和 import</p>
<p>注意：let、const、class声明的全局变量再也不会和全局对象的属性挂钩</p>
<h3>5、闭包的概念，优缺点</h3>
<p> 优点：1、避免全局变量的污染2、希望一个变量长期存储在内存中（缓存变量）</p>
<p>缺点：1、内存泄露（消耗）2、常驻内存，增加内存使用量</p>
<h3>6、数组去重的方法</h3>
<h4>Es6的去重</h4>
<p>let arr = [1,1,2,3,4,5,5,6]</p>
<p>let arr2 = [...new Set(arr)]</p>
<h4>filter去重</h4>
<p>// 这种方法会有一个问题：[1,'1']会被当做相同元素，最终输入[1]</p>
<p>let arr = [1,1,2,3,4,5,5,6]</p>
<p>let arr2 = arr.filter(function(item,index) {</p>
<p>// indexOf() 方法可返回某个指定的 字符串值 在字符串中首次出现的位置</p>
<p>return arr.indexOf(item) === index</p>
<p>})</p>
<h3>7、DOM 事件有哪些阶段？谈谈对事件代理的理解</h3>
<p>分为三大阶段：捕获阶段--目标阶段--冒泡阶段</p>
<p>事件代理简单说就是：事件不直接绑定到某元素上，而是绑定到该元素的父元素上，进行触发事件操作时(例如'click')，再通过条件判断，执行事件触发后的语句(例如'alert(e.target.innerHTML)')</p>
<p>好处：(1)使代码更简洁；(2)节省内存开销</p>
<h3>8、async 和 await</h3>
<p>主要考察宏任务和微任务，搭配promise，询问一些输出的顺序</p>
<p>原理：async 和 await 用了同步的方式去做异步，async 定义的函数的返回值都是 promise，await 后面的函数会先执行一遍，然后就会跳出整个 async 函数来执行后面js栈的代码</p>
<h3>9、前端性能优化</h3>
<p>减少请求数量</p>
<p>减小资源大小</p>
<p>优化网络连接</p>
<p>优化资源加载</p>
<p>减少重绘回流</p>
<p>性能更好的API</p>
<p>webpack优化</p>
<h3>10、js作用域，作用域链</h3>
<p>作用域分为 全局作用域 和 函数作用域</p>
<p>全局作用域：代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。</p>
<p>函数作用域：在固定的代码片段才能被访问</p>
<div style="border:1px solid red;">
<h4>一、作用域</h4>
<p>var a=10 b=20 //全局作用域</p>
<p style="color:blue;"> function fn(){</p>
<p> var a=100</p>
<p> b=300 //fn作用域</p>
<p style="color:#e0c;"> function bar(){</p>
<p> var a=1000 //bar作用域</p>
<p> d=4000</p>
<p style="color:#e0c;"> }</p>
<p style="color:blue;"> }</p>
</div>
<p> 作用域有上下级关系，上下级关系的确定就看函数是在哪个作用域下创建的。如上，fn作用域下创建了bar函数，那么“fn作用域”就是“bar作用域”的上级。</p>
<p> 作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。</p>
<p> 变量取值：到创建 这个变量 的函数的作用域中取值</p>
<h4>一、作用域链</h4>
<p>但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链</p>
<div style="border:1px solid red;">
<p> var a=10</p>
<p>function fn(){</p>
<p>------var b=20</p>
<p>------function bar(){</p>
<p>----------console.log(a+b)</p>
<p>------}</p>
<p>return bar</p>
<p>}</p>
<p>var x=fn()</p>
<p>b=200</p>
<p>x()</p>
</div>
<h3>11、什么是闭包（closure），为什么要用它？</h3>
<p>闭包指的是一个函数可以访问另一个函数作用域中变量。常见的构造方法，是在一个函数内部定义另外一个函数。内部函数可以引用外层的变量；外层变量不会被垃圾回收机制回收。
注意，闭包的原理是作用域链，所以闭包访问的上级作用域中的变量是个对象，其值为其运算结束后的最后一个值。</p>
<p>优点：避免全局变量污染。缺点：容易造成内存泄漏。</p>
<p> function makeFunc() {</p>
<p> var name = "Mozilla";</p>
<p> function displayName() {</p>
<p> console.log(name); </p>
<p> }</p>
<p> return displayName;</p>
<p> }</p>
<p> var myFunc = makeFunc();</p>
<p> myFunc(); //输出Mozilla</p>
<p>myFunc 变成一个 闭包。闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。在我们的例子中，myFunc 是一个闭包，由 displayName 函数和闭包创建时存在的 "Mozilla" 字符串形成。</p>
<h3>12、 new操作符具体干了什么呢?</h3>
<p> 1) 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。</p>
<p> 2) 属性和方法被加入到 this 引用的对象中。</p>
<p> 3) 新创建的对象由 this 所引用，并且最后隐式的返回 this 。</p>
<h3>13、说说写JavaScript的基本规范？</h3>
<p>1) 不要在同一行声明多个变量</p>
<p>2) 使用 ===或!==来比较true/false或者数值</p>
<p>3) switch必须带有default分支</p>
<p>4) 函数应该有返回值</p>
<p>5) for if else 必须使用大括号</p>
<p>6) 语句结束加分号</p>
<p>7) 命名要有意义，使用驼峰命名法 </p>
<h3>14、Ajax使用</h3>
<p>1) 创建XMLHttpRequest对象（异步调用对象）</p>
<p>var xhr = new XMLHttpRequest();</p>
<p>2)创建新的Http请求（方法、URL、是否异步）</p>
<p>xhr.open(‘get’,’example.php’,false);</p>
<p>3)设置响应HTTP请求状态变化的函数。</p>
<p>onreadystatechange事件中readyState属性等于4。响应的HTTP状态为200(OK)或者304(Not Modified)。</p>
<p>发送http请求</p>
<p>xhr.send(data);</p>
<p>5) 获取异步调用返回的数据</p>
<h3>15、栈和堆的区别？</h3>
<p>栈（stack）：由编译器自动分配释放，存放函数的参数值，局部变量等；</p>
<p>堆（heap）：一般由程序员分配释放，若程序员不释放，程序结束时可能由操作系统释放。</p>
<h3>16、JavaScript实现类与继承的方法</h3>
<h4>js定义类的四种方法</h4>
<p>工厂方法</p>
<p> function creatPerson(name, age) {</p>
<p> var obj = new Object();</p>
<p> obj.name = name;</p>
<p> obj.age = age;</p>
<p> obj.sayName = function() {</p>
<p> window.alert(this.name);</p>
<p> };</p>
<p> return obj;</p>
<p> }</p>
<p>构造函数方法</p>
<p>unction Person(name, age) {</p>
<p> this.name = name;</p>
<p> this.age = age;</p>
<p> this.sayName = function() {</p>
<p> window.alert(this.name);</p>
<p> };</p>
<p> }</p>
<p>原型方法</p>
<p> function Person() {</p>
<p> }</p>
<p>Person.prototype = {</p>
<p> constructor : Person,</p>
<p> name : "Ning",</p>
<p> age : "23",</p>
<p> sayName : function() {</p>
<p> window.alert(this.name);</p>
<p> }</p>
<p> };</p>
<h4>js实现继承的3种方法</h4>
<p>借用构造函数法</p>
<p>对象冒充</p>
<p>组合继承</p>
<h3>17、谈谈this的理解</h3>
<p> 1) this总是指向函数的直接调用者（而非间接调用者）</p>
<p> 2) 如果有new关键字，this指向new出来的那个对象</p>
<p> 3) 在事件中，this指向目标元素，特殊的是IE的attachEvent中的this总是指向全局对象window</p>
<h3>18、null，undefined的区别？</h3>
<p>null表示一个对象被定义了，但存放了空指针，转换为数值时为0。</p>
<p>undefined表示声明的变量未初始化，转换为数值时为NAN。</p>
<p>typeof(null) -- object;</p>
<p>typeof(undefined) -- undefined</p>
<h3>19、同步和异步的区别?</h3>
<p>同步的概念在操作系统中：不同进程协同完成某项工作而先后次序调整（通过阻塞、唤醒等方式），同步强调的是顺序性，谁先谁后。异步不存在顺序性。</p>
<p>同步：浏览器访问服务器，用户看到页面刷新，重新发请求，等请求完，页面刷新，新内容出现，用户看到新内容之后进行下一步操作。</p>
<p>异步：浏览器访问服务器请求，用户正常操作，浏览器在后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容</p>
<h3>20、什么是跨域问题 ，如何解决跨域问题?</h3>
<p>同源：协议相同、端口相同、主机相同</p>
<p> 1.script引入JSONP的原理其实就是利用引入script不限制源的特点，把处理函数名作为参数传入，然后返回执行语句</p>
<p> script</p>
<p> function dealData (data) {</p>
<p> console.log(data);</p>
<p> }</p>
<p> script</p>
<p> script src='http://example.com/data.php?callback=dealData'/</p>
<p>CORS方法解决跨域问题</p>
<h3>20、call和apply</h3>
<p>call（）方法和apply（）方法的作用相同，动态改变某个类的某个方法的运行环境。他们的区别在于接收参数的方式不同。在使用call（）方法时，传递给函数的参数必须逐个列举出来。使用apply（）时，传递给函数的是参数数组</p>
<h3>21、 DOM操作</h3>
<p>（1）创建新节点</p>
<p>createDocumentFragment() //创建一个DOM片段</p>
<p>createElement() //创建一个具体的元素</p>
<p>createTextNode() //创建一个文本节点</p>
<p>（2）添加、移除、替换、插入</p>
<p>appendChild()</p>
<p>removeChild()</p>
<p>replaceChild()</p>
<p>insertBefore() //在已有的子节点前插入一个新的子节点</p>
<p>（3）查找</p>
<p>getElementsByTagName() //通过标签名称</p>
<p>getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)</p>
<p>getElementById() //通过元素Id，唯一性</p>
<h3>22、数组对象有哪些原生方法，列举一下</h3>
<p>pop、push、shift、unshift、splice、reverse、sort、concat、join、slice、toString、indexOf、lastIndexOf、reduce、reduceRight
forEach、map、filter、every、some</p>
<h3>23、那些操作会造成内存泄漏</h3>
<p>全局变量、闭包、DOM清空或删除时，事件未清除、子元素存在引用</p>
<h3>24、 XML与JSON的区别？</h3>
<p> 1) 数据体积方面。JSON相对于XML来讲，数据的体积小，传递的速度更快些。</p>
<p> 2) 数据交互方面。JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。</p>
<p> 3) 数据描述方面。JSON对数据的描述性比XML较差。</p>
<p> 4) 传输速度方面。JSON的速度要远远快于XML。</p>
<h3>25、 HTML与XML的区别？</h3>
<p>（1）XML用来传输和存储数据，HTML用来显示数据；</p>
<p>（2）XML使用的标签不用预先定义</p>
<p>（3）XML标签必须成对出现</p>
<p>（4）XML对大小写敏感</p>
<p>（5）XML中空格不会被删减</p>
<p>（6）XML中所有特殊符号必须用编码表示</p>
<p>（7）XML中的图片必须有文字说明</p>
<h3> 26、渐进增强与优雅降级</h3>
<p>渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进，达到更好的用户体验。</p>
<p>优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容</p>
<h3>27、JS垃圾回收机制？</h3>
<h3>28、call（）方法和 apply（）方法</h3>
<p>call（）方法和 apply（）方法的作用相同，他们的区别在于接收参数的方式不同。对于
call（），第一个参数是 this 值没有变化，变化的是其余参数都直接传递给函数。（在使用 call
（）方法时，传递给函数的参数必须逐个列举出来。使用 apply（）时，传递给函数的是参
数数组）</p>
</div>
</div>
<!-- vue -->
<div>
<h1>三、vue</h1>
<div class="left">
<h3>1、vue双向绑定原理</h3>
<p>mvvm 双向绑定，采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。</p>
<h3>2、Vue 中 key 值的作用？</h3>
<p> 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用主要是为了高效的更新虚拟DOM。</p>
<h3>2、Vue 的生命周期</h3>
<p>beforeCreate（初始化界面前）</p>
<p>created（初始化界面后）</p>
<p>beforeMount（渲染dom前）</p>
<p>mounted（渲染dom后）</p>
<p>beforeUpdate（更新数据前）</p>
<p>updated（更新数据后）</p>
<p>beforeDestroy（卸载组件前）</p>
<p>destroyed（卸载组件后）</p>
<h3>3、watch、methods 和 computed 的区别?</h3>
<p>watch 为了监听某个响应数据的变化。computed 是自动监听依赖值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。所以区别来源于用法，只是需要动态值，那就用 computed ；需要知道值的改变后执行业务逻辑，才用 watch</p>
<p>methods是一个方法，它可以接受参数，而computed 不能，computed 是可以缓存的，methods 不会。computed 可以依赖其他 computed，甚至是其他组件的 data。
</p>
<h3>4、组件中写 name 选项有什么作用？</h3>
<p>项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤</p>
<p>DOM 做递归组件时需要调用自身 name</p>
<p>vue-devtools 调试工具里显示的组见名称是由vue中组件name决定的</p>
<h3>5、vue-router 有哪些钩子函数?</h3>
<p>全局前置守卫 router.beforeEach</p>
<p>全局解析守卫 router.beforeResolve</p>
<p>全局后置钩子 router.afterEach</p>
<p>路由独享的守卫 beforeEnter</p>
<p>组件内的守卫 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave</p>
<h3>6、route 和 router 的区别是什么？</h3>
<p>route是“路由信息对象”，包括path,params,hash,query,fullPath,matched,name等路由信息参数。</p>
<p>router是“路由实例对象”，包括了路由的跳转方法(push、replace)，钩子函数等。</p>
<h3>7、MVVM是什么</h3>
<p>MVVM 模式，顾名思义即 Model-View-ViewModel 模式。</p>
<p>
Model 层: 对应数据层的域模型，它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里，它主要用于抽象出 ViewModel 中视图的 Model。
</p>
<p>
View 层:作为视图模板存在，在 MVVM 里，整个 View 是一个动态模板。除了定义结构、布局外，它展示的是 ViewModel 层的数据和状态。View 层不负责处理状态，View 层做的是 数据绑定的声明、 指令的声明、 事件绑定的声明
</p>
<p>
ViewModel 层:把 View 需要的层数据暴露，并对 View 层的 数据绑定声明、 指令声明、 事件绑定声明 负责，也就是处理 View 层的具体业务逻辑。ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化，View 层会得到更新；而当 View 中声明了数据的双向绑定（通常是表单元素），框架也会监听 View 层（表单）值的变化。一旦值变化，View 层绑定的 ViewModel 中的数据也会得到自动更新。
</p>
<h3>8、异步请求适合在哪个生命周期调用？</h3>
<p>官方实例的异步请求是在mounted生命周期中调用的，而实际上也可以在created生命周期中调用。</p>
<h3> 9、</h3>
<p>任何一个 Vue Component 都有一个与之对应的 Watcher 实例。</p>
<p>Vue 的 data 上的属性会被添加 getter 和 setter 属性。</p>
<p>当 Vue Component render 函数被执行的时候, data 上会被 触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)</p>
<p>data 被改动时（主要是用户操作）, 即被写, setter 方法会被调用, 此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新。。</p>
<h3> 10、v-if和v-show的区别</h3>
<p>v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。</p>
<p>v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。</p>
<p>，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。</p>
<p>当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，所以不推荐同时使用v-if 和 v-for。</p>
<h3>11、开发过程中有使用过devtools吗</h3>
<h3> 12、prop验证的type类型有哪几种？</h3>
<p>字符串:String,</p>
<p>数值型: Number,</p>
<p>布尔型: Boolean,</p>
<p>数组: Array,</p>
<p>对象: Object,</p>
<p>方法: Function,</p>
<p>contactsPromise: Promise</p>
<h3>/13、prop是怎么做验证的？可以设置默认值吗？</h3>
<p>单个类型就用Number等基础类型，多个类型用数组，必填的话设置require为true，默认值的话设置default，对象和数组设置默认用工厂函数，自定义验证函数validator。</p>
<h3>14、说说你对v-clock和v-pre指令的理解 </h3>
<p>v-cloak指令只是在标签中加入一个v-cloak自定义属性，在HTML还编译完成之后该属性会被删除。</p>
<p>v-pre可以用来阻止预编译，有v-pre指令的标签内部的内容不会被编译，会原样输出。</p>
<h3>15、写出你知道的表单修饰符和事件修饰符 </h3>
<p>事件修饰符.stop .prevent .capture .self .once .passive</p>
<p>表单修饰符.number .lazy .trim</p>
<h3>16、说说你对proxy的理解</h3>
<h3>17、有在vue中使用过echarts吗？踩过哪些坑？如何解决的？ </h3>
<h3>18、vue在created和mounted这两个生命周期中请求数据有什么区别呢？</h3>
<p>在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素</p>
<p>而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，（此时document.getelementById 即可生效了）。</p>
<h3>19、vue路由懒加载</h3>
<h3>20、如果将axios异步请求同步化处理？</h3>
<p> // 统一处理axios请求</p>
<p> async getHistoryData (data) {</p>
<p> try {</p>
<p> let res = await axios.get('/api/survey/list/', {</p>
<p> params: data</p>
<p> })</p>
<p> this.tableData = res.data.result</p>
<p> this.totalData = res.data.count</p>
<p> } catch (err) {</p>
<p> console.log(err)</p>
<p> alert('请求出错！')</p>
<p> }</p>
<p> }</p>
<p> }</p>
<h3>21、使用vue手写过滤器</h3>
<h4>22、组件进来请求接口时你是放在哪个生命周期？为什么？</h4>
<p>一般在created 因为在这个生命周期我们常用到的都已经初始化好了
如果涉及dom 那就mounted</p>
<h3>23、第一次加载页面时会触发哪几个钩子？</h3>
<p>beforeCreate, created, beforeMount, mounted</p>
<h3>24、vue的优缺点</h3>
<p>1、数据驱动视图，对真实dom进行抽象出virtual dom（本质就是一个js对象），并配合diff算法、响应式和观察者、异步队列等手段以最小代价更新dom，渲染页面</p>
<p>2、组件化，组件用单文件的形式进行代码的组织编写，使得我们可以在一个文件里编写html\css（scoped属性配置css隔离）\js 并且配合vue-loader之后，支持更强大的预处理器等功能</p>
<p>3、强大且丰富的API提供一系列的api能满足业务开发中各类需求</p>
<p>4、由于采用虚拟dom，让vue ssr先天就足</p>
<p>5、生命周期钩子函数，选项式的代码组织方式，写熟了还是蛮顺畅的，但仍然有优化空间（vue3 composition-api）</p>
<p>6、生态好，社区活跃</p>
<p>缺点：</p>
<p>1、由于底层基于Object.defineProperty实现响应式，而这个api本身不支持IE8及以下浏览器</p>
<p>2、csr的先天不足，首屏性能问题（白屏）</p>
<p>3、由于百度等搜索引擎爬虫无法爬取js中的内容，故spa先天就对seo优化心有余力不足（谷歌的puppeteer就挺牛逼的，实现预渲染底层也是用到了这个工具）</p>
<h3>25、vue重定向页面方法</h3>
<p>路由中配置redirect属性</p>
<h3>26、vue-router路由有几种模式？说说它们的区别？</h3>
<p>hash模式：</p>
<p>1.url路径会出现“#”号字符</p>
<p>2.hash值不包括在Http请求中，它是交由前端路由处理，所以改变hash值时不会刷新页面，也不会向服务器发送请求</p>
<p>3.hash值的改变会触发hashchange事件</p>
<p>history模式：</p>
<p>1.整个地址重新加载，可以保存历史记录，方便前进后退</p>
<p>2.依赖H5 API和后台配置，没有后台配置的话，页面刷新时会出现404</p>
<h3>27、vuex中actions和mutations有什么区别</h3>
<p>mutations可以直接修改state，但只能包含同步操作，同时，只能通过提交commit调用(尽量通过Action或mapMutation调用而非直接在组件中通过this.$store.commit()提交)</p>
<p>actions是用来触发mutations的，它无法直接改变state，它可以包含异步操作，它只能通过store.dispatch触发</p>
<h3>28、vuex的state、getter、mutation、action、module特性分别是什么？</h3>
<p>state, 状态初始化, 并实施观察（存放公共数据的地方）</p>
<p>getter, 获取数据用于view或data中使用（获取根据业务场景处理返回的数据）</p>
<p>mutation: 内部处理state变化（唯一修改state的方法，修改过程是同步的）</p>
<p>action: 处理外部交互（异步处理，通过分发操作触发mutation）</p>
<p>module: 模块化以上四个（将store模块分割，减少代码臃肿）</p>
</div>
</div>
<!-- 小程序 -->
<div>
<h1>四、小程序</h1>
<div class="left">
<h3>1、你是怎么封装微信小程序的数据请求的？</h3>
<p>在根目录下创建utils目录及api.js文件和apiConfig.js文件；</p>
<p>在appConfig.js封装基础的get\post\put\upload等请求方法，设置请求体，带上token和异常处理等；</p>
<p>在api.js中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls，设置对应的方法并导出；</p>
<p>在具体页面导入；</p>
<h3>2、小程序页面间有哪些传递数据的方法？</h3>
<p>给html元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取。注：data-名称不能有大写字母、不可以存放对象</p>
<p>设置id的方法标识来传值，通过e.currentTarget.id获取设置的id的值，然后通过设置全局对象的方式来传递数值</p>
<p>在navigator中添加参数数值</p>
<h3>3、请谈谈小程序的双向绑定和vue的异同？</h3>
<p>小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法</p>
<p>而Vue默认就是双向绑定 只改变了某个变量的值 页面上也会跟着改变</p>
<h3>4、请谈谈小程序的生命周期函数</h3>
<p>onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。</p>
<p>onShow() 页面显示/切入前台时触发，一般用来发送数据请求；</p>
<p>onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交互。</p>
<p>onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。</p>
<p>onUnload() 页面卸载时触发，如redirectTo或navigateBack到其他页面时。</p>
<p>onPullDownRefresh() 下拉刷新的钩子函数 用户下拉刷新时会自动走到这个函数中</p>
<p>onReachBottom() 上翻到底的钩子函数</p>
<h3>5、哪些方法来提高微信小程序的应用速度？</h3>
<p>提高页面的加载速度</p>
<p>用户行为预测 # 什么叫行为预测</p>
<p>减少默认data的大小</p>
<p>组件化方案 # 使用</p>
<h3>6、 分析微信小程序的优劣势？</h3>
<p> 优势：</p>
<p> 容易上手，基础组件库比较全，基本上不需要考虑兼容问题；</p>
<p> 开发文档比较完善，开发社区比较活跃，支持插件式开发；</p>
<p> 良好的用户体验：无需下载，通过搜索和扫一扫就可以打开，打开速度快，安卓上可以添加到桌面，与原生APP差不多；</p>
<p> 开发成本比APP要低；</p>
<p> 为用户提供良好的安全保障（小程序发布 严格的审查流程）</p>
<p> 劣势：</p>
<p> 限制较多，页面大小不能超过1M，不能打开超过5个层级的页面；</p>
<p> 样式单一，部分组件已经是成型了的，样式不可修改，例如：幻灯片、导航</p>
<p> 推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广</p>
<p> 依托于微信，无法开发后台管理功能</p>
<p> 后台调试麻烦，因为api接口必须https请求且公网地址</p>
<p> 真机测试，个别功能安卓和苹果表现迥异，例如安卓的定位功能加载很慢</p>
<h3>小程序关联微信公众号如何确定用户的唯一性？</h3>
<p>使用wx.getUserInfo方法 withCredentials为true时，可获取encryptedData，里面有union_id.后端需要进行对称解密。</p>
<h3>7、bindtap和catchtap的区别？</h3>
<p>相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分</p>
<p>不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻值冒泡的</p>
<h3>8、简述五个路由的区别</h3>
<p>wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面 </p>
<p>wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 </p>
<p>wx.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 </p>
<p>wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层 </p>
<p>wx.reLaunch()：关闭所有页面，打开到应用内的某个页面</p>
<h3>9、微信小程序与H5的区别？</h3>
<p>运行环境不同（小程序在微信运行，h5在浏览器运行）；</p>
<p>开发成本不同（h5需要兼容不同的浏览器）；</p>
<p>获取系统权限不同（系统级权限可以和小程序无缝衔接）；</p>
<p>应用在生产环境的运行流畅度（h5需不断对项目优化来提高用户体验）；</p>
<h3>10、小程序如何更新页面中的值 ?</h3>
<p>可以通过this.setData来进行改变</p>
<h3>11、如何实现登录数据的持久化 ?</h3>
<p>可以通过wx.setStorageSync('键名', 对应的值)来进行数据持久化</p>
<h3>12、微信小程序如何进行双向绑定</h3>
<p>通过bind-tap点击事件 向app.js 定义的方法中获取回执</p>
<p>设置data的值 实现双向绑定</p>
</div>
</div>
</div>
</body>
</html>
自己总结的一些css，js、vue、的面试小问题
于 2021-04-13 16:55:33 首次发布
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
