<template>
  <div>
    <h1>姓名：{{p.name}}</h1>
    <h1>年纪：{{p.age}}</h1>
    <h1>工种：{{p.job.type}}</h1>
    <h1>薪资：{{p.job.salary}}</h1>
    <h1>c的值为：{{p.job.a.b.c}}</h1>
    <h1>爱好为：{{p.hobby}}</h1>
    <button @click.once="changeInfo">点击修改姓名年纪</button>
  </div>
</template>
<script>
  import {ref,reactive} from 'vue'
  export default {
    name:'App',
    setup(){
      //数据
     /* let name = ref('张三')
      let age = ref(18)
      let flag = ref('true')
      let hobby = reactive(['上学','吃饭','打豆豆'])
      let job = reactive({
        type: '前端工程师',
        salary: '30k',
        a:{
          b:{
            c:666
          }

        }
      })*/
      let flag = ref('true')
      let person = {
        name:'张三',
        age:18,
        hobby:['上学','吃饭','打豆豆'],
        job:{
          type: '前端工程师',
          salary: '30k',
          a:{
            b:{
              c:666
            }
        }
      }
      }
        const p = reactive(person)
      //方法
      function changeInfo(){
        p.name = '李四',
        p.age= '30k',
        p.job.type ='后端工程师'
        p.job.salary ='20k'
        p.job.a.b.c=111
        if (flag.value){
         alert('按钮只能点击一次')
          flag.value = !flag.value
          }
        for (let i =0;i<p.hobby.length;i++){
          p.hobby[i] = p.hobby[i]+i
        }
      }
      //返回setup中的数据和方法
      return{
        name,
        p,
        flag,
        changeInfo
      }
    }
  }
</script>

<template>
    <div>
      <h1>姓名：{{person.name}}</h1>
      <h1>年纪：{{person.age}}</h1>
      <slot name="slt"></slot>
      <h1>信息是：{{person.message}}</h1>
      <h1>学校是：{{person.school}}</h1>
      <button @click="changeInfo">点击显示信息</button>
      <slot></slot>

      <hr/>
      <h1>全部信息是：{{person.fullName}}</h1>
    </div>
  </template>
 <script>
 import {reactive,computed} from 'vue'
    export default{
      // eslint-disable-next-line vue/multi-word-component-names
        name:'demo',
        props:[
            'msg',
            'school'
        ],
        emits:['showMSG'],

    setup(props,context){
        let person = new reactive({
            name: '张三',
            age: 18,
            message:'',
            school:'',

        })
        //计算属性，传入函数（此时为简写形式，没有考虑计算属性被修改的情况）
        //person.fullName = computed(()=>{return person.name + '-' + person.school})


      person.fullName = computed({  //考虑了计算属性被修改的情况
          get(){
            return person.name + '-' + person.school
          },
          set(value){
            person.Name =value.split('-')[0]
            person.school =value.split('-')[1]
          }
        })

        function changeInfo() {
            person.message = props.msg
            person.school = props.school
            console.log(context)
            context.emit('showMSG','jjjj')
        }
        return {
          person,
          changeInfo
        }
        }
    }
</script>

<template>
  <h1>值是：{{sum}}---{{msg}}</h1>
  <button @click="sum++">点击sum++</button>
  <button @click="shouMessage">点击msg修改</button>
  <hr/>
  <h2>姓名：{{person.name}}</h2>
  <h2>年纪：{{person.age}}</h2>
  <h2>薪水：{{person.job.salary}}</h2>
  <button @click="person.name +='-'">点击姓名改</button>
  <button @click="person.age +=1">点击年纪改</button>
  <button @click="person.job.salary++">加薪</button>

</template>

<script>
import {reactive, ref, watch} from 'vue'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "demo01",
  setup(){
    let sum = ref(0)
    let msg = ref("你好世界")
    let person = reactive({
      name:'李四',
      age:18,
      job:{
        salary:50
      }
    })
    //情况一：监视ref所定义的一个响应式数据
  /*  watch(sum,(newValue,oldValue)=>{
      console.log("sum被修改了",newValue,oldValue)
    })
*/
    //情况三：监视reactive所定义的一个响应式数据，注意：1.此处无法正确的获得oldValue。2.强制开启了深度监视

    watch(person,(newValue,oldValue)=>{
      console.log("姓名年纪是：",newValue,oldValue)
    }) //监视整个对象，默认开启deep

    //情况四：监视reactive所定义的一个响应式数据中的某个属性

  /*  watch(()=>{person.name},(newValue,oldValue)=>{
      console.log('person的name变化了',newValue,oldValue)
    })*/

    //情况五:深度监视对象
    watch(()=>person.job,(newValue,oldValue)=>{
      console.log('person的name变化了',newValue,oldValue)
    },{deep:true}), //此处由于监视的是reactive中定义的对象中的某个属性，所以deep配置有效
    watchEffect(() => { //只要该箭头函数中用到的都会被自动监视，即该函数监视所有数据  
      console.log(person.age)
    })

   function shouMessage(){
     msg.value = "张三"
   }
    //情况二：监视ref多定义的多个响应式数据

 /*   watch([sum,msg],(newValue,oldValue)=>{
      console.log("sum的值是" + newValue[0], "msg的值是" + newValue[1],"以前的值是"+oldValue[0] + oldValue[1])
    },{immediate:true})*/
    return {
      sum,
      msg,
    shouMessage,
      person
    }
  }
}
</script>

<style scoped>

</style>

<template>
  <div>
    <h1>我是App组件，我这里的car是{{car}}</h1>
    <button @click="isshow = true">点我显示弹窗</button>
    <teleport to="body">
      <div v-show="isshow" class="color">
        <input type="text" placeholder="请输入名称">
        <input type="text" placeholder="请输入密码">
        <h1>内容一</h1>
        <h1>内容二</h1>
        <h1>内容三</h1>
        <button @click="isshow = false">点我关闭弹窗</button>
      </div>
    </teleport>
    <son/>
  </div>

</template>
<script>
import { ref,reactive,provide} from 'vue'
import son from "@/components/son";
  export default {
    name:'App',
    // eslint-disable-next-line vue/no-unused-components
    components:{son},
    setup(){
     let car = reactive({
       name: '宝马',
       price:'60w'
     })
      let isshow = ref(false)
      provide('car',car)
      return{
        car,
        isshow
      }
    },
    
  }
</script>
<style>
.color{
  background-color: #42b983;
  text-align: center;
  width: 300px;
  width: 300px;
}
</style>

  width: 300px;
  width: 300px;
}
</style>