接上节案例，我们想通过点击按钮实现改变msg的内容。按照vue2的编程思想，很容易想到如下实现方式：

<template>
    <!--与vue2模板的区别：不需要定义一个根标签-->
    <h1>第一个Vue3案例</h1>
    <hr>
    <div>{{msg}}</div>
    <button @click="changeMsg">改变消息</button>
</template>

<script lang="ts">
    import {defineComponent} from 'vue';
    export default defineComponent({
        name: 'App',
        setup() {
            let msg = 'hello,world';
            console.log('执行了setup()...');
            function changeMsg(){
                console.log('execute changeMsg()....');
                msg = 'hello,vue3';
            }
            return {
                msg,
                changeMsg
            }
        }
    });
</script>

当前点击按钮后发现，控制台输出以下调试信息：

执行了setup()...
execute changeMsg()....
execute changeMsg()....

但是msg内容并没有改变。这是因为我们定义的let msg='hello,world';并不是一个响应式数据。

1.使用ref

作用: 定义一个数据的响应式 语法: const xxx = ref(initValue): 创建一个包含响应式数据的引用(reference)对象 - js中操作数据: xxx.value - 模板中操作数据: 不需要.value - 一般用来定义一个基本类型的响应式数据

<template>
    <!--与vue2模板的区别：不需要定义一个根标签-->
    <h1>第一个Vue3案例</h1>
    <hr>
    <!--模板中操作数据: 不需要.value-->
    <div>{{msg}}</div>
    <button @click="changeMsg">改变消息</button>
</template>

<script lang="ts">
    import {defineComponent,ref} from 'vue';
    export default defineComponent({
        name: 'App',
        setup() {
            // 定义响应式数据 ref对象
            const msg = ref('hello,world');
            console.log('执行了setup()...');
            function changeMsg(){
                console.log('execute changeMsg()....');
                msg.value = 'hello,vue3!';
            }
            return {
                msg,
                changeMsg
            }
        }
    });
</script>