<template>
  <div>
    <h2>setup和ref的基本使用</h2>
    {{ count }}
    <button @click="updataCount">+</button>
    父组件
    {{ msg }}
    <button @click="msg += '=='">更新数据</button>
    <hr />
    <Child :msg="msg" :msg2="真香" @emitPar="xxx" />
    <hr />
    <h3>姓名：{{ user1.name }}</h3>
    <h3>年龄：{{ user1.age }}</h3>
    <h3>
      妻子：{{ user1.wife.name }}{{ user1.wife.age }}
      <span v-for="(car, index) in user1.wife.cars" :key="index">{{
        car
      }}</span>
    </h3>
    <hr />
    <h3>姓名：{{ user2.name }}</h3>
    <h3>年龄：{{ user2.age }}</h3>
    <h3>
      妻子：{{ user2.wife.name }}{{ user2.wife.age }}
      <span v-for="(ca, index) in user2.wife.cars" :key="index">{{ ca }}</span>
    </h3>
    <button @click="modify">修改信息</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import Child from '../components/child.vue'
export default defineComponent({
  components: {
    Child,
  },
  name: 'app',
  /*需求：页面打开后可以看到一个数据，
    点击数据后该数据可以发生变化*/
  /* setup 是组合API的入口函数*/
  setup() {
    //定义一个Ref类型的数据
    const msg = ref('what are you no sha lei')
    //  let count = 0 //此时的数据并不是响应式的数据
    const count = ref(0)
    /*ref 是一个函数，作用：定义一个响应式的数据，返回的是一个Ref对象，
    对象中有一个value属性，如果需要对数据进行操作，需要使用该Ref对象
    调用value属性的方式进行数据的操作
    html 模板中不需要使用.value属性的写法的
    一般用来定义基本类型的响应式数据
    */
    function updataCount() {
      count.value++
    }
    function xxx(text: string) {
      msg.value += text
    }
    //ref用来处理基本类型数据，reactive用来处理对象（递归深度响应式）
    /*
     如果用ref对象/数组。内部会自动将对象/数组转换为reactive的代理对象。
     ref内部：通过给value属性添加getter/setter 来实现对数据的劫持
     reactive内部通过使用proxy来实现对对象内部所有数据的劫持，并通过Reflect操作对象内部数据。
     ref的数据操作：在js中要用.value，在模板中不需要（内部解析模板时会自动添加.value）
     */
    let m1 = ref(0)
    let user1 = ref({
      name: '小明',
      age: 18,
      wife: {
        name: '小花',
        age: 18,
        cars: ['汽车', '拖拉机', '收割机'],
      },
    })
    let user2 = reactive({
      name: '小明',
      age: 18,
      wife: {
        name: '小花',
        age: 18,
        cars: ['汽车', '拖拉机', '收割机'],
      },
    })
    let modify = () => {
      console.log(m1, user1, user2)
      user1.value.name += '=='
      user1.value.wife.cars[1] = '玛莎拉蒂'

      user2.name += '=='
      user2.wife.cars[1] = '玛莎拉蒂'
    }
    return {
      m1,
      msg,
      count,
      updataCount,
      xxx,
      user1,
      user2,
      modify,
    }
  },
})
</script>

<style lang="scss" scoped></style>