详解vue3中setUp和reactive函数的用法

<script>
export default {
  name: 'App',
  data:function(){
    return {
      mess:"我是data"
    }
  },
  methods:{
    func(){
      console.log("methods中的func")
    },
  },
  setup(){
    console.log('this',this);//undefined
    this.func();//无法调用的哈
  },
}
</script>

<template>
 <div>
    <div>
      <li>{{str}}</li>
      <button @click="func1">按钮</button>
    </div>
 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
   setup(){
    //  reactive 的本质就是传入的数据包装成一个proxy对象
    // 由于在创建的时候，传递的不是一个对象，那么将不会实现响应式。
    let str=reactive(123)
    function func1(){
      console.log(str);//123
      str=666;
    }
    return {str,func1 }
  },
}
</script>

<template>
 <div>
    <div>
      <li>{{arr}}</li>
      <button @click="func1">按钮</button>
    </div>
 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
   setup(){
    let arr=reactive([{name:'张三',age:19},{name:'李四',age:39}])
    function func1(){
      arr[0].name="我是张三的哥哥"
    }
    return {arr,func1 }
  },
}
</script>

<template>
 <div>
    <div>
      <li>{{sate.time}}</li>
      <button @click="func1">按钮</button>
    </div>
 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
   setup(){
    let  sate=reactive({
      time:new Date()
    })
    function func1(){
      //传入的是其他对象，直接跟新
      sate.time="2021年-6月-9日";
    }
    return {sate,func1 }
  },
}
</script>