vue3.0 api,vue3 组合式api
本文主要介绍vue3常见的API用法，帮助大家更好的理解和学习使用vue。感兴趣的朋友可以了解一下。
目录
生命周期变更反应。我们在vue2.x，Vue 3.x中使用ref来获取元素标签，我们应该怎么做才能获取元素标签呢？toreftorefsshalloweactiveshallowtorawmarkrawacheffectgetcurrentinstancestoruvue 3 . x发布了这么久，相关的生态也逐渐发展起来，包括vite这种新的打包工具。在vue3.0的学习过程中有一些实用的api对比，希望能在开发中给大家一个示范，准确的使用相应的api来完成我们的项目开发。
生命周期的变更
特别是setup函数代替了beforeCreate和created这两个生命周期函数，所以我们可以认为它的执行时间在beforeCreate和created之间。
Vue2
Vue3
创建前
设置
创造
设置
即将挂载
出发前
安装好的
已安装
更新前
更新前
更新
未更新
毁灭前
onBeforeUnmount
毁坏的
未安装的
了解过vue3的朋友都知道现在会用设置功能。至于设置功能中的操作数据，我们用实例来说明会更好。
reactive
使用reactive方法创建响应式数据对象，该API也解决了Vue2通过defineProperty实现数据响应的缺陷。
用法非常简单，只需将数据作为参数传入即可。
模板
div id=应用程序
！-4.访问响应数据对象中的计数-
{{ state.count }}
/div
/模板
脚本
//1.从vue导入反应
从“vue”导入{reactive}
导出默认值{
名称：“应用程序”，
setup() {
//2.创建响应数据对象
常量状态=反应性({count: 3})
//3.返回模板使用的响应数据对象状态返回。
返回{state}
}
}
/脚本
ref
在引入setup函数时，我们使用ref函数来包装一个响应式数据对象，它看起来与表面上的reactive完全一样。几乎是一样的，因为ref通过reactive包装了一个对象，然后将值传递给对象中的value属性，这就解释了为什么我们需要添加。我们每次来访都很值。
我们可以简单地把ref(obj)理解为这个reactive({value: obj})
脚本
从“vue”导入{ref，reactive}
导出默认值{
名称：“应用程序”，
setup() {
const obj={count: 3}
const state1=ref(obj)
常数状态2=反应(对象)
console.log(状态1)
console.log(状态2)
}
}
/脚本
注意：在。这里提到的值，在setup函数中访问ref-wrapped对象时需要加上，在template模板中访问时不需要，因为是否ref-wrapped会在编译时自动识别。
那么我们如何选择ref和reactive呢？
建议：
对基本类型值(String、Nmuber、Boolean等)使用ref。)或单值对象(如只有一个属性值的对象，如{count: 3})
引用类型值(对象、数组)使用reactive。
我们在vue2.x中获取元素标签是用 ref ，vue3.x我们要获取元素标签怎么办呢？
模板
差异
Div= el div元素/div
/div
/模板
脚本
从“vue”导入{ ref，onMounted }
导出默认值{
setup() {
//创建一个与元素的ref属性名同名的DOM引用
const el=ref(空)
//目标元素只能在挂载后通过el获得。
onMounted(()={
El.value.innerHTML=内容已被修改
})
//返回创建的引用。
return {el}
}
}
/脚本
获取元素的操作分为以下步骤：
首先，为目标元素的ref属性设置一个值，假设为el。
然后调用setup函数中的ref函数，值为null，赋给变量el。请注意，变量名必须与我们为元素设置的ref属性名相同。
将引用变量el返回给元素。
补充：设置的元素引用变量只有在组件挂载后才能访问，所以挂载前操作元素无效。
当然，如果我们引用一个组件元素，我们会得到组件的实例对象。
toRef
ToRef是将对象中的值转换成响应数据，它接收两个参数，第一个是obj对象；第二个参数是对象中的属性名。
脚本
//1.导入参考
从“vue”导入{toRef}
导出默认值{
setup() {
const obj={count: 3}
//2.将obj对象中属性count的值转换为响应数据。
const state=toRef(obj， count )
//3.返回由toRef包装的数据对象，供模板使用。
返回{state}
}
}
/脚本
上面还有一个裁判，还有一个斗牛士。没有冲突吗？两者具有不同的效果：
模板
p{{ state1 }}/p
按钮@click=add1 添加/按钮
p{{ state2 }}/p
按钮@click=add2 添加/按钮
/模板
脚本
从“vue”导入{ref，toRef}
导出默认值{
setup() {
const obj={count: 3}
const state1=ref(对象计数)
const state2=toRef(obj， count )
函数add1() {
状态1 .值
Console.log(原始值：，obj)；
Console.log(响应数据对象：，状态1)；
}
函数add2() {
状态2 .值
Console.log(原始值：，obj)；
Console.log(响应数据对象：，状态2)；
}
返回{状态1，状态2，添加1，添加2}
}
}
/脚本
Ref是原始数据的副本，不会影响原始值。同时，当响应数据对象的值改变时，视图将同步更新。
ToRef是对原始数据的引用，会影响原始值，但是响应数据对象的值改变后视图会更新吗？
toRefs
将传入对象中所有属性的值转换为响应数据对象。该函数支持一个参数，即obj对象。
脚本
//1.导入参考文件
从“vue”导入{toRefs}
导出默认值{
setup() {
const obj={
名称：前端印象，
年龄：22，
性别：0
}
//2.将obj对象中属性count的值转换为响应数据。
const state=toRefs(obj)
//3.打印出来看看。
console.log(状态)
}
}
/脚本
返回的是一个对象，它包含每个打包的响应数据对象。
shallowReactive
听这个API的名字就知道是浅反应。是不是说明原无功很深？是的，它是一个性能优化的API。
脚本
模板
p{{ state.a }}/p
p{{ state.first.b }}/p
p{{ state.first.second.c }}/p
按钮@click=change1 Change1/button
按钮@click=change2 Change2/button
/模板
脚本
从“vue”导入{shallowReactive}
导出默认值{
setup() {
const obj={
答：1，
首先：{
乙：2，
第二：{
丙：3
}
}
}
常量状态=浅反应(obj)
函数change1() {
状态a=7
}
函数change2() {
state.first.b=8
state.first.second.c=9
console.log(状态)；
}
返回{state}
}
}
/脚本
首先，我们单击了第二个按钮，并更改了第二个级别B和第三个级别c。虽然值发生了变化，但视图没有更新。
当我们点击第一个按钮，更改第一级的A时，整个视图被更新；
因此，shallowReactive监听第一层属性的值，并在它发生变化时更新视图。
shallowRef
这是一个浅ref，用于类似shallowReactive的性能优化。使用triggerRef，可以通过调用它立即更新视图，它接收一个参数状态，即需要更新的Ref对象。
ShallowReactive监控对象第一层的数据变化来驱动视图更新，而shallowRef监控。值来更新视图。
模板
p{{ state.a }}/p
p{{ state.first.b }}/p
p{{ state.first.second.c }}/p
Button @click=change 更改/button
/模板
脚本
从“vue”导入{shallowRef，triggerRef}
导出默认值{
setup() {
const obj={
答：1，
首先：{
乙：2，
第二：{
丙：3
}
}
}
const state=shallowRef(obj)
console.log(状态)；
函数变化(){
状态.值.第一个. b=8
状态.值.第一个.第二个. c=9
//修改值后立即驱动视图更新
triggerRef(状态)
console.log(状态)；
}
返回{状态，更改}
}
}
/脚本
toRaw
ToRaw方法用于获取ref或反应对象的原始数据。
脚本
从“vue”导入{reactive，toRaw}
导出默认值{
setup() {
const obj={
名称：前端印象，
年龄：22岁
}
常量状态=反应(对象)
const raw=toRaw(州)
console.log(obj===raw) //true
}
}
/脚本
上面的代码证明了toRaw方法是从reactive对象中获取原始数据的，所以我们可以很容易地通过修改原始数据的值来做一些性能优化，而不需要更新视图。
注意：补充一下，当toRaw方法接收的参数是ref object时，需要添加值以获取原始数据对象。
markRaw
RAW方法可以将原始数据标记为无响应，也就是用ref或reactive进行包装，但仍然无法实现数据响应。它接收一个参数，即原始数据，并返回标记的数据。即使我们修改了值，我们也不会更新视图，也就是说，我们不实现数据响应。
模板
p{{ state.name }}/p
p{{ state.age }}/p
Button @click=change 更改/button
/模板
脚本
从“vue”导入{reactive，markRaw}
导出默认值{
setup() {
const obj={
名称：前端印象，
年龄：22岁
}
//用markRaw标记原始数据obj，使其数据更新无法再被跟踪。
const raw=markRaw(obj)
//尝试用reactive包装raw，使其成为响应性数据
恒定状态=反应(原始)
函数变化(){
state.age=90
console.log(状态)；
}
返回{状态，更改}
}
}
/脚本
watchEffect
WatchEffect它与watch的区别主要在于以下几点：
不需要手动传递依赖项。
每次初始化时都会执行一个回调函数来自动获取依赖关系。
无法获取原始值，只能获取更改后的值。
脚本
从“vue”导入{reactive，watchEffect}
导出默认值{
setup() {
const state=reactive({ count: 0，name: zs })
watchEffect(()={
console.log(状态.计数)
console.log(state.name)
/*初始化时打印：
0
零偏移(zero shift)
1秒钟内打印：
一个
限位开关（Limit Switch）
*/
})
setTimeout(()={
状态.计数
state.name=ls
}, 1000)
}
}
/脚本
不像watch方法那样传入依赖项，而是直接指定回调函数。
组件初始化时，回调函数执行一次，待检测的数据是自动获取的state.count和state.name。
根据以上特点，我们可以选择使用哪个监听器。
getCurrentInstance
我们都知道，在Vue2的任何组件中，我们都可以通过这个获得当前组件的实例，但是在Vue3中，我们的很多代码都是在setup函数中运行的，这就指向了这个函数中的undefined。那么我们如何获得当前组件的实例呢？这时，可以使用另一种方法，即getCurrentInstance。
模板
p{{ num }}/p
/模板
脚本
从“vue”导入{ref，getCurrentInstance}
导出默认值{
setup() {
const num=ref(3)
const instance=getCurrentInstance()
console.log(实例)
返回{num}
}
}
/脚本
关注实例中的ctx和代理属性，这两个是我们想要的。可以看出，ctx和proxy的内容非常相似，只是后者在前者外面包裹了一层代理，可见代理是有求必应的。
useStore
在Vue2中使用Vuex时，我们都是通过这个得到Vuex的实例。$store，但是前面部分说Vue2中获取这个的方式不一样，我们在getCurrentInstance()中没有找到$store的属性。Vue3的ctx，那么如何获取Vuex的实例呢？这是通过vuex中的一个方法，即useStore。
//存储文件夹下的index.js
从“vuex”导入Vuex
const store=Vuex.createStore({
状态：{
名称：前端印象，
年龄：22岁
},
突变：{
……
},
……
})
//example.vue
脚本
//从vuex导入useStore方法
从“vuex”导入{useStore}
导出默认值{
setup() {
//获取vuex实例
const store=useStore()
console.log(存储)
}
}
/脚本
然后就可以像以前一样用vuex了。
以上就是vue3常用API的详细介绍。更多关于vue常用API的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。