vue3.0学习心得（二）ref()，reactive()，setup()，toRefs()，watch（）

一、ref()，reactive()

二、setup（）

三、toRefs( )

四、watch（）

1、ref（），reactive（） //定义vue2.0中data和method方法
2、setup（） //代替data和method返回数据和方法，在beforeCreate、created之前执行
3、toRefs（） //使用拓展用算符...的方法返回数据data

  const data: DataProps = reactive({
      namePie:['狼人','平民','预言家','女巫','猎人'],
      selectName:'',
      changeName:(index: number)=>{
        data.selectName=data.namePie[index]
      },    

const refData = toRefs(data)  
return{      
      ...refData
      ｝
      

4、watch（）//监听
①、ref类型定义data

 const selectName = ref('123')
 watch(selectName ,(newVal,oldVal)=>{
      console.log(newVal +'-----------new')
      console.log(oldVal +'-----------old')
    })

②、reactive类型定义data.//此时的data.namePie不能直接使用 需要一个返回值所以加了一个箭头函数

 const data: DataProps = reactive({
      namePie:['狼人','平民','预言家','女巫','猎人'],
      selectName:'',    
    })
 watch(()=>data.namePie,(newVal,oldVal)=>{
      console.log(newVal +'-----------new')
      console.log(oldVal +'-----------old')
    })  

③、watch参数的第一个值可以为数组如下

  watch([()=>data.content,()=>data.overText],(newVal,oldVal)=>{
      console.log(newVal +'-----------new')
      console.log(oldVal +'-----------old')
      document.title=newVal[0]+newVal[1]
    })

练习代码

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h2>天黑请闭眼，请选择你想要的身份牌</h2>
    <div>
      <button 
        v-for="(item,index) in namePie" 
        v-bind:key="index"
        v-on:click="changeName(index)"
      >{{item}}</button>
    </div>
    <div>您选择的身份是【{{selectName}}】？</div>
    <button @click="overBtn">选择完成</button>
    <div>“ {{content}} ”您选择的是【{{overText}}】</div>
  </div>
</template>

<script lang="ts">
import { defineComponent,onActivated,onBeforeMount,onBeforeUnmount,onBeforeUpdate,onDeactivated,onErrorCaptured,onMounted,onRenderTracked,onRenderTriggered,onUnmounted,onUpdated,reactive,toRefs, watch} from 'vue';
interface DataProps {
  namePie: string[];
  selectName: string;
  changeName: (index: number) => void ; //没有返回值
  overText: string;
  content: string;
}
export default defineComponent({
  name: 'Home',
  setup(){
    console.log('1')
    const data: DataProps = reactive({
      namePie:['狼人','平民','预言家','女巫','猎人'],
      selectName:'',
      changeName:(index: number)=>{
        data.selectName=data.namePie[index]
      },
      overText:'',
      content:'',
      overBtn:()=>{
        data.overText=data.selectName
        if(data.overText=='狼人'){
          data.content='杀光他们'
        }else if(data.overText=='平民'){
          data.content='夜晚千万不要出门'
        }else if(data.overText=='预言家'){
          data.content='透过迷雾看破一切'
        }else if(data.overText=='女巫'){
          data.content='我闻到了曼陀罗的味道'
        }else if(data.overText=='猎人'){
          data.content='面对猎物从不手抖，狼人也一样'
        }
        // document.title=data.content+data.overText
      }
      
    })
    watch([()=>data.content,()=>data.overText],(newVal,oldVal)=>{
      console.log(newVal +'-----------new')
      console.log(oldVal +'-----------old')
      document.title=newVal[0]+newVal[1]
    })
    onBeforeMount(()=>{ 
      console.log('2')
     
    })
    onMounted(()=>{
      console.log('3')
    })
     onBeforeUpdate(()=>{
      console.log('4')
    })
     onUpdated(()=>{
      console.log('5')
    })
    onErrorCaptured
    
    // onRenderTracked((event)=>{  // 把所有值都跟踪了  【】 【0】 【1】。。method
    //   console.log(event)
    //   console.log('--------------状态跟踪---------------')
    // })
    // onRenderTriggered((event)=>{
    //   console.log(event)
    //    console.log('--------------状态跟踪---------------')
    // })
    const refData = toRefs(data)
    // const namePie = ref(['狼人','平民','预言家','女巫','猎人'])
    // const selectName = ref('')
    // const changeName = (index: number)=>{
    //   selectName.value=namePie.value[index]
    // }
    return{
      // 
      ...refData
      // 
      // data
      // 
      // namePie,
      // selectName,
      // changeName
    }
  },
});
</script>