V3- computed 与 watch watchEffect 的简单用法

1.compute(fn) // 返回一个计算属性 依赖响应式数据

// 1. 普通用法
let textVal = ref(1)
const comData = computed(()=> {
  return textVal.value * 2
})
// template 
<p>计算属性：{{comData}}</p>

// 2. 携带参数的计算属性（返回一个方法体）
const comData = computed(()=> {
  return function(options:number) {
    console.log(options)
    return textVal.value * options // 10 倍
  }
})
// template 
<p>计算属性：{{comData(10)}}</p>


// set()  get()  计算属性读写逻辑
let comData = computed({
  set(newVal:number) {
    console.log('改写计算属性操作')
    console.log(newVal)
    textVal.value = newVal // 改写某个逻辑
  }, 
  get() {
    return textVal.value * 10
  }
})
const clickBtn = () => {
  comData.value = 888 // 改写计算属性
}

// template
 <p>计算属性：{{comData}}</p>
 <button @click= "clickBtn">点醒你</button>

2.watch 相关

方式一：watch(监听响应式数据对象/多个响应式数据对象 [对象1，对象2]，响应方法体，options配置)

// 1. watch(监听响应式数据对象/多个响应式数据对象 [对象1，对象2]，响应方法体，options配置)
watch([textVal, obj],(newVal, oldVal) => {
  // textVal 变化我就触发
  console.log('变化了')
}, {
  immediate: true, // 创建时立即执行一次
  deep: true, // 深度监听
  //flush 值： post-所有依赖发生变化后执行｜sync-同步模式下执行｜pre-数据变化前就执行 
  flush: 'post'// 指定何时执行时机  
})

// 2. 监听对象里的属性
watch(() => obj.name, () => {
  console.log('对象属性发生变化了')
})

watchEffect 和 watch 区别

watchEffect默认立即触发一次回调， watch 需要配置 immediate: true watchEffect 隐式监听 例如

// watchEffect 隐式监听 某个响应数据
let textVal = ref(1)
let watchData = ref(0)
setInterval(() => {
  textVal.value += 1
}, 1000)
watchEffect(async () => {
  watchData.value =  textVal.value * 10
})
// template 
<p>watch 改变：{{watchData}}</p>