mvc 和 mvvm
mvc:
- 1.View传送指令到Controller。
- 2.Controller完成业务逻辑后改变Model状态。
- 3.Model将新的数据发送至View,用户得到反馈。 mvvm:
- View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示,通过数据来显示视图层。
MVVM模式的优点:
- 低耦合:View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
- 可重用性: 可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。
- 独立开发: 开发人员可以专注于业务逻辑和数据的开发,设计人员可以专注于页面的设计。
MVVM和MVC的区别:
- MVC中Controller演变成MVVM中的ViewModel
- MVVM通过数据来显示视图层而不是节点操作
- MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低,加载速度变慢,影响用户体验
v-if和v-for的优先级
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
v-if和v-for能写在一个标签内吗
v-for的key能不写吗，为什么
接口数据请求应该放在created还是mounted，为什么
建议放在created里
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
如果在mounted钩子函数中请求数据可能导致页面闪屏问题 其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏了
Vue的两个核心思想是什么
数据驱动
组件化
vuex 数据流
当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
多个视图依赖于同一状态。 来自不同视图的行为需要变更同一状态。 对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。
因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
Vuex理解
- Vuex 是专门为Vue.js 设计的状态管理库
- Vuex 采用集中式的方式存储需要共享的状态
- Vuex 的作用是进行状态管理，解决复杂组件通信，数据共享
- Vuex 集成到了 devtools 中，提供了 time-travel 时光旅行历史回滚功能
什么时候用 Vuex
- 小型应用非必要的情况下不要使用Vuex
- 大型的单页应用程序&符合以下特征可使用Vuex
- 多个试图依赖于统一状态
- 来自不同视图的行为需要变更统一状态
在vue 上定义一个数据 循环递增一千次，页面会更新一千次吗，为什么
Vue 为什么用单数据流
vue 的数据绑定怎么实现的，用的是什么设计模式
ue.js采用数据劫持结合发布者-订阅者模式的方式实现双向绑定，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，那么在设置或者获取的时候我们就可以在get或者set方法里加入其他的触发函数，达到监听数据变动的目的。
每个组件实例都有相应的watcher实例对象，它会在组件渲染的时候把属性记录为依赖，之后当依赖的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。因此，每当数据变化的时候会引起视图的变化，更新view。
vue 是闭包吗
组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data，就会造成一个变了全都会变的结果。
watch 和 computed 的区别以及使用场景，它们是怎么实现的，computed 缓存了解吗
组件封装
vue 组件通信
vue2.0 和 vue3.0 区别
vue watch有哪些参数
简单介绍一下 vuex
vue 组件化要点
vue $nextTick() 的应用场景
Diff算法
- 在内存中构建虚拟dom树
- 将内存中虚拟dom树渲染成真实dom结构
- 数据改变的时候，将之前的虚拟dom树结合新的数据生成新的虚拟dom树
- 将此次生成好的虚拟dom树和上一次的虚拟dom树进行一次比对（diff算法进行比对），来更新只需要被替换的DOM，而不是全部重绘。在Diff算法中，只平层的比较前后两棵DOM树的节点，没有进行深度的遍历。
- 会将对比出来的差异进行重新渲染
Vue 的性能优化
- 对象层级不要过深，否则性能就会差
- 不需要响应式的数据不要放到 data 中（可以用 Object.freeze() 冻结数据）
- v-if 和 v-show 区分使用场景
- computed 和 watch 区分使用场景
- v-for 遍历必须加 key，key 最好是 id 值，且避免同时使用 v-if
- 大数据列表和表格性能优化-虚拟列表/虚拟表格
- 防止内部泄漏，组件销毁后把全局变量和事件销毁
- 图片懒加载
- 路由懒加载
- 第三方插件的按需引入
- 适当采用 keep-alive 缓存组件
- 防抖、节流运用
- 服务端渲染 SSR or 预渲染
以下为本文参考的文章：
部分内容引用自 juejin.cn/post/694786…
部分内容引用自 juejin.cn/book/684473…
