Vue2和Vue3

原理

Vue2 响应式原理是利用es5的 Object.defineProperty()对数据进行劫持结合发布订阅模式来实现
Vue3 响应式原理是利用es6的 proxy 对数据代理，通过reactive() 函数给每一个对象都包一层 proxy，通过 proxy 监听属性的变化，从而实现对数据的监控

 

Object.defineProperty的缺陷

对象新增、删除属性没有响应式，数组新增、删除元素没有响应式；通过下标修改某个元素没有响应式；通过.length改变数组长度没有响应式。只有实例创建时 data 中有的数据实例创建后才是响应式的，给已创建好的 vue 实例 data 对象中添加属性时，数据虽然会更新，但视图不会更新，不具有响应式

 

Hooks在前端领域并没有明确定义，借用知乎大佬的定义：在JS里是callback,事件驱动，集成定义一些可复用的方法。

hooks的作用

以函数形式抽离一些可复用的方法像钩子一样挂着，随时可以引入和调用，实现高内聚低耦合的目标；

1. 将可复用功能抽离为外部JS文件

2. 函数名/文件名以use开头，形如：useXX

3. 引用时将响应式变量或者方法显式解构暴露出来如：const {nameRef，Fn} = useXX()（在setup函数解构出自定义hooks的变量和方法）

Vue3自定义Hooks和Vue2时代Mixin的关系

Mixin/Class的局限性

在以往VUE2的选项式API中，主要通过Mixin或是Class继承来实现逻辑复用，但这种方式有三个明显的短板：

• 不清晰的数据来源：当使用了多个mixin/class时，哪个数据是哪个模块提供的将变得难以追寻，这将提高维护难度
• 命名空间冲突：来自多个class/mixin的开发者可能会注册同样的属性名，造成冲突
• 隐性的跨模块交流：不同的mixin/class之间可能存在某种相互作用，产生未知的后果

Hooks的优势

其实Mixin/Class的缺点反过来就是Hooks的优点：

• 清晰一目了然的源头：Hooks不是一个类，没有将状态、方法存放在对象中，然后通过导出对象的形式实现复用，也就不会有对象间过度耦合、干扰等问题。Hooks中的各类状态是封装在内部的，与外界隔离，仅暴露部分函数、变量，这使得其来源、功能清晰可辨且不易被干扰
• 没有命名冲突的问题：Hooks本质是闭包函数，内部所导出的变量、方法支持重命名，因而同一个Hook在同一个组件中可以N次使用而不冲突
• 精简逻辑：一个Hook开发完成后，在使用Hook时不需要关心其内部逻辑，只需知道有什么效果、如何使用即可，专注于其他核心业务逻辑，可以节省大量重复代码

 

v-for 和 v-if 的区别

在vue2中v-for与 v-if 可以同时用，【优先级】：v-for > v-if  

v-for的优先级比v-if高,所以可以一起用, 但是每次页面渲染的时候都会重复的进行判断是十分消耗性能的,不推荐使用

因为v-if和v-for在同一层级,Vue在渲染组件的时 先根据v-for遍历所有 数据 并将他们都生成对应的虚拟DOM,之后再根据v-if的判断去对不符合条件的 元素进行从虚拟DOM的删除

这里为什么不推荐显而易见: 就是因为 会先执行v-for循环遍历出所有的数据 但是这个时候不是先进行v-if的 判断而是会去先对所有的数据都生成对应的虚拟DOM 然后再去通过v-if的判断 去 去掉不符合条件的虚拟DOM 这样就会造成性能的消耗 生成了没必要的虚拟 DOM元素 并且还对这些没必要的虚拟DOM元素进行了一次删除大大提高了 性能的损耗

Vue3中正好相反 v-if  > for 【优先级】 v-if > v-for

所以在Vue3中想要把v-if和v-for一起放在标签内一起使用是不可能的会直接报错

原因：在Vue3中的v-if是比v-for的优先级高的 所以会先执行v-if但是v-if 的执行又需要依靠到v-for的数据 但是这里是先执行v-if这个时候v-for还没有遍历数据 所以会报一个当前v-if判断的变量还没有被定义的错误

解决方案
1：嵌套使用
2：使用computed计算属性或提前对数组进行filter过滤操作