Vue3 （三）（computed用法，watch侦听器，watchEffect高级侦听器）

computed用法

计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。

1 函数形式

<template>
  <div>
    <h1>{{ m }}</h1>
  </div>
</template>
 
<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
let price = ref(0)//$0
 
let m = computed<string>(()=>{
   return `$` + price.value
})
 
price.value = 500

</script>

2 对象形式　

<template>
   <div>{{ mul }}</div>
   <button @click="mul = 100">click</button>
</template>
 
<script setup lang="ts">
import { computed, ref } from 'vue'
let price = ref<number | string>(1)//$0
let mul = computed({
   get: () => {
      return price.value
   },
   set: (value) => {
      price.value = 'set' + value
   }
})
</script>
 
<style>
</style>

watch侦听器

watch第一个参数监听源

watch第二个参数回调函数cb（newVal,oldVal）

watch第三个参数一个options配置项是一个对象{

immediate:true //是否立即调用一次

deep:true //是否开启深度监听

}

<template>
   <div>{{ message }}</div>
</template>
 
<script setup lang="ts">
import { ref, watch } from 'vue'
 
let message = ref({
    nav:{
        bar:{
            name:""
        }
    }
})
 
 
watch(message, (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('旧的值----', oldVal);
},{
    immediate:true, //是否立即调用一次
    deep:true //是否开启深度监听
})
</script>
 
<style>
</style>

监听多个ref 注意变成数组啦　　

<template>
   <div>{{ message }}</div>
</template>
 
<script setup lang="ts">
import { ref, watch ,reactive} from 'vue'
 
let message = ref('')
let message2 = ref('')
 
watch([message,message2], (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('旧的值----', oldVal);
})
</script>
 
<style>
</style>

监听Reactive

使用reactive监听深层对象开启和不开启deep 效果一样

<template>
   <div>{{ message }}</div>
</template>
 
<script setup lang="ts">
import { ref, watch ,reactive} from 'vue'
 
let message = reactive({
    nav:{
        bar:{
            name:""
        }
    }
})
 
 
watch(message, (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('旧的值----', oldVal);
},{
    immediate:true,
    deep:true
})
</script>
 
<style>
</style>

案例2 监听reactive 单一值　　

<template>
   <div>{{ message }}</div>
</template>
 
<script setup lang="ts">
import { ref, watch ,reactive} from 'vue'
 
let message = reactive({
    name:"",
    name2:""
})
 
 
watch(()=>message.name, (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('旧的值----', oldVal);
})
</script>
 
<style>
</style>

认识watchEffect高级侦听器

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

如果用到message 就只会监听message 就是用到几个监听几个 而且是非惰性 会默认调用一次

<template>
   <div>{{ message }}</div>
</template>
 
<script setup lang="ts">
import { ref, watch ,reactive,watchEffect} from 'vue'
 
let message = ref<string>('')
let message2 = ref<string>('')
 watchEffect(() => {
    //console.log('message', message.value);
    console.log('message2', message2.value);
})
</script>
 
<style>
</style>

清除副作用

就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖

<template>
   <div>
     <input type="text" v-model="message">
   </div>
</template>
 
<script setup lang="ts">
import { watchEffect, ref } from 'vue'
let message = ref<string>('')
let message2 = ref<string>('')
 watchEffect((oninvalidate) => {
    console.log('message', message.value);
    oninvalidate(()=>{
        console.log("before")
    })
})
</script>
 
<style>
</style>

停止跟踪 watchEffect 返回一个函数 调用之后将停止更新　　

<template>
   <div>
     <input type="text" v-model="message">
   </div>
</template>
 
<script setup lang="ts">
import { watchEffect, ref } from 'vue'
let message = ref<string>('')
let message2 = ref<string>('')
const stop =  watchEffect((oninvalidate) => {
    //console.log('message', message.value);
    oninvalidate(()=>{
      console.log("before")
    })
    console.log('message2', message2.value);
},{
    flush:"post",
    onTrigger () {
      console.log("stop")
    }
})
stop()
</script>
 
<style>
</style>