记录几个vue数据失去响应性的问题

响应式

• 数据和函数的关联
  • 数据
    • 函数中读到的数据，数据本身是响应式对象的某个属性
  • 函数
    • 被监控的函数，例如：render函数（template编译后），watchEffect回调，watch的第一个函数参数，computed的回调

下面列几个例子

• <template>
   <div>{{ num }}</div>
   <div>{{ count }}</div>
  </template>
  <script setup>
   import { ref, defineProps } from 'vue';
   const props = defineProps({
       num: Number,
   });
   //这里count和num属于数据和数据关联不是数据和函数关联，所以没有响应式式
   const count = ref(props.num + 'ref');  
  </script>
  

•   <template>
      <div>{{ num }}</div>
      <div>{{ count }}</div>
    </template>
  
    <script setup>
      import { ref, defineProps, watchEffect } from 'vue';
      const props = defineProps({
          num: Number,
      });
  
      const count = ref(0);
  
      watchEffect(() => {
          console.log('effect');
          //这里props.num和watchEffect的回调函数形成关联可以触发响应式
          count.value = props.num + 1; 
      });
    </script>
  

• watchEffect(() => {
      console.log('effect');
      count.value = props.num + 1;
  });
  
  const useDoubleNum = (num) => {
      const doubleNum = ref(0);
      watchEffect(() => {
          //这里的num改变不会触发响应式，因为num没有写成响应式对象的某个属性，应该/*doubleNum.value = props.num * 2*/
          doubleNum.value = num * 2
      })
      return doubleNum
  }
  
  const doubleNum = useDoubleNum(props.num)
  

•  const c = props.num;
   const count = computed(()=> c * 2);  //这里的c不是响应式数据，num的变化不会引起函数重新计算，需要写成/*const count = computed(()=> props.num * 2);*/