Dieses Mal bringe ich Ihnen eine Zusammenfassung der Interviewfragen zu Vue. Was gibt es bei Vue zu beachten? Hier sind praktische Fälle.
[Verwandte Empfehlungen: Vue-Interviewfragen (2020)]
1. Das bidirektionale Bindungsprinzip von vue
: Das bidirektionale Bindungsprinzip von
vue
besteht darin, die Daten von Attributen durch Object.definedProperty
und getter
von . setter
wird zumindest vom Browser Object.definedProperty
unterstützt. Wenn Sie also mit IE9
kompatibel sein möchten, können Sie es letztendlich nur mit IE8
kompatibel machen Die Verwendung ist die kompatible und nicht Object.definedProperty
.Object.definedProperty
Daten für jedes Attribut von Object.definedProperty
. Wenn wir den Wert des data
-Attributs ändern, wird dessen data
ausgelöst und dann an setter
, watcher
und dann an „Aktualisieren“ benachrichtigt der Wert der an die Richtlinie gebundenen Immobilie. watcher
- 通过`Observer`对`data`做监听,并提供了订阅某个数据项变化的能力 - 把`template`编译成一段`document fragment`,然后解析其中的`Directive`,得到每一个`Directive`所依赖的数据项和`update`方法。 - 通过`Watcher`把上述`2`部分结合起来,即把`Directive`中的数据依赖通过`Watcher`订阅在对应数据的`Observer`的`Dep`上,当数据变化时,就会触发`Observer`的`Dep`上的`notify`方法通知对应的`Watcher`的`update`,进而触发`Directive`的`update`方法来更新`dom`视图,最后达到模型和视图关联起来。
2. Die Hook-Funktionen von : vue
beforeCreate ==> created ==> beforeMount ==> mounted ==> beforeUpdate ==> updated ==> beforeDestroy ==> destroyed
nur bei einmaliger Initialisierung , der
-Hook wird nur ausgelöst, wenn sich die Daten ändern update
3. Der Unterschied zwischen und vue
: method,computed,watch
ist If Die Ergebnisse werden zwischengespeichert. Die Ergebnisse ändern sich nicht, solange sich die abhängigen Werte nicht ändern. computed
Nur die normale Methode. method
Reduzierung der Ausführungcomputed
eliminiert wiederholte Berechnungen und spart Speicherplatz. getter
hört immer zu. Beispiel: watch
: Obwohl sich der Wert von this.num + new Date()
ständig ändert, ist das Ergebnis immer noch dasselbe, solange sich new Date
nicht ändert. this.num
4. Der Würfelherstellungs-flex
Punkt: 3
html: <p> </p><p></p> <p></p> <p></p> style: .box{ display:flex; } .item:nth-child(2){ align-self:center; } .item:nth-child(3){ align-self:right; }
Die Pseudoklasse von : css
:first-child/:last-children //选择第一个孩子,:nth-of-type(n) :checked/:disabled //选择checkbox已选中的 :afeter/:before //标签的伪类 :not(selecter) //非元素的其它元素
Drei Textzeilen werden vertikal zentriert:
1. Fügen Sie den gleichen-Wert hinzu, um den Zweck der Zentrierung oben und unten zu erreichen . padding
2.Verwendentable
<p> </p><p> </p><p></p> <p></p> <p></p> .wapper{ displaty:table; } .cell{ display:table-cell; vertical-align:center; }
{position:relative;top:50%;transform:translateY(-50%)}
4.Pass
:box
<p> </p><p> </p><p></p> <p></p> <p></p> .center{ display:box; box-orient:horizontal; box-pack:center; box-align:center; }
:flex
<p> </p><p> </p><p></p> <p></p> <p></p> .flex{ display:flex; align-items:center; }
7. Domänenübergreifende Methode:
Für den Zugriff übernimmt der Browser die gleiche Ursprungsrichtlinie, den gleichen Domänennamen, das gleiche Protokoll und die gleiche Portnummer > 1.: Domänenübergreifend wird durch das
-Attribut des-Tags erreicht. Übergeben Sie eine Funktion über jsonp
, fügen Sie die Daten in die tatsächlichen Parameter der Funktion ein und rufen Sie sie auf, um die Daten abzurufen. Da der Link script
verwendet, unterstützt src
nur die Methode src
. content-type:<a href="http://www.php.cn/wiki/48.html" target="_blank">javascript<code>src
jsonp
2, get
:Anforderungsheaderinformationen ändern. Client hinzufügen: content-type:<a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a>
. Server:
. Unterstützt cors
und höher. Origin:地址
3, Access-Control-Allow-Origin:地址
: IE10
konfigurieren
;webpack
4, devServer
Reverse-Proxy: proxy:{api:'地址'}
nginx.conf upstream tomcatserver{ server 192.168.72.49:8081//3.找到代理服务器的ip地址进行请求 } server{ listen 80; server_name 8081.max.com;//1.客户端调用名 location / { proxy_pass http://tomcatserver;//2.到代理服务器 index index.html index.html; } }
nginx
8. : webpack
und :
ist für die Optimierung, Codeintegration usw. verantwortlich. loader
plugins
loader
: Trennen Sie plugins
und verpacken Sie es separat;
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module) { // 该配置假定你引入的 vendor 存在于 node_modules 目录中 return module.context && module.context.indexOf('node_modules') !== -1; } })//依赖项不重复打包,分隔模块
analysiert new ExtractTextPlugin('styles.css')
und verwendet css
:
9. es6
的声明方法,es5:var,function
:
var
:会存在变量提升,如果在声明之前用到会报undefined
.let
:不存在变量提升,如果在声明之前用到会报错。暂时性死区。块级作用域。const
:声明之后就不能改变。同上,如果是对象的话,只是指向引用的地址,所以对象里面的值改变了,是没有任何反应的。function
:声明属于window.function
class
:import
:
10. 性能优化:
压缩css,js
:体积更小,加载速度更快。css
在前,js
在后:css
在前可以和dom
树一起合成render
树,js
在后不阻塞dom
渲染。
减少http
请求:http
请求需要时间。而且要等到它请求完才能执行。请求是异步的,不知道什么时候才能请求完。webpack
配置:按需加载。分离css
。分隔依赖,把相同的依赖只打包到一起,不必重复加载。
11. 异步管理:
promise
:promise
等到执行完成后返回2
种状态,resolve
代表成功,reject
代表失败。
如果有多个异步可以用promise.all([])
.async await
:async
声明一个函数返回一个promise
。await
等到promise
异步执行结束拿到的一个结果
12. angularJS
双向绑定实现原理:
脏值检测:angular
在scope
模型上设置了一个监听队列,用来监听数据变化并更新view
,每次绑定一个东西到view
上时angular
就会往$watch
队列插入一条$watch
,用来检测它监视的model
里是否有变化的东西(一个数据一个$watcher
,对象会有一个,里面的值还会有,数组中每个对象也都会有一个)。这些$watch
列表会在$digest
循环中通过一个叫做‘脏值检测’的程序解析。angular
对大部分能产生数据变动的事件进行封装(如click
,mouse-enter
,timeout
),在每次事件发生后,比如更改了scope
中的一条数据,angular
会自动调用$digest
来触发一轮$digest
循环,它会触发每个watcher
,检查scope
中的当前model
值是否和上一次计算得到的Model
值是否一样,如不同,对应的回调函数会被执行,调用该函数的结果,就是view
中的表达式内容会被更新。
如果执行了非angular
的方法,如setTimeout
需要调用$apply()
应用到angular
上,它会调用$rootScope.$digest()
。因此,一轮$digest
循环在$rootScope
开始,随后会访问到所有的children scope
中的watchers
。
$apply()
里面可以加参数,而且会触发作用域树上所有的监控。$digest()
只作用在当前作用域和它的子作用域上。
angular
服务:sevicer
对象的实例化this.xx=
。factory
返回一个对象return{a:xx}
13. 在arr=[1,2,4]
,4
之前插入3
arr.splice(2,0,3)
14. json
字符串与json
对象的转换:
在数据传输过程中,json
是以文本,即字符串的形式传递的。而js
操作的是json
对象。
转对象:str.parseJSON()
,JSON.parse(str)
,eval('('+str+')')
转字符串:obj.toJSONString()
,JSON.stringify(obj)
15. requestAnimationFrame
和setTimeout/setInterval
:
因为js
是单线程的,setTimeout/setInterval
是在定时器线程,要等主线程走完了,才会执行事件队列。如果主线程的计算执行时间过长,那么定时器就要一直等着不能执行,就导致了,动画卡,或者一下堆在一起执行重叠过快。requestAnimationFrame
不需要设置时间间隔。IE9
以下不支持。cancelAnimationFrame()
用来取消。
16. 原型链:
每一个构造函数都有自己的原型对象,用prototype
属性来表示。每个原型对象都有一个隐式的_proto_
属性指向它父级的原型对象。如:
let a= new A() a._proto_=A.prototype a._proto_._proto_=A.prototype._proto_=Object.prototype a._proto_._proto_._proto_=A.prototype._proto_._proto_=Object.prototype._proto_=null
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
相关学习推荐:js视频教程
Das obige ist der detaillierte Inhalt vonZusammenfassung der Interviewfragen zu vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!