在 Vue 3 组合中触发监视功能 Api

Question

我已经在设置中设置了这个无功值

const refValue = ref('foo');

并为其设置一个watch函数


     watch(refValue, function() {
       console.log("activaded")
    
    });

如果我手动更改值，watch 功能不会激活，

它只有在添加一个改变值的函数时才会被激活

 const changeValue = function changedValue() {
      console.log("fired");

      return refValue.value = 12;
    }

为什么只有在使用函数更改值时才会触发 watch，
我认为 const refValue = ref('foo'); 是被动的，所以 watch 应该检测所有变化

import { ref,watch } from 'vue';

export default {
  setup() {
    
    const refValue = ref('foo');
 

     watch(refValue, function() {
       console.log("activaded")
    
    });

    const changeValue = function changedValue() {
      console.log("fired");

      return refValue.value = 12;
    }



    return {
      refProp: refValue,
      changeFuncton: changeValue
     
    };
  },

};

Answer 1

ref 值类型是一个对象。

vue 监视 readValue 对象 reference 变化，而不是属性变化

Answer 2

尝试 immediate 选项并使用函数作为第一个参数 returns 观察到的属性 :

   watch(()=>refValue, function() {
       console.log("activaded")
    
    },{immediate:true});

在 Vue 3 组合中触发监视功能 Api

trigger watch function in Vue 3 composition Api

javascript

watch

vuejs3

vue-composition-api