基本使用

ref

• 生成值类型的响应式数据
• 可用于模版和reactive
• 必须通过.value获取值

watch 和 watchEffect区别

• watch监听属性时必须指定监听的具体属性
• watch不会自动执行，需要增加immediate = true
• watchEffect不需要指定具体的属性，会根据使用的的属性自动监听其变化，watchEffect初始化会自动执行一遍（因为需要收集哪些属性使用到了，对其进行监听）

setup(){
        const state = reactive({
            name:'kira',
            age:12
        })
        const statusRef = ref(1);
        //watch监听state下的某个属性
        watch(()=>state.name,(newVal,oldVal)=>{
            console.log('====',newVal,oldVal)
        });
        //watch监听ref
        watch(statusRef,(newVal,oldVal)=>{
            console.log('====',newVal,oldVal)
        },{immediate:true});
        watchEffect(()=>{
            console.log(state.age);//自动监听age
        })
        setTimeout(()=>{
            state.name = '222';
            statusRef.value = 2;
        },2000)
        return{
            state,
            statusRef
        }
    }

setup 函数

• setup()新语法，写了这个就不需要再写 data methods 这样的东西了。
• setup() :开始创建组件之前，在 beforeCreate 和 created 之前执行。创建的是 data 和 method

setup(){
    //在setup中定义变量
    const girls = ref(['11','22','333']);
    const selectGirl = ref('');
    //在setup中定义方法
    const clickMe = (index: number,item: object)=>{
        selectGirl.value = girls.value[index]
    };
    //在setup中暴露方法和变量
    return{
      girls,
      selectGirl,
      clickMe
    }
}

reactive 函数

• reactive 和 ref 都是为了定义响应式的数据。

interface DataProps {
  girls: string[];
  selectGirl: string;
  clickMe: (index: number) => void;

}
export default defineComponent({
  name: 'Home',
  setup(){
    const data: DataProps = reactive({
      girls:['11','22','333'],
      selectGirl:'',
      clickMe:(index: number)=>{
       data.selectGirl = data.girls[index]
      }
    });
    //使用toRefs目的是为了解构赋值，如果直接通过...获取属性
    const refData = toRefs(data);
    return{
      ...refData
    }
  }
});

生命周期

- setup() :开始创建组件之前，在 beforeCreate 和 created 之前执行。创建的是 data 和 method。在 vue3 中 setup 生命周期替代了 beforeCreate 和 created。

- onBeforeMount() : 组件挂载到节点上之前执行的函数。
- onMounted() : 组件挂载完成后执行的函数。
- onBeforeUpdate(): 组件更新之前执行的函数。
- onUpdated(): 组件更新完成之后执行的函数。
- onBeforeUnmount(): 组件卸载之前执行的函数。
- nUnmounted(): 组件卸载完成后执行的函数
- onActivated(): 被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。被激活时执行。
- onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
- onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数（以后用到再讲，不好展现）。