vue3详解大全，vue3 组件
很多朋友对于vue3详解大全和vue3 组件不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
vue3生命周期及生命周期函数(钩子函数)详解通俗易懂
Vue实例从创建到销毁的过程，就是生命周期。就是vue实例从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，在vue生命周期中提供了一系列的生命周期函数，如下图所示：
在某一时刻会自动执行的函数
在vue实例生成前,初始化后会自动执行的函数（此时vue实例并未完全创建出来）
在vue实例创建完成之后会自动执行的函数（vue实例创建完成）
示例如下：
打印结果：
把组件内容渲染到页面之前自动执行的函数（相关的render函数首次被调用）
把组件内容渲染到页面之后自动执行的函数
示例如下：
打印结果：下图beforeMount被打印但是组件内容未挂载到contentMain节点下
当data中的数据发生变化时会自动执行的函数
当data中的数据发生变化且页面数据重新渲染后会自动执行的函数（在大多数情况下，避免在此期间更改状态，可能会导致更新无限循环）
示例如下：
打印结果：
vue实例销毁前自动执行的函数（此时实例仍然可用）
vue实例失效且dom完全销毁后自动执行的函数（此时所有东西都会解绑定，所有的事件监听器会被移除，子实例也会被销毁）
示例如下：
打印如下：
vue3特性笔记
我们把vue3和 vue2的项目进行对比来去说明
综上所述，在 vue3的初始化项目中，与 vue2对比的最大差异其实就是两点：
setup函数也是 Composition API的入口函数，我们的变量、方法都是在该函数里定义的，不再使用vue2中的data而是setup。
reactive方法是用来创建一个响应式的数据对象，该API也很好地解决了Vue2通过 defineProperty实现数据响应式的缺陷
上面使用name必须state.name，不方便，另一个解决办法如下
执行 setup时，组件实例尚未被创建。因此，你只能访问以下 property： props attrs slots emit
换句话说，你将无法访问以下组件选项：
data computed methods
在Vue3中，这些生命周期部分有所变化，并且调用的方式也有所改变
Ts可指定类型，而不是以往所有对象参数都是object的any类型
另外Props可以提出来
h函数只是createVNode的简单封装，所以把h函数替换为createVNode也是一样的
ref就是通过 reactive包装了一个对象，然后是将值传给该对象中的 value属性，这也就解释了为什么每次访问时我们都需要加上.value。
我们可以简单地把 ref(obj)理解为这个样子 reactive({value: obj})
watch和 watchEffect都是用来监视某项数据变化从而执行指定的操作的，但用法上还是有所区别
watchEffect：
1、不需要手动传入依赖
2、每次初始化时会执行一次回调函数来自动获取依赖
3、无法获取到原值，只能得到变化后的值
助你上手Vue3全家桶之Vue3教程
这些内容是博主在学习过程中记录下来的，有一些不重要的点就跳过了，需要时自行查询文档。其实 V2到 V3的学习成本不高，熟悉 V2的话，看完这篇文章就可以上手 V3。
Vue3官网
在线源码编译地址
setup是所有 Composition API的容器，值为一个函数。组件中所用到的数据、方法等等，均要配置在 setup中，它会在 beforeCreate之前执行一次，注意： V3里 this不再是指向 Vue实例，访问 this会是 undefined
尽量不要与V2配置混用
V2配置（ data、 methos、 computed...）中可以访问到 setup中的属性、方法。
但在 setup中不能访问到 V2配置（ data、 methods、 computed...）。
如果有重名, setup优先。
setup不能是一个async函数
因为返回值不再 return的对象,而是 promise,模板看不到 return对象中的属性。（后期也可以返回一个 Promise实例，但需要 Suspense和异步组件的配合）
使用 ref可以创建一个包含响应式数据的引用对象（reference对象，简称ref对象），可以是基本类型、也可以是对象。
语法
定义一个对象类型的响应式数据，内部基于 ES6的 Proxy实现，通过代理对象操作源对象内部数据进行操作
语法
与 V2中 computed配置功能一致
语法
与 V2中 watch配置功能一致，语法有点改动
语法
和 watch的区别是， watch既要指明监视的属性，也要指明监视的回调。而 watchEffect，不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性，不用写返回值。
语法
生命周期全都写在 setup中
创建一个 ref对象，其 value值指向另一个对象中的某个属性
语法
将响应式对象转换为普通对象，其中结果对象的每个 property都是指向原始对象相应 property的 ref
语法
只处理对象最外层属性的响应式（浅响应式）。适用于：一个对象数据，结构比较深,但变化时只是外层属性变化
语法
只处理基本数据类型的响应式,不进行对象的响应式处理。适用于：一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换
语法
让一个响应式数据变为只读的（深只读），应用于不希望数据被修改时
语法
让一个响应式数据变为只读的（浅只读），应用于不希望数据被修改时
语法
将一个由reactive生成的响应式对象转为普通对象，对这个普通对象的所有操作，不会引起页面更新。
语法
标记一个对象，使其永远不会再成为响应式对象，有些值不应被设置为响应式的，例如复杂的第三方类库等，当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。
语法
创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track和 trigger函数作为参数，并且应该返回一个带有 get和 set的对象。
语法
实现祖与后代组件间通信，父组件有一个 provide选项来提供数据，后代组件有一个 inject选项来开始使用这些数据
语法
检查一个值是否为一个 ref对象
语法
检查一个值是否为一个 isReactive对象
语法
检查一个对象是否是由 readonly创建的只读代理
语法
检查对象是否是由 reactive或 readonly创建的 proxy
语法
Teleport提供了一种干净的方法，允许我们控制在 DOM中哪个父节点下渲染了 HTML，而不必求助于全局状态或将其拆分为两个组件。
语法
等待异步组件时先渲染一些额外内容，让应用有更好的用户体验
语法
将全局的API，即：Vue.xxx调整到应用实例（app）上
由于 V3中不在存在 this，所以 ref的获取调整了
语法
V3中在 for循环元素上绑定 ref将不再自动创建$ref数组。要从单个绑定获取多个 ref，请将 ref绑定到一个更灵活的函数上
语法
定义一个组件可以向其父组件触发的事件
使用方式修改
通过事件来监听组件生命周期中的关键阶段
语法
如果看了觉得有帮助的，我是@鹏多多11997110103，欢迎点赞关注评论；
END
往期文章
个人主页
好了，文章到这里就结束啦，如果本次分享的vue3详解大全和vue3 组件问题对您有所帮助，还望关注下本站哦！