介绍Vue3中Composition API及其核心用法

 3976

Vue3中Composition API的核心用法


什么是Composition API?

Composition API也叫组合式API,是Vue3.x中的新特性。通过创建Vue组件,我们可以将接口的可重复部分提取到可重用的代码段中,没有Composition API之前Vue相关业务的代码需要配置到option的特定区域,如果在大型项目中这种方式会导致后期的维护性比较复杂,同时代码可复用性不高,Vue3的Composition API就是解决这个问题的。


在setup中使用ref和reactive定义响应式数据

使用ref和reactive定义数据前,需要从vue中进行解构。

  1. import {ref,reactive} from 'vue';

ref和reactive均可以定义响应式数据,定义的数据在Vue模板中可以直接获取,但是如果通过方法获取的话,ref和reactive定义的数据在获取上有一定的差异,ref定义的需要通过value属性间接获取,reactive定义的数据可以直接获取,在修改这两类数据也是如此。

  1. export default {
  2.   setup() {
  3.     // 使用ref定义响应式数据
  4.     const title = ref("这是一个标题");
  5.     // 使用reactive定义响应式数据
  6.     const userinfo = reactive({
  7.       username: "张三",
  8.       age: 20
  9.     });
  10.     // 获取reactive中的属性可以直接获取
  11.     const getUserName = () => {
  12.       alert(userinfo.username)
  13.     };
  14.     // 获取ref中的数据需要通过value属性
  15.     const getTitle = () => {
  16.       alert(title.value)
  17.     };
  18.     const setUserName = () => {
  19.       // 修改reactive中的属性可以直接修改
  20.       userinfo.username = "修改后的张三"
  21.     };
  22.     const setTitle = () => {
  23.       // 修改ref中的属性,需要通过value
  24.       title.value = "这是修改后的标题"
  25.     };
  26.     return {
  27.       title,
  28.       userinfo,
  29.       getUserName,
  30.       getTitle,
  31.       setTitle,
  32.       setUserName
  33.     }
  34.   },
  35.   data() {
  36.     return {
  37.       msg: "这是Home组件的msg"
  38.     }
  39.   },
  40.   methods: {
  41.     run() {
  42.       alert('这是Home组件的run方法')
  43.     }
  44.   }
  45. }

可以使用v-model直接进行双向数据绑定。

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


toRefs解构响应式对象数据

之所以需要toRefs是因为通过toRefs解构的数据还具有响应式的特性,通过传统的拓展运算符进行解构则不具备了响应式的特性,这就是为什么需要toRefs的原因。

从vue中解构出toRefs

  1. import {ref,reactive,toRefs} from 'vue';

setup的返回数据中进行如下的修改

  1. return {
  2.   title,
  3.   userinfo,
  4.   getUserName,
  5.   getTitle,
  6.   setTitle,
  7.   setUserName,
  8.   ...toRefs(article)
  9. }


setup中的计算属性

setup中的计算属性和一般的计算属性类似,区别在于无法读取到this。

  1. setup() {
  2.     let userinfo = reactive({
  3.       firstName: "",
  4.       lastName: ""
  5.     });
  6.     let fullName = computed(() => {
  7.       return userinfo.firstName + " " + userinfo.lastName
  8.     })
  9.     return {
  10.       ...toRefs(userinfo),
  11.       fullName
  12.     }
  13.   }


readonly:深层的只读代理

readonly存在的意义是能够将响应式对象转换为普通的原始对象。

引入readonly。

  1. import {computed, reactive,toRefs,readonly} from 'vue'

给readonly传入响应式对象。

  1. let userinfo = reactive({
  2.   firstName: "666",
  3.   lastName: ""
  4. });
  5. userinfo = readonly(userinfo);


setup中的watchEffect

setup中的watchEffect具有以下几个特点。

能够监听setup中的数据变化,数据一旦变化就会执行watchEffect中的回调函数。

及时setup中的数据没有变化,初始的时候也会执行一次。

  1. setup() {
  2.     let data = reactive({
  3.       num: 1
  4.     });
  5.     watchEffect(() => {
  6.       console.log(`num2=${data.num}`);
  7.     });
  8.     setInterval(() => {
  9.       data.num++;
  10.     },1000)
  11.     return {
  12.       ...toRefs(data)
  13.     }
  14.   }


setup中的watch

使用watch监控数据的基本方法。

  1. setup() {
  2.     let keyword = ref("111");
  3.     watch(keyword,(newData,oldData) => {
  4.       console.log("newData是:",newData);
  5.       console.log("oldData是:",oldData);
  6.     })
  7.     return {
  8.       keyword
  9.     }
  10.   }


watch与watchEffect的区别

watch在首次页面渲染的时候不会执行,但是watchEffect会。

watch能够获取到数据状态变化前后的值。


setup中的生命周期钩子函数


介绍Vue3中Composition API及其核心用法


在setup中生命周期钩子类似于直接调用一个函数。

  1. setup() {
  2.   let keyword = ref("111");
  3.   watch(keyword,(newData,oldData) => {
  4.     console.log("newData是:",newData);
  5.     console.log("oldData是:",oldData);
  6.   })
  7.   onMounted(() => {
  8.     console.log('onMounted');
  9.   })
  10.   onUpdated(() => {
  11.     console.log('onUpdated');
  12.   })
  13.   return {
  14.     keyword
  15.   }
  16. }

setup中的props

父组件进行传值。

  1. <Search :msg="msg" />

声明接收

  1. props: ['msg'],
  2.   setup(props) {
  3.     console.log(props);
  4.   }


Provide与inject

有时,我们需要将数据从父组件传递到子组件,但是如果父组件到子组件是一个嵌套很深的关系,通过props进行传递将变得很麻烦,这种情况下,我们可以使用provide和inject来实现。

一般用法

根组件通过provide传递数据。

  1. export default {
  2.   data() {
  3.     return {
  4.     }
  5.   },
  6.   components: {
  7.     Home
  8.   },
  9.   provide() {
  10.     return {
  11.       title: "app组件里面的标题"
  12.     }
  13.   }
  14. }

需要接收数据的组件通过inject声明接收

  1. export default {
  2.   inject: ['title'],
  3.   data() {
  4.     return {
  5.     }
  6.   },
  7.   components: {
  8.   }
  9. }

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

  1. <template>
  2.   <div class="container">
  3.     这是Location组件
  4.     {{title}}
  5.   </div>
  6. </template>


provide能够获取到this中的数据

  1. export default {
  2.   data() {
  3.     return {
  4.       title: "根组件的数据"
  5.     }
  6.   },
  7.   components: {
  8.     Home
  9.   },
  10.   provide() {
  11.     return {
  12.       title: this.title
  13.     }
  14.   }
  15. }

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


setup中的provide与inject

根组件

  1. import Home from './components/Home.vue'
  2. import {ref,provide} from 'vue'
  3. export default {
  4.   setup() {
  5.     let title = ref('app根组件里面的title');
  6.     let setTitle = () => {
  7.       title.value = "改变后的title"
  8.     }
  9.     provide("title",title);
  10.     return {
  11.       title,
  12.       setTitle
  13.     }
  14.   },
  15.   data() {
  16.     return {
  17.     }
  18.   },
  19.   components: {
  20.     Home
  21.   }
  22. }

用到数据的组件

  1. import {inject} from 'vue'
  2. export default {
  3.   setup() {
  4.     let title = inject('title');
  5.     return {
  6.       title
  7.     }
  8.   },
  9.   data() {
  10.     return {
  11.     }
  12.   },
  13.   components: {
  14.   }
  15. }

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


本文网址:https://www.zztuku.com/detail-10399.html
站长图库 - 介绍Vue3中Composition API及其核心用法
申明:本文转载于《掘金社区》,如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐