第14节:Vue3 简化用法＜script setup＞

下面是一个示例，演示了如何在UniApp中使用

    <template>  
      <view>  
        <text>{{ message }}</text>  
        <button @click="changeMessage">点击改变文本</button>  
      </view>  
    </template>  
      
    <script setup>  
    import { ref } from 'vue';  
      
    const message = ref('Hello, UniApp!'); // 创建一个响应式的数据引用，初始值为'Hello, UniApp!'  
      
    // 定义一个方法，用于改变message的值  
    const changeMessage = () => {  
      message.value = '你已经点击了按钮！';  
    };  
    </script>

在上面的示例中，我们使用了script setup来编写组件的逻辑。在script setup块中，我们可以直接导入需要的函数和模块，例如ref()函数。然后，我们创建了一个响应式的数据引用message，并定义了一个方法changeMessage来改变message的值。这些变量和方法会自动暴露给模板使用，因此我们不需要在script块中显式地导出它们。

需要注意的是，script setup块中的代码会在组件实例化之前执行，因此我们不能在其中访问组件实例的属性或方法。如果需要在组件实例化后执行某些逻辑，可以将它们放在script块中。同时，script setup块中的代码也不能使用this关键字来访问组件实例。

通过使用script setup，我们可以更简洁地编写组件的逻辑，并避免一些繁琐的语法和导出操作。这对于小型组件或简单的界面逻辑尤为方便。

订阅专栏，每日更新

第15节：Vue3 DOM 更新完成nextTick()