vue3 watch和computed使用

<script setup>
import {ref, computed,watch,onMounted} from 'vue'
const num1 = ref(1)
// computed: 计算属性，计算一个结果，函数值改变了就会重新计算
// 初始化的时候会自动计算一次
// computed 会读取缓存数据
const num2 = computed(() => {
  return num1.value+10
})
const num3 = ref('未成年')
// watch:监控某个数据，被监控的数据更改，则watch执行
// 初始化的时候不会自动执行一次
watch(num1,(newval,oldval)=> {
  if(newval > 18 ) {
    num3.value = '已成年'
  }
},{immediate:true})
onMounted(() => {
  setTimeout(() => {
    num1.value = 20
  }, 2000)
})
</script>

<template>
  <!-- 1->20数据1变为20 -->
 <div>1:{{ num1 }}</div> 
 <!-- 11->30 -->
 <div>2:{{ num2 }}</div>
  <!-- 未成年->已成年  -->
 <div>3:{{ num3 }}</div> 
</template>

<style scoped>
</style>```