ref()简介

1、使用前必需引入 ref

?

1 2 3 4 5

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

2、定义语法：

?

1 2 3 4 5

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

3、取值、赋值方法：

?

1 2 3

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

4、ref在模板中解包的几种场景：

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

?

1 2 3 4 5 6 7 8 9 10 11

<template>    <view>{{a}}</view> </template>   <script setup>     import {         ref     } from 'vue'       const a = ref(5) </script>

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

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

?

1 2 3 4 5 6 7 8 9 10 11

<template>    <view>{{object.foo}}</view> </template>   <script setup>     import {         ref     } from 'vue'       const object = { foo: ref(5) } </script>

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12

<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}}