<script lang="ts" setup name="Login">
import { ref, watch, watchEffect } from 'vue';
//初始值为0
const num = ref(0)
//watch(参数1,参数2)
//参数1: 值,函数,数组
//watch(要监听的数据,回调(前后值){})
//watch(依赖,回调)
//如果这个值变了,则回调会执行 ==> 回调函数{依赖}这个数据
//watch(num,() =>{console.log('watch',num.value)})
//watchEffect(回调()=>{})
//1.自动执行一次回调.这个过程中,收集依赖项
//2.随后,当依赖项变化时,回调也会执行
watchEffect(() =>{
//console.log('watchEffect'); 没有数据
console.log('watchEffect',num.value) //显示数据
})
setInterval(() => {
num.value++
//console.log(num.value);
},2000)
</script>
<template>
</template>
<style lang="less" scoped></style>
watchEffect是一种更加特殊的watch
1.它不关心前后值
2.它会自己执行一次,并自动收集依赖
3.依赖项变化,就正常执行回调