vue3中声明响应式数据ref和reactive

vue2的双向数据绑定是在data中,不论基本数据类型还是引用数据类型。

data() {
    return {
      colNum: 10,
      rowNum: 10,
      formData: {
        rackId: "",
        mapDetail: [],
      },
    };
  }

vue3中的双向数据绑定依赖了ref和reactive

ref是绑定基本数据类型的

reactive一般是绑定引用数据类型的。

ref可绑定:

  • String
  • Number
  • BigInt
  • Boolean
  • Symbol
  • Null
  • Undefined
  • Array

注:ref绑定的数据在setup里要用.value,在模板里则不用,模板直接识别

reactive可绑定:

  • Object
  • Array
  • Function

注:toRefs()函数可以将reactive()创建出来的响应式对象,转换为普通对象,在模板中就可以直接使用属性,不用obj.name

例:

<template>
    <section>
        <div>num:{{ num }}</div>
        <div>arr2:{{ arr2 }}</div>
        <div>type:{{ type }}</div>
        <div>name:{{ name }}</div>
        <div>age:{{ age }}</div>
        <div>arr:{{ arr }}</div>
        <button @click="addArr2">add arr2</button>
        <button @click="addNum">add num</button>
        <button @click="addArr">add arr</button>
    </section>
</template>

<script>
import { reactive, ref, toRefs } from "vue";
export default {
    setup() {
        const num = ref(1);
        const arr2 = ref([2, 2, 2, 2]);
        const type = ref("test");
        const obj = reactive({
            name: "猫猫草",
            age: 50,
        });
        const { name, age } = toRefs(obj);
        const arr = reactive([0, 1, 2, 3, 4]);
        const addNum = () => {
            num.value++;
        };
        const addArr = () => {
            arr[0]++;
        };
        const addArr2 = () => {
            arr2.value[0]++;
        };
        return {
            num,
            arr2,
            type,
            ...{ name, age },
            arr,
            addNum,
            addArr,
            addArr2,
        };
    },
};
</script>

<style lang="scss">
</style>

目前刚接触,理解得还不是很透彻~有啥不对请谅解!

原文链接:,转发请注明来源!

发表评论