一、v-if和v-for哪个优先级高
1、v-for优先于v-if被解析 （打印this.$options.render)看出来的，也可以看源码
image.png
2、如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能，要避免出现这种情况，则在外层嵌套 template, 在这一层进行v-if判断 然后在内部进行v-for循环
<template v-if="isFolder">
<p v-for="(item,index) in children " :key="index">{{item.title}}</p>
</template>
<script>
data() {
return {
children: [
{title:'foo'},
{title:'bar'}
]
}
},
computed: {
isFolder() {
return this.children && this.children.length > 0
}
},
mounted() {
console.log(this.$options.render,'renderrrr');
}
</script>
3、如果判断条件是循环里面的 则可以通过计算属性 对数据进行处理过之后 再v-for
二、Vue组件data选项为什么必须是个函数而Vue的跟实例没有此限制
Vue组件可能存在多个实例，如果使用对象形式定义data，则会导致他们公用一个data对象，那么状态的变更会影响所有组件实例，这是不合理的；采用函数的形式定义，在initData时会将其作为工厂函数返回全新的data，有效规避多实例之间的状态污染问题。
Vue跟实例创建过程中则不存在该限制，因为跟实例只有一个
三、key的作用和原理
源码：src\core\vdom\patch.js upeateChildren()
1、key的作用主要是为了高效的更新虚拟DOM ，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁的更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能
2、若不设置key 可能在列表更新是引发一些隐藏的bug
四、diff
必要性： lifecycle.js -mountComponent
组件中可能存在多个data中的key使用
执行方式：patch.js patchVnode()
patchVnode 是diff发生的地方 整体策略：深度优先，同层比较
高效性： patch.js updateChildren()
总结
1、diff算法是虚拟DOM技术的必然产物，通过新旧虚拟Dom做对比（diff），将变化的地方更新在真实DOM上，另外，也需要diff高效的执行对比过程，从而降低时间复杂度为O(n)
2、vue2.x中味了降低watcher粒度，每个组件只有一个watcher与之对应，只有引入diff才能精确找到发生变化的地方
3、vue中diff执行的时候 patch的过程 是oldVnode 和newVnode进行比对的过程
4、diff过程整体遵循深度优先，同层比较的策略；两个节点之间比较会根据他们是否拥有子节点或者文本节点做不同操作；比较两组子节点是算法的重点，首先假设头尾节点可能做4次比对尝试，如果没有找到相同节点才按照通用方式遍历查找，查找结束再按照情况处理剩下的节点，借助key通常可以非常准确的找到相同节点，因此整个patch过程非常高效。
五、组件
组件定义
//全局组件
Vue.component('comp',{
template: '<div>this is a component</div>'
})
//自定义局部组件
<template>
<div>this is a component</div>
</template>
vue-loader会编译template为render函数，最终导出的依然是组件配置对象，是一个js
组件化优点
lifecycle.js mountComponent（组件实例在$mount的时候调用）
组件 watcher 渲染函数和更新函数的关系
组件化实现
构造函数：src\core\global-api\extend.js
实例化及挂载 ：src\core\vdom\patch.js createElm()
总结
1、组件是独立可复用的代码组织单元，把功能切割实现
2、组件化开发能进行页面的拆分，大幅提高开发效率 和团队协作
3、组件分：页面组件【路由，组织页面切换必备的】、 业务组件【登录 购物车】、 通用组件【按钮 表单 输入框】
4、vue中常见的组件化技术有： 属性prop，自定义事件，插槽等，他们主要用于通信、扩展
5、平时开发的时候要合理的划分组件，有利于提升性能
6、组件应该是高内聚 低耦合的
7、遵循单向数据流的原则
六、vue设计原则的理解
渐进式框架、易用性、灵活性。
上手简单，简单的页面可以直接引入js然后就直接渲染数据了，后面复杂的项目会到路由、vuex、脚手架慢慢的深层的了解。还可以说说高效性，虚拟dom和diff算法
七、说说mvc mvp mvvm
web1.0的时候 jsp php aspx ,代码难以维护
为了让开发更加便捷，代码更易维护，前后端职责更加清晰。衍生出了mvc。典型的框架Spring structs Hibernate。这种分层让前后端职责更加清晰，代码更易维护。
web2.0 ajax风靡全球 通过ajax与后台进行数据交换，前端开发人员只要开发页面这部分内容，数据由后台提供。而且ajax可以使得页面部分刷新，较少了服务端的负载和流量消耗，用户体验也更加。这时候前端库也慢慢开始发展，最著名的就是jquery
当然此框架也存在问题：当遇到复杂的业务需求的时候，页面内容都杂糅在一起，很难维护，因此前端的mvc也随之而来
mvp
mvp和mvc很接近，在安卓等原生开发中会用到。p是Presenter ，presenter可以理解为一个中间人，他负责view和model的数据流动，防止view和model直接交流
。随着应用的逐渐变大导致presenter的提价增大，难以维护。
mvvm
mvvm可以分解成（Model-View-ViewModel）ViewModel 可以理解为presenter基础上的进阶版
ViewModel通过实现一套数据响应式机制来自动响应Model数据变化，同时ViewModel会实现一套策略自动将数据的变化更新到视图上。
这样就减少了大量的Dom操作代码。
通过响应式和虚拟dom来做到数据驱动
使用户专注业务逻辑兼容开发
总结：
这三者都是框架模式，他们设计的目标都是为了解决Model 和 View的耦合问题
MVC模式出现较早 应用在后端，如Spring mvc 。优点是分层清晰，缺点是数据混乱，维护麻烦
MVP模式是MVC的进化形式，Presenter作为中间层负责mv通信，解决了两者耦合问题，但是p层过于臃肿 维护难
MVVM不仅解决了MV的耦合问题，还同时解决了维护两者映射关系的大量繁杂代码和Dom操作代码，提高开发效率、可读性同时还保持了优越的性能表现。
vue性能优化方法
1、路由懒加载
2、keep-alive缓存页面
3、使用v-show复用Dom
4、v-for遍历避免同时使用v-if
5、事件的销毁
vue组件销毁时，会自动解绑它的全部指令以及事件监听器，但是仅限组件本身的事件
created() {
this.timer = setInterval(this.refresh,2000)
}
beforeDestroy() {
clearInterval(this.timer)
}
6、图片懒加载
7、第三方插件按需引入
8、子组件切割
vue3新特点的理解
更快
1、虚拟dom重写
2、静态树和静态属性的提升
3、基于proxy的响应式系统
更小：通过摇树优化核心库体积
更容易维护：TypeScript+模块化
更容易使用
1、独立响应化模块
2、改进的TypeScript支持
3、Composion Api 类似react的hooks
vue响应式的理解
1、所谓数据响应式就是能够使数据变化可以被检测并对这种变化做出响应的机制。
2、mvvm框架中要解决的一个核心问题就是链接数据层和视图层，通过数据驱动应用，数据变化，视图更新，要做到这点就需要对数据做响应式处理，一旦数据发生变化就可以立即做出更新处理。
3、以vue为例，通过数据响应式加上虚拟dom和patch算法，可以使我们只操作数据，完全不用接触频繁的dom操作，大大提升效率降低开发难度
4、可以讲讲Object.defineProperty
网友评论