没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
68页
包括但不局限于以下问题,来自大厂的面试 1. v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能? 2. Vue组件data为什么必须是个函数而Vue的根实例则没有此限制? 3. 你知道vue中key的作用和工作原理吗?说说你对它的理解。 4. 你怎么理解vue中的diff算法? 5. 谈一谈对vue组件化的理解? 6. 谈一谈对vue设计原则的理解? 7. 谈谈你对MVC、MVP和MVVM的理解? 8. 你了解哪些Vue性能优化方法? 9. 你对Vue3.0的新特性有没有了解? 10. 简单说一说vuex使用及其理解? 11. vue中组件之间的通信方式? 12. vue-router 中的导航钩子由那些? 13. 什么是递归组件? 14. 说一说vue响应式理解? 15. vue如果想要扩展某个组件现有组件时怎么做? 16. vue为什么要求组件模版只能有一个根元素? 17. watch和computed的区别以及怎么选用? 18. 你知道nextTick的原理吗? 19. 你知道vue双向数据绑定的原理吗? 20. 简单说一说vue生命周期的理解?
资源推荐
资源详情
资源评论
1. v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能?
2. Vue组件data为什么必须是个函数而Vue的根实例则没有此限制?
3. 你知道vue中key的作用和工作原理吗?说说你对它的理解。
4. 你怎么理解vue中的diff算法?
5. 谈一谈对vue组件化的理解?
6. 谈一谈对vue设计原则的理解?
7. 谈谈你对MVC、MVP和MVVM的理解?
8. 你了解哪些Vue性能优化方法?
9. 你对Vue3.0的新特性有没有了解?
10. 简单说一说vuex使用及其理解?
11. vue中组件之间的通信方式?
12. vue-router 中的导航钩子由那些?
13. 什么是递归组件?
14. 说一说vue响应式理解?
15. vue如果想要扩展某个组件现有组件时怎么做?
16. vue为什么要求组件模版只能有一个根元素?
17. watch和computed的区别以及怎么选用?
18. 你知道nextTick的原理吗?
19. 你知道vue双向数据绑定的原理吗?
20. 简单说一说vue生命周期的理解?
1. v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得
到更好的性能?
源码中找答案compiler/codegen/index.js
做个测试如下
<p v-for="item in items" v-if="condition">
<!DOCTYPE html>
<html>
<head>
<title>Vue事件处理</title>
</head>
<body>
<div id="demo">
<h1>v-for和v-if谁的优先级高?应该如何正确使用避免性能问题?</h1>
<!-- <p v-for="child in children" v-if="isFolder">{{child.title}}</p> --
>
<template v-if="isFolder">
<p v-for="child in children">{{child.title}}</p>
</template>
</div>
<script src="../../dist/vue.js"></script>
<script>
// 创建实例
const app = new Vue({
开课吧web全栈架构师
两者同级时,渲染函数如下:
_l包含了isFolder的条件判断
两者不同级时,渲染函数如下
先判断了条件再看是否执行_l
结论:
1. 显然v-for优先于v-if被解析(把你是怎么知道的告诉面试官)
2. 如果同时出现,每次渲染都会先执行循环再判断条件,无论如何循环都不可避免,浪费了性能
3. 要避免出现这种情况,则在外层嵌套template,在这一层进行v-if判断,然后在内部进行v-for循环
4. 如果条件出现在循环内部,可通过计算属性提前过滤掉那些不需要显示的项
2. Vue组件data为什么必须是个函数而Vue的根实例则没有此限制?
el: '#demo',
data() {
return {
children: [
{title:'foo'},
{title:'bar'},
]
}
},
computed: {
isFolder() {
return this.children && this.children.length > 0
}
},
});
console.log(app.$options.render);
</script>
</body>
</html>
(function anonymous(
) {
with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("v-for和v-if谁的优先
级高?应该如何正确使用避免性能问题?")]),_v(" "),
_l((children),function(child){return (isFolder)?_c('p',
[_v(_s(child.title))]):_e()})],2)}
})
(function anonymous(
) {
with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("v-for和v-if谁的优先
级高?应该如何正确使用避免性能问题?")]),_v(" "),
(isFolder)?_l((children),function(child){return _c('p',
[_v(_s(child.title))])}):_e()],2)}
})
开课吧web全栈架构师
源码中找答案:src\core\instance\state.js - initData()
函数每次执行都会返回全新data对象实例
测试代码如下
程序甚至无法通过vue检测
结论
Vue组件可能存在多个实例,如果使用对象形式定义data,则会导致它们共用一个data对象,那么状态
变更将会影响所有组件实例,这是不合理的;采用函数形式定义,在initData时会将其作为工厂函数返
回全新data对象,有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制,也
是因为根实例只能有一个,不需要担心这种情况。
<!DOCTYPE html>
<html>
<head>
<title>Vue事件处理</title>
</head>
<body>
<div id="demo">
<h1>vue组件data为什么必须是个函数? </h1>
<comp></comp>
<comp></comp>
</div>
<script src="../../dist/vue.js"></script>
<script>
Vue.component('comp', {
template:'<div @click="counter++">{{counter}}</div>',
data: {counter: 0}
})
// 创建实例
const app = new Vue({
el: '#demo',
});
</script>
</body>
</html>
开课吧web全栈架构师
3. 你知道vue中key的作用和工作原理吗?说说你对它的理解。
源码中找答案:src\core\vdom\patch.js - updateChildren()
测试代码如下
上面案例重现的是以下过程
不使用key
<!DOCTYPE html>
<html>
<head>
<title>03-key的作用及原理?</title>
</head>
<body>
<div id="demo">
<p v-for="item in items" :key="item">{{item}}</p>
</div>
<script src="../../dist/vue.js"></script>
<script>
// 创建实例
const app = new Vue({
el: '#demo',
data: { items: ['a', 'b', 'c', 'd', 'e'] },
mounted () {
setTimeout(() => {
this.items.splice(2, 0, 'f')
}, 2000);
},
});
</script>
</body>
</html>
开课吧web全栈架构师
如果使用key
结论
1. key的作用主要是为了高效的更新虚拟DOM,其原理是vue在patch过程中通过key可以精准判断两
个节点是否是同一个,从而避免频繁更新不同元素,使得整个patch过程更加高效,减少DOM操
作量,提高性能。
2. 另外,若不设置key还可能在列表更新时引发一些隐蔽的bug
3. vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分
它们,否则vue只会替换其内部属性而不会触发过渡效果。
4. 你怎么理解vue中的diff算法?
// 首次循环patch A
A B C D E
A B F C D E
// 第2次循环patch B
B C D E
B F C D E
// 第3次循环patch E
C D E
F C D E
// 第4次循环patch D
C D
F C D
// 第5次循环patch C
C
F C
// oldCh全部处理结束,newCh中剩下的F,创建F并插入到C前面
开课吧web全栈架构师
剩余67页未读,继续阅读
资源评论
APEX学院
- 粉丝: 0
- 资源: 23
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功