.....

<script setup>
import { ref, reactive } from 'vue'

// 通过ref
let count = ref(1)
let arr = ref([1, 2, 3, 4, 5])
const obj2 = ref({ sex: '男' })

// reactive 因为本质是对象，所以在 watch 的时候本能的会想添加 deep 属性，但是 vue 对其做了优化，使用 watch 监听 reactive 的时候可以不添加 deep 属性，也能够对其做深度监听
const state = reactive({ name: 'zhangsan ', obj: { age: 5 } })

function add() {
  // 通过ref必须要加.value
  count.value++
  arr.value.push('pink')
  // 通过reactive
  state.name = '哈哈哈哈'
}
</script>

<script setup>
import { reactive } from 'vue'
// 这个方法会自动执行(相当于create,mounted)
// const msg = 'create Hello'
const state = reactive({ count: 0, msg: 'create Hello' })
function changeCount() {
  state.count++
  state.msg = 'changeMsg'
}
</script> -->

<template>
  <!-- 只读的计算属性 -->
  <input type="text" v-model.number="a">
  <input type="text" v-model.number="b">
  <p>{{ sum }}</p>
  <hr>
  <!-- 可读可写的计算属性 -->
  <nav>单价：20元</nav>
  数量：<input type="text" v-model.number="num">
  总价：<input type="text" v-model.number="totalPrice">
  <hr>
  <!-- 第一种方式 -->
  <!-- <button @click="obj.name = 'lisy'">点击</button> -->
  <!-- 第二种方式 -->
  <button @click="fn">点击</button>
</template>

<script setup>
//FIXME:按需 最终打包大小 tree shaking
import { ref, computed, watch, reactive, watchEffect } from 'vue'
const a = ref(0)
const b = ref(0)
const sum = computed(() => {
  // 只读
  return a.value + b.value
})

// 监听单个属性(基本数据类型)
watch(a, (newValue, oldValue) => { console.log('新值', newValue, '旧值', oldValue) })
// 监听多个属性(基本数据类型)
watch([a, b], (newValue, oldValue) => { console.log('新值', newValue, '旧值', oldValue) })

const price = 20 //单价
const num = ref(0) // 数量
const totalPrice = computed({
  // 可读可写
  get() {
    return num.value * price
  },
  set(newValue) {
    num.value = newValue / price
  }
})

// 第一种方式：配合ref，但是要加value  (复杂数据类型)
// const obj = ref({ name: 'zhangsan', age: 20 })
// watch(() => obj.value.name, (newValue, oldValue) => {
//   console.log('新值', newValue, '旧值', oldValue)
// }, { immediate: true }, { deep: true })

// 第二种方式：配合reactive  (复杂数据类型)
const obj = reactive({ name: 'zhangsan', age: 20 })
watch(() => obj.name, (newValue, oldValue) => {
  console.log('新值', newValue, '旧值', oldValue)
})
function fn() {
  obj.name = 'list11'
}

//TODO: 一开始就执行，可以监听对象(依赖的变量特别多的话，并且要立即执行的话就是用这个)
// watchEffect(() => {
//   console.log(a.value + b.value);
//   console.log(obj);//Proxy {name: 'zhangsan', age: 20}
// })

// FIXME:监视整个对象
// watch(obj,(newValue) =>{
//   console.log(123);
// })
</script>

<template>
  <h1 ref="abc">hello</h1>
  <el-table :data="list" border stripe>
    <el-table-column type="index" width="80" align="center" />
    <el-table-column label="书名" prop="bookname" align="center" />
    <el-table-column label="作者" prop="author" align="center" />
    <el-table-column label="出版社" prop="publisher" align="center" />
    <el-table-column label="时间" prop="createdAt" align="center" />
  </el-table>
</template>
<script setup>
import axios from 'axios'

// setup中的this是undefined
import { onMounted, onUnmounted, ref } from 'vue'
const abc = ref(null) //和ref关联起来
// 因为setup的生命周期在created之前，这时候视图还未准备好，所以获取不到。需要通过onMounted生命周期来获取dom
//TODO: onMounted发送ajax,也可以操作DOM
//TODO: onUnmounted：清理定时器，类似beforeDestory
const list = ref([])

onMounted(async () => {
  // console.log(abc.value);
  // console.log(abc.value.innerHTML);
  const { data: { data } } = await axios({
    url: 'http://ajax-api.itheima.net/api/books',
  })

  list.value = data
})

</script>