Vue面试题01

说出vue常用的指令：

v-text,  v-html,  v-bind,  v-for,  v-if,  v-else,  v-else-if,   v-show,    v-on,

谈谈你对MVC的理解：

MVC是软件开发中常见的开发模式，主要应用于后端，将程序划分为M模型、V视图、C控制器从而便于团队协作开发，减少代码冗余

谈你对MVVM理解：

Model层代表数据模型、
View层代表UI组件、ViewModel是Model、View层的桥梁，数据会绑定到ViewModel并监控模型数据变化自动更新同步到页面，视图变化会通知ViewModel层更新数据。

谈谈MVVM和MVC区别：

相同点：都是软件开发常见的开发模式或者开发思想

不同点：

1- MVC后端居多，MVVM前端
2- MVC单向通信 目的将M和V代码分离，MVVM则是双向通信，不需要手动操作DOM

说一下v-show、v-if的区别：

都可以控制元素隐藏显示，v-if语法更强、控制DOM、v-show控制CSS

高频切换例如二维码、登录弹框、提示框、删除提示框、tab选项卡，推荐使用v-show 来减少DOM频繁删除创建所产生的额外性能开销

判断循环v-if、v-for优先级：

在 vue 2中，在一个元素上同时使用 v-if 和 v-for 时，v-for的优先级高于v-if   　　缺点：会产生不必要的性能开销

而在 vue 3 中，　v-if的优先级高于v-for　　　　　　　　　　　　vue3 解决了这个问题，v-if判断为false 后，不会执行v-for

说一下v-model原理：

v-model其底层是基于【:value】和【@input】 封装的语法糖

VUE2响应式原理（中级）：

Vue初始化数据时，底层会通过Object.defineProperty对data中的模型数据进行数据劫持，数据变化会通知进行更新操作。

VUE2响应式原理（高级）：

底层通过Object.defineProperty进行数据劫持结合   发布订阅模式      通知视图更新。

（Vue是采用数据劫持结合发布/订阅模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。）

VUE2响应式数据无法劫持原因、和解决方案：

Object.defineProperty    不支持  复杂数据类型   劫持

对象递归 、数组重写 、额外api （$forceUpdate() 、$set）

$forceUpdate 原理：

调用 notify（）  强制视图更新

$set 原理：

defineReactive(this.data数据, 要劫持得数组索引或对象键, 默认值)     建立响应式依赖    指定数据更新

VUE3响应式原理：

proxy 构造函数结合 Reflect 内置对象 拦截

-Object.defineProperty 拦截的是对象的属性，会改变原对象。 proxy 是拦截整个对象，通过 new 生成一个新对象，不会改变原对象。
- proxy 语法更强，拦截方式除了上面的 get 和 set ，还有 11 种，以前就6个
- proxy 特性更强，可以监听未定义的，针对于N层则get时判断递归添加proxy拦截即可