人工智能[2788]让你30分钟快速掌握vue 3[2]

三、ref() 函数

ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 value 属性, 只在setup函数内部访问ref函数需要加.value

<template>

    <div>

        {{count}} // 10

    </div>

</template>

<script>

import { defineComponent, ref } from 'vue';

export default defineComponent({

  setup() {

    const count = ref<number>(10)

    // 在js 中获取ref 中定义的值, 需要通过value属性

    console.log(count.value);

    return {

       count

    }

   }

});

</script>

在 reactive 对象中访问 ref 创建的响应式数据

<template>

    <div>

        {{count}} -{{t}} // 10 -100

    </div>

</template>

<script>

import { defineComponent, reactive, ref, toRefs } from 'vue';

export default defineComponent({

  setup() {

    const count = ref<number>(10)

    const obj = reactive({

      t: 100,

      count

    })

    // 通过reactive 来获取ref 的值时,不需要使用.value属性

    console.log(obj.count);

    return {

       ...toRefs(obj)

    }

   }

});

</script>

四、isRef() 函数

isRef() 用来判断某个值是否为 ref() 创建出来的对象

<script>

import { defineComponent, isRef, ref } from 'vue';

export default defineComponent({

  setup(props, context) {

    const name: string = 'vue'

    const age = ref<number>(18)

    console.log(isRef(age)); // true

    console.log(isRef(name)); // false

    return {

      age,

      name

    }

  }

});

</script>

我是一位爱学习的老人！本站主要是些学习体验与分享(其中会引用一些作品的原话并结合我的一生体会与经验加工整理而成！在此一并感谢！如有不妥之处敬请与我联系,我会妥善处理，谢谢！)我写的主要是中老年人各方面应注意的事儿！退休后我希望通过这个平台广交朋友，互助交流，共筑美好生活！！！！！！ 更多文章请参看http://www.赵站长的博客。期待大家的光临与指教哦^0^！欢迎大家转发！