vue3相关

vue3与vue2的区别

在使用过程中我感觉区别还是挺多了.比方说,他们生命周期发生了变化,beforeCreate created被setup语法糖取代了.别的生命周期前面加了on

销毁期感觉是为了语义化吧从destroyed  变成了  onUnmounted,他们响应式的原理也发生了变化.还有从OptionsAPI变成了compositionAPI(卡姆破贼神) .还有一些treeshking

就是需要导入之后才能使用了.另外你像.vuex变成了pinia(披呢儿),webpack使用vite在开发环境下面也变的更快了.mixin不建议使用了换成了hooks等等

另外还有一些细小的.比方说v-if(更高了vue3)和v-for的优先级修改了.

绑定到原型链的方法从Vue.prototype的方式变成了app.config.globalProperties等等吧

Vue3和vue2响应式原理发生了什么变换

在vue2中数据响应式是在 初始化这个组件的时候,会递归遍历data里面所有的属性,拿到每一个属性名,通过Object.defineproperty.给属性添加上getter和setter.进行

 数据的劫持,当修改数据时候.通知这里的watcher近而修改, 最终变更到真实DOM上面去,

 但是这样响应式的数据可能出现数据变了视图层不变的情况.比方说对象新增修改的属性,是不能被监听到 因为初始化的时候就没有嘛  数组通过length修改长度都不能引起视图层变更 这个时候我们可以使用$set这个方法来解决这个问题.

但是到了vue3里面.是用ref 和reactive来实现的响应式数据,ref里面可以放基本类型.和引用类型 .reactive里面声明引用类型.而且ref在js操作的时候要使用.value属性.

当ref里面是引用类型的时候.其实内部是调用了reactive.底层是用了proxy   而proxy是对整个大对象的监听.就不存在vue2那种问题.所以就用不到$set了

 $set的原理::

 实际上.在这个api里面 当传入的是对象的时候.相当于重新调用Object.defineproperty.给这一个属性,添加上getter和setter,重新进行数据劫持监听

 当传入的是数组的时候 是调用了数组的splice方法,在vue里面重写了数组的七个方法(push,pop,shift,unshift,sort,reverse,splice).修改了原型链的指向.

 然后在调用这个方法的时候.会去执行视图层变更的方法;变成响应式的

Vue3中组件的通信方式

1. Props方式(父往子)

父组件以数据绑定的形式声明要传递的数据，子组件通过defineProps()方法接收

父组件传递的值通过对象的方式接收,：

子组件：

1. emit方式(子往父)

子组件中通过defineEmits注册自定义事件.然后再派发这个自定义事件,父组件中通过监听这个事件获取值;

父组件的template中：

子组件：

1. provide/inject(vue2里面也有)

provide/inject是 Vue 中提供的一对 API。无论层级多深，API 都可以实现父组件到子孙组件的数据传递。

1. 3. v-model方式(可以不说到传值上,但是要记住使用,而且vue2里面是通过它的sync修饰符)

v-model不能严格成为数据的传递方式，其实只是减少了代码量。

子组件需要emit一个叫update:xxx的事件，再把需要更新的响应式数据传给emit方法的第二个参数即可，如：

1. Refs

在vue2中我们可以通过this.$refs.子组件写的属性值.子组件的方法/属性,

也可以在子组件中通过this.$parent.属性/方法来调用父组件的属性和方法

但是Vue3不同于Vue2，在 Vue3的setup中我们是无法访问到this的，所以我们需要借助getCurrentInstance，返回了当前的实例对象(或者是使用ref,const 组件身上的ref值= ref(null))。并且在子组件中必须通过defineExpose向外暴露你想获取的值.父组件才能获取到;

父组件如下：

Const {proxy} =getCurrentInstance();   //proxy可以充当this;

子组件代码如下：

1. eventBus

Vue 3 中移除了 eventBus，但可以借助第三方工具来完成。Vue 官方推荐使用 mitt 或 tiny-emitter。

1. vuex/pinia

Vuex 和 Pinia 是 Vue 3 中的状态管理工具，使用这两个工具可以轻松实现组件通信。

vue3生命周期

选项式API            组合式API

beforeCreate    ==    setup 

created             ==    setup

beforeMount     ==    onBeforeMount

mounted           ==    onMounted

beforeUpdate   ==  onBeforeUpdate

updated            ==  onUpdated

beforeDestroy  ==    onBeforeUnmount

destroyed         ==    onUnmounted

errorCaptured  ==    onErrorCaptured

keep-alive标签 

activated          ==    onActivated

deactivated       ==   onDeactivated

vue3 自定义指令

1. vue2 升级到 vue3 ，自定义指令的生命周期钩子函数发生了改变，具体变化如下：
2. inserted 被移除 替换成了mounted。[必须记住:涉及权限按钮功能的实现]
3. bind 函数被替换成了beforeMounted。
4. update 被移除。
5. componentUpdated 被替换成了updated。
6. unbind 被替换成了 unmounted。

自定义指令钩子函数的参数

1. el：指令所绑定的元素，可以直接操作DOM。
2. binding：是一个对象，包含该指令的所有信息。

binding 包含的属性具体的分别为：

1. arg自定义指令的参数名。
2. value自定义指令绑定的值。
3. oldValue指令绑定的前一个值。
4. dir被执行的钩子函数
5. modifiers：一个包含修饰符的对象。

Vue3 hooks

总结成自己的话:

Vue3中新增了hooks类似于vue2的mixins混入

我理解的hooks就是可以提取组件中公共的部分到外面变成一个js文件进行复用.在里面可以用compositionapi引入的东西.比方说ref computed生命周期一类的,而且在组件中使用的时候,解构出来也是响应式的

定义的时候尽量用use开头 最后把需要用到的属性,函数等抛出.组件里面解构使用,这样复用性更强.而且相比较mixins.在调试报错的时候更方便寻找.不会出现冲突覆盖等问题.

Vue2 mixin

可以把组件中公共的逻辑以及api钩子函数等进行抽取在组件里面使用mixins:[抽离出去的js].

特点：Mixin中的数据和方法都是独立的，组件之间使用后是互相不影响的

如果命名冲突了.有覆盖规则

值是对象的(不包括watch,包括data),,比方说,components,directives,methods/当组件中和mixins冲突的时候.是组件的覆盖mixin的

生命周期是两边都执行.先执行mixins的再执行组件的

若依里面那个vue2适配echarts,对mixins的使用