<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <!-- 和webpack创建的工程区别,index.html放在了pubic的外面 -->
    <!-- Vite以index.html作为入口,不再使用main.js作为入口了 -->
    <!-- 对于vite构建工具来说,配置文件时vite.config.js -->
    <!-- 这个vite.config.js类似于webpack打包的vue.config.js -->
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
<template>
    姓名:<input type="text" v-model="name.name"/>
    <h1>{{ RevName }}</h1>
</template>
 
<script>
import {reactive, computed} from "vue";
export default {
    name : "App",
    setup(){
        // computed也变成了一个组合式的API
        let name = reactive({
            name : ''
        });
        // let RevName = computed(() => {
        //     // 这种方法是简写形式,只针对使用get的场景下才可以使用
        //     return name.name.split('').reverse().join('');
        // });
        let RevName = computed({
            // 完整的写法如下
            get(){
                return name.name.split('').reverse().join('');
            },
            set(value){
                // 修改
                name.name = value;
            }
        });
        return {name,RevName};
    }
    // data(){
    //     return {
    //         name : ""
    //     }
    // },
    // computed : {
    //     // RevName : {
    //     //     set(value){
    //     //         this.name = value;
    //     //     },
    //     //     get(){
    //     //         return this.name.split('').reverse().join(''); 
    //     //     }
    //     // }
    //     RevName(){
    //         return this.name.split('').reverse().join(''); 
    //     }
    // }
}
</script>
 
<style>
 
</style>