vue3+Ts 2 组件+生命周期

计算属性 computed

<template>
  <div>{
  { arr }}</div>
  <button @click="arr.push('新学生')">添加学生(当前已有{
  { studentNumber }}个学生)</button>
</template>

<script setup>
import { ref, computed } from 'vue'

const arr = ref(['tom', 'rose'])

// // 计算属性步骤一,编写计算的函数
// const getLength = () => {
//   return arr.value.length
// }
// // 计算属性步骤二, 用 computed 包住这个函数, 处理过后就会返回一个计算属性
// const studentNumber = computed(getLength)

// 另外一种写法,就是直接拼在一起, 写回调函数即可
const studentNumber = computed(() => {
  return arr.value.length
})

</script>

监听器watch

// 监听器基本使用
watch(iphone, () => {
  localStorage.setItem('cart', JSON.stringify(iphone))
})

// 监听器使用细节
// 监听一个数据
watch(num1, (newVal, oldVal) => {
  co