<script setup>
import { 
  onBeforeMount, 
  onMounted, 
  onBeforeUpdate, 
  onUpdated,
  onBeforeUnmount,  
  onUnmounted  
} from 'vue'

// 1. setup本身就是处在create生命周期函数阶段，就是创建组件实例的阶段

onBeforeMount(()=>{
  console.log('2. 模板已经编译成函数，准备渲染挂载')
})

onMounted(()=>{
  console.log('3. 模板已经渲染挂载到页面')
})

onBeforeUpdate(()=>{
  console.log('4. 响应式数据变化后，页面准备更新渲染前')
})

onUpdated(()=>{
  console.log('5. 页面已更新渲染完毕')
})

onBeforeMount(()=>{
  console.log('6. 准备卸载组件前')
})

onUnmounted(()=>{
  console.log('7. dom完全销毁，组件卸载完毕后')
})
</script>

<template>
  <div>
    <!--  html代码渲染  -->
    <div v-html="titleHtml"></div>
    
    <!--  input中双向绑定  -->
    <input v-model="inputValue" type="text">
    
    <!--  点击事件  -->
    <button v-on:click="addItemHandle">增加</button>
    <button v-on:click="showHandle">显示/隐藏</button>
    <!--  条件判断来显示隐藏元素  -->
    <ul v-if="show">
      <!--   循环的使用，插值表达式的使用   -->
      <li v-for="(item, index) of list">{{index}}. {{ item }}</li>
    </ul>
    
    <!--  非响应式，变量仅使用一次，后面不再跟随变化  -->
    <div v-once>{{footer}}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// html代码渲染
const titleHtml = ref('<h1>todo list示例</h1>')

// 添加输入项的功能
const inputValue = ref('')
const list = ref(['hello', 'world', 'tom', 'sun'])
const addItemHandle = () => {
  list.value.push(inputValue.value)
  inputValue.value = ''
}

// 显示隐藏的功能
const show = ref(true)
const showHandle = () => {
  show.value = !show.value
}

// 页脚的内容
const footer = ref('示例结束')
setTimeout(()=>{ footer.value = '示例继续？'}, 3000)

</script>