<template>
  <div>
    {
   
   {count}}
    <button @click="fn">+</button>
    <ul ref="box">
      <li @click="remStu(index)" v-for="(item, index) in state.stus" :key="index">
        {
   
   {item.name}}
      </li>
    </ul>
  </div>
</template>

<script>
import * as vue from 'vue'
console.log(vue, 'vue')
// 前面两个是递归监听，后两个是非递归监听
// triggerRef
import {ref, reactive, shallowRef, shallowReactive, customRef, onMounted} from 'vue';
export default {
  name: 'App',
  // 组合api的入口函数, 数据逻辑集中管理，不用四分五裂, 解决（数据、业务逻辑）分散的问题
  // setup执行时机是在：
  //beforeCreate（组件刚刚被创建出来,data和methods还没初始化好）
  //setup 不能使用data和methods，this强制改为了undefined
      //-内部只能是同步的不能是异步的
  //created之间(件刚刚被创建出来,data和methods已经初始化好了)
  //
  setup(){
    // 定义了一个count，初始值0，响应式，ui会更新
    // ref 函数只能监听简单类型的变化，不能监听复杂类型的变化
    // 但是reactive可以
    let count = ref(1);
    // 在组合API中，如果定义方法，不用定义到methods中，
    // 直接定义即可
    function fn() {
      count.value++
    }

    //监听生命周求
    let box = ref(null)
    onMounted(()=>{
      console.log('onMounted', 'console.log dom:'+ box.value)
    })
    // 注意点：
    // 在组合API中定义的变量/方法，想要在外界使用，
    // 必须通过return{xxx, xxxxx}暴露出去
    // let {state, remStu} = userRemoveStudent();

     // ref（isRef）本质是reactive（isReactive）


      // ***性能优化
      // toRaw  获取reactive 对象的原始数据

      //markRow 不想数据被追踪

      //toRef (obj, 'name) 某个数据响应式 会影响原始数据，ui不会更新
      // ref->复制，数据ui同步
      // toRef->引用 数据ui不同步，想让响应式数据和以前的数据关联，并且不想跟新ui

      // toRefs(obj)

      // custormRef 自定义ref

      // readonly创建只读的数据，递归只读
    return {
      count,fn, ...userRemoveStudent(), box
    }
  }
}
function userRemoveStudent() {
  // json arr  其他对象需要重新复制（Date）
  let state = reactive({
      stus:[
        {id:1, name:'ffff', age:10},
        {id:2, name:'gggg', age:11},
        {id:3, name:'hhhh', age:12},
      ]
    })
    function remStu(index) {
      state.stus = state.stus.filter((stu,idx)=> idx!==index)
    }
    return {state, remStu}
}

// custormRef 自定义ref
function myRef() {
  return customRef(()=>{
    return {
      get() {

      },
      set(newValue) {

      }
    }
  })
}
</script>