文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3中Composition API怎么用

2023-06-22 01:15

关注

这篇文章主要为大家展示了“Vue3中Composition API怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue3中Composition API怎么用”这篇文章吧。

什么是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直接进行双向数据绑定。

<input type="text" v-model="title"><input type="text" v-model="userinfo.username">

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中的生命周期钩子函数

Vue3中Composition API怎么用

在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

父组件进行传值。

<Search :msg="msg" />

声明接收

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: {  }}

声明接收后可以直接使用。

<template>  <div class="container">    这是Location组件    {{title}}  </div></template>
export default {  data() {    return {      title: "根组件的数据"    }  },  components: {    Home  },  provide() {    return {      title: this.title    }  }}

注意:上面的一般用法中,如果父组件中的数据发生了变化,子组件的不会发生变化,因此推荐使用下面的composition API中的provide与inject能够实现同步变化。

setup中的provide与inject

根组件

import Home from './components/Home.vue'import {ref,provide} from 'vue'export default {  setup() {    let title = ref('app根组件里面的title');    let setTitle = () => {      title.value = "改变后的title"    }    provide("title",title);    return {      title,      setTitle    }  },  data() {    return {    }  },  components: {    Home  }}

用到数据的组件

import {inject} from 'vue'export default {  setup() {    let title = inject('title');    return {      title    }  },  data() {    return {    }  },  components: {  }}

与props不同的是,子组件中的数据如果使用了双向数据绑定会同步到父组件。

以上是“Vue3中Composition API怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯