这篇文章主要为大家展示了“Vue3中Composition API怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue3中Composition API怎么用”这篇文章吧。
成都创新互联公司从2013年成立，是专业互联网技术服务公司，拥有项目网站设计制作、成都网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元临川做网站,已为上家服务,为临川各地企业和个人服务,联系电话:028-86922220
什么是Composition API?
Composition API也叫组合式API，是Vue3.x中的新特性。通过创建Vue组件，我们可以将接口的可重复部分提取到可重用的代码段中，没有Composition API之前Vue相关业务的代码需要配置到option的特定区域，如果在大型项目中这种方式会导致后期的维护性比较复杂，同时代码可复用性不高，Vue3的Composition API就是解决这个问题的。
在setup中使用ref和reactive定义响应式数据
使用ref和reactive定义数据前，需要从vue中进行解构。
import {ref,reactive} from 'vue';ref和reactive均可以定义响应式数据，定义的数据在Vue模板中可以直接获取，但是如果通过方法获取的话，ref和reactive定义的数据在获取上有一定的差异，ref定义的需要通过value属性间接获取，reactive定义的数据可以直接获取，在修改这两类数据也是如此。
export default {
setup() {
// 使用ref定义响应式数据
const title = ref("这是一个标题");
// 使用reactive定义响应式数据
const userinfo = reactive({
username: "张三",
age: 20
});
// 获取reactive中的属性可以直接获取
const getUserName = () => {
alert(userinfo.username)
};
// 获取ref中的数据需要通过value属性
const getTitle = () => {
alert(title.value)
};
const setUserName = () => {
// 修改reactive中的属性可以直接修改
userinfo.username = "修改后的张三"
};
const setTitle = () => {
// 修改ref中的属性，需要通过value
title.value = "这是修改后的标题"
};
return {
title,
userinfo,
getUserName,
getTitle,
setTitle,
setUserName
}
},
data() {
return {
msg: "这是Home组件的msg"
}
},
methods: {
run() {
alert('这是Home组件的run方法')
}
}
}可以使用v-model直接进行双向数据绑定。
toRefs解构响应式对象数据
之所以需要toRefs是因为通过toRefs解构的数据还具有响应式的特性，通过传统的拓展运算符进行解构则不具备了响应式的特性，这就是为什么需要toRefs的原因。
从vue中解构出toRefs
import {ref,reactive,toRefs} from 'vue';setup的返回数据中进行如下的修改
return {
title,
userinfo,
getUserName,
getTitle,
setTitle,
setUserName,
...toRefs(article)
}setup中的计算属性
setup中的计算属性和一般的计算属性类似，区别在于无法读取到this。
setup() {
let userinfo = reactive({
firstName: "",
lastName: ""
});
let fullName = computed(() => {
return userinfo.firstName + " " + userinfo.lastName
})
return {
...toRefs(userinfo),
fullName
}
}readonly:深层的只读代理
readonly存在的意义是能够将响应式对象转换为普通的原始对象。
引入readonly。
import {computed, reactive,toRefs,readonly} from 'vue'给readonly传入响应式对象。
let userinfo = reactive({
firstName: "666",
lastName: ""
});
userinfo = readonly(userinfo);setup中的watchEffect
setup中的watchEffect具有以下几个特点。
能够监听setup中的数据变化，数据一旦变化就会执行watchEffect中的回调函数。
及时setup中的数据没有变化，初始的时候也会执行一次。
setup() {
let data = reactive({
num: 1
});
watchEffect(() => {
console.log(`num2=${data.num}`);
});
setInterval(() => {
data.num++;
},1000)
return {
...toRefs(data)
}
}setup中的watch
使用watch监控数据的基本方法。
setup() {
let keyword = ref("111");
watch(keyword,(newData,oldData) => {
console.log("newData是：",newData);
console.log("oldData是：",oldData);
})
return {
keyword
}
}watch与watchEffect的区别
watch在首次页面渲染的时候不会执行，但是watchEffect会。
watch能够获取到数据状态变化前后的值。
setup中的生命周期钩子函数
在setup中生命周期钩子类似于直接调用一个函数。
setup() {
let keyword = ref("111");
watch(keyword,(newData,oldData) => {
console.log("newData是：",newData);
console.log("oldData是：",oldData);
})
onMounted(() => {
console.log('onMounted');
})
onUpdated(() => {
console.log('onUpdated');
})
return {
keyword
}
}setup中的props
父组件进行传值。
声明接收
props: ['msg'],
setup(props) {
console.log(props);
}Provide与inject
有时，我们需要将数据从父组件传递到子组件，但是如果父组件到子组件是一个嵌套很深的关系，通过props进行传递将变得很麻烦，这种情况下，我们可以使用provide和inject来实现。
根组件通过provide传递数据。
export default {
data() {
return {
}
},
components: {
Home
},
provide() {
return {
title: "app组件里面的标题"
}
}
}需要接收数据的组件通过inject声明接收
export default {
inject: ['title'],
data() {
return {
}
},
components: {
}
}声明接收后可以直接使用。
这是Location组件
{{title}}
注意:上面的一般用法中，如果父组件中的数据发生了变化，子组件的不会发生变化，因此推荐使用下面的composition API中的provide与inject能够实现同步变化。
以上是“Vue3中Composition API怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
重庆分公司
重庆分公司
