半亩花田i
平时学习的笔记以及写的demo,仅供参考
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 // 取值
4、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方式,如:{{object.foo.value+1}}
 
 
posted on 2023-11-15 15:44  半亩花田i  阅读(86)  评论(0编辑  收藏  举报