vue面试题

1.vue为什么要求组件模板只能有一个根元素？

答：

（1） new Vue({el:'#app'})

（2）.单文件组件中，template下的元素div

一、当我们实例化Vue的时候，填写一个el选项，来指定我们的SPA入口：

1
2
3
4
let vm = new Vue({
 
el:'#app'
})

同时我们也会在body里面新增一个id为app的div

1
2
3
4
<body>
 
<div id='app'></div>
</body>

这很好理解，就是为vue开启一个入口，那我们不妨来想想，如果我在body下这样

1
2
3
4
5
<body>
 
<div id='app1'></div>
<div id='app2'></div>
</body>

 

 

 

总结：

.vue的单文件组件。其实本质上，一个单文件组件，本质上（我认为）会被各种各样的loader处理成为.js文件（因为当你import一个单文件组件并打印出来的时候，是一个vue实例），通过template的任意性我们知道，template包裹的HTML可以写在任何地方，那么对于一个.vue来讲，这个template里面的内容就是会被vue处理为虚拟dom并渲染的内容，导致结果又回到了开始 ：既然一个.vue单文件组件是一个vue实例，那么这个实例的入口在哪里？

如果在template下有多个div，那么该如何指定这个vue实例的根入口？

为了让组件能够正常的生成一个vue实例，那么这个div会被自然的处理成程序的入口。

通过这个‘根节点'，来递归遍历整个vue‘树'下的所有节点，并处理为vdom，最后再渲染成真正的HTML，插入在正确的位置

 

2.你了解vue的diff算法吗？

答：（1）要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能够帮助我们

我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。

diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。

（2）virtual DOM和真实DOM的区别？

virtual DOM是将真实的DOM的数据抽取出来，以对象的形式模拟树形结构。比如dom是这样的：

<div>
    <p>123</p>
</div>

对应的virtual DOM（伪代码）：

var Vnode = {
    tag: 'div',
    children: [
        { tag: 'p', text: '123' }
    ]
};

（温馨提示：VNode和oldVNode都是对象，一定要记住）

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2021-05-12 22:40  干饭仙人  阅读(65)  评论(0)    收藏  举报