vue3学习笔记-上手篇二

本文作为vue3学习笔记记录复习之用。

五.组合式API-computed

computed 与vue2中的功能几乎一样，只是写法上有所区别。例：
//导入
import { computed } from "vue";
//使用
const conList = ref([1, 2, 3, 4, 5]);
//计算属性主要作用是计算，不应该有其他
//避免直接修改
const computedList = computed(() => {
  return conList.value.filter((c) => c > 3);
});

六.组合式API-watch

watch 的作用是侦听一个或多个数据的变化，数据变化时执行回调函数。
//导入
import { ref, watch } from "vue";
//需要侦听的数据
const count = ref(0);
//执行wach,第一个参数侦听的数据,第二个参数是回调函数，
  回调函数中有两个返回值1是newValue,2是oldValue。
  这种写法，第一个参数是响应式数据也无需.vlaue。
watch(count,(NV,OV)=>{
      console.log("count变化侦听到了");
})

简单的在模板中写个button点击事件模拟count的变化。
<tempLate>
    <button @click="count++">点击自增</button>
</tempLate>
-----------------------------------------
以上是单个侦听，多个侦听写法：
 watch([count,count2],([NV,NV2],[OV,OV2])=>{
      console.log("count变化侦听到了");
})
需要注意的是：回调中的两个数组参数，第一个是所有侦听数据的新值，
第二个是所有侦听数据的旧值。

watch,还有两个immediate和deep
immediate是，立即执行，当immediate的值为true时，加载时就执行一次哦。
deep是：深度侦听，当侦听的数据是对象时，当修改对象中的某个值时，watch默认是侦听不到的。
这时需要设置deep为ture，就可以侦听到了。
开启这两个参数的写法：在watch回调函数后再加个对象参数就可以了。例：
const state = ref({count:0});
watch(state,(NV,OV)=>{
      console.log("state.count变化侦听到了");
},{
    immediate:true,
    deep:true,
})
--------------------------------------
问题来了，当开启deep时，对象中所有的属性都侦听了，当只想对象中的某个属性，
那要怎么办呢？看以下写法：
const state = ref({count:0，count2:5});
watch(
  () => state.value.count2,
  () => {
    console.log("侦听到了state.count2");
  }
);
需要注意的是，以上侦听写法时，ref响应式数据需得.value。