Vue3快速入门-ref

最新推荐文章于 2024-05-06 21:59:32 发布

原创最新推荐文章于 2024-05-06 21:59:32 发布 · 364 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue3快速入门专栏收录该内容

17 篇文章

订阅专栏

查看本系列文章合集click me

下载本系列文章源码click me

作用： 将数据转换为响应式，一般用于基础数据类型

语法： const xxx = ref(initValue);

创建一个包含响应式数据的引用(reference)对象
js/ts中操作数据: xxx.value
模板中操作数据: 不需要.value

<template>
  <div id="app">
    <h2>消息 {{ num }} 条</h2>
    <h3>今年是 {{ nowYear }} 年</h3>

    <button @click="updateMsg">更新消息</button>
    <p>点击了 {{ clickBtnNum }} 下按钮</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    /* 方式一：直接传入ref对象 */
    const num = ref(1);

    /* 方式二：先声明 后传入ref对象 */
    let year = new Date().getFullYear();
    const nowYear = ref(year);

    /* 记录按钮点击次数 */
    const clickBtnNum = ref(0);

    /* 更新响应式数据的方法 */
    const updateMsg = () => {
        clickBtnNum.value += 1;
        num.value *= 2;
    }

    return {
      num,
      nowYear,
      clickBtnNum,
      updateMsg
    };
  },
});
</script>