×
  • Web前端首页
  • VueJs
  • Vue基础知识:学习ref() - 定义响应式变量且可以定义任意类型

Vue基础知识:学习ref() - 定义响应式变量且可以定义任意类型

作者:Terry2023.02.23来源:Web前端之家浏览:3142评论:0
关键词:vueref

今天我们来学习一个Vue基础知识点:关于ref()的一些了解。

ref() : 定义响应式变量,它可以定义任意类型。

1、使用前必需引入 ref

<script setup>
    import {
        ref
    } from 'vue'
</script>

2、定义语法:

const a= ref(0)
const b = ref(null)
const c = ref({})
const d = ref(false)
const e = ref([])

3、取值、赋值方法:

const num = ref(0)
num.value = 20 // 赋值
const a = num.value // 取值

VUE官方目前开发的响应性语法糖功能还在测试中,该功能可以去掉.value的取值、赋值方式,像普通变量一样使用。不过当前uni-app还未支持。

响应性语法糖代码:

<script setup>    
    // 官方文档:https://cn.vuejs.org/guide/extras/reactivity-transform.html
    let count = $ref(0)
    console.log(count)
</script>

关于响应式语法糖介绍可以点击: Vue进阶:详细了解响应式语法糖的来龙去脉

4、ref响应式类型: 是任意类型。这是它与reactive的明显区别。 

 5、ref在模板中解包的几种场景:

 a) ref在模板中作为顶层属性被访问时,会被自动解包,不需要使用.value取值,如:

<template>
   <view>{{a}}</view>
</template>

<script setup>
    import {
        ref
    } from 'vue'

    const a = ref(5)
</script>

 b) 不是顶层属性时,且不参与混合语法,自动解包:

本例中 object.foo 属于子节点,所以不是顶层属性,但是它能正常解包

<template>
   <view>{{object.foo}}</view>
</template>

<script setup>
    import {
        ref
    } from 'vue'

    const object = { foo: ref(5) }
</script>

c) 不是顶层属性时,且参与混合语法,无法解包:

在本例中object.foo不是顶层属性,且它参与了计算,所以无法正常解包

<template>
    <!-- 这里混合参与计算,打印结果为:[object Object]1 -->
   <view>{{object.foo+1}}</view>
</template>

<script setup>
    import {
        ref
    } from 'vue'

    const object = { foo: ref(5) }
</script>

在上例中,如果想正常显示,可以加上.value方式,如:<view>{{object.foo.value+1}}</view>


您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejsref20230223.html

网友评论文明上网理性发言 已有0人参与

发表评论: