<div id="app">
    <div class="addbar">
        <input type="text" v-model="inputVal"><button @click="addVal">添加</button>
    </div>  
    <div>共有:{{data.length}}条数据</div>
    <ul>
        <li v-for="(item,index) in data" :key="item"><button @click="deleteVal(index)" style="margin-right:20px;">删除</button>{{item}}</li>
    </ul> 
</div>
      
<script src="../dist/vue.global.js"></script>
      <script>
        // 创建实例方式变化了
        const { createApp, reactive, computed, ref, toRefs } = Vue
        const app = createApp({
          setup() {
            // reactivity api 
            // message相关
            const data = reactive({
              data: ['hello,vue3','this is a todolist demo'],
            })
            // count相关
            // const counter = reactive({
            //   count: 0,
            //   doubleCount: computed(() => counter.count * 2)
            // })
      
            function addVal() {
                data.data.push(inputVal.value)
                inputVal.value = ''
            }
            function deleteVal(index){
                data.data.splice(index,1)
                console.log(data.data)
            }
            // 单值响应式, ref()返回Ref对象，如果要修改它的值，访问value属性
            const inputVal = ref('')
            
            return { ...toRefs(data), inputVal,addVal,deleteVal }
          }
        }).mount('#app')
      </script>