ref
push
reactive在封装一层

这三种方式都可以让在setup里面定义的data变为响应式的

定义单个 变量使用ref()
定义对象时，使用reactive比较好
toRefs setup 中return 返回数据的时候，使用toRefs包一下，就可以让数据是响应式的

ref用来处理基本类型数据，reactive用来处理对象（递归深度响应）
如果使用ref对象/数组，内部会自动将对象。数组转为reactive的代理对象
ref内部：通过给value属性添加getter/setter 来实现对数据的劫持
reactive内部：通过使用proxy来实现对象内部所有数据的劫持，并通过Reflect操作对象内部数据
ref的数据操作：在js中要.value,在模板中不需要（内部解析模板时会自动添加.value）

<template>
  <div class="main">
    <div class="loginBlock">
      <div style="background: red">
        {{ msg }} {{ tips }}{{ loginForms.username }}{{ loginForms.age }}
      </div>
      <div style="background: green">
        <div v-for="(reft, index) in liRef" :key="index">{{ reft.name }}</div>
      </div>
    </div>
    <div>{{ name }}来家里{{ counts }}次了</div>
    <div class="addPlus">
      <button @click="puls">-</button>
      <input type="text" v-bind:value="num" />
      <button @click="add">+</button>
    </div>
  </div>
</template>

<script>
import { ref, watch, defineComponent, reactive, watchEffect, toRefs } from 'vue'
export default defineComponent({
  setup() {
    let tips = ref('你好的')
    let msg = ref('hellow')
    let num = ref(0)
    let state = reactive({
      name: '自来熟',
      counts: 47,
    })
    //toRefs 可以把一个响应式的对象转换为普通对象，该普通对象的每个property 都是个ref
  
    let state2 = toRefs(state)
 //定时器，更新数据（如果数据变化了，界面随之变化，肯定是响应式的数据）
    setInterval(() => {
      state2.name.value += '=='
    }, 1000)
    let liRef = ref([])
    let loginForm = {
      username: 'sandraLee',
      age: 18,
    }
    const loginForms = reactive(loginForm)
    let arr = [
      { id: 1, name: 'sandra' },
      { id: 2, name: 'poly' },
    ]
    liRef.value = arr
    console.log(liRef)
    const add = () => {
      num.value++
    }
    const puls = () => {
      num.value--
    }
    watch(num, (v) => {
      if (v < 0) {
        num.value = 0
      }
      console.log('watch')
    })
    // watchEffect(() => {
    //   console.log('watchEffect', num.value)
    // })

    return {
      liRef,
      tips,
      msg,
      num,
      loginForms,
      add,
      puls,
      ...state2,
    }
  },
})
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #3579e6;
}
.loginBlock {
  display: flex;

  width: 500px;
  height: 300px;
  background: #fff;
}
</style>