Vue 对象中的计算值函数被触发

Posted 2023-02-23

【中文标题】Vue 对象中的计算值函数被触发

【英文标题】：Computed value function in Vue object being triggered

【发布时间】：2019-08-18 12:33:51

【问题描述】：

我有一个包含 computed 属性的 Vue 对象。在mounted 函数中，我为一个事件设置了侦听器。当我正在监听的事件被触发时，计算属性的函数被调用，但它在事件处理程序开始其进程之前被调用。对对象中计算属性的唯一其他引用是观察者。调用堆栈仅显示调用计算属性之前的 vue.js 进程。据我所知，计算属性所依赖的值没有被更改。

new Vue(
el: '#element',
data: 
    info: [],
,
computed: 
    compVal: function () 
        .
        .
        .
    ,
    d
,
watch: 
    compVal: function (dataSet) 
        .
        .
        .
    
,
mounted: function () 
    var vm = this;

    window.addEventListener("datachange", function (e) 
        vm.info = e.newInfo;
    );
)

有人可以帮我弄清楚为什么要调用它，以便我可以阻止它吗？或者至少帮助我确定没有依赖值发生变化，以便我可以提前返回而不是完成函数？

【问题讨论】：

请发布足够的代码来重现问题。

已添加。就像我说的，compVal 在事件被触发时被调用（它由页面上其他地方的表单元素触发），但在事件处理程序被调用之前。

【参考方案1】：

我真的想通了。

事件传入的对象之一是对触发事件的代码持有的对象的引用，而不是副本。当页面第一次加载时，会发送一个带有默认值的初始事件。当 Vue 对象存储这些值时，它得到了一个引用。当事件源（在表单元素上具有域的不同 Vue 对象）更改其对象副本时，它会自动触发主 Vue 对象对该对象的引用的更改并导致属性评估。

在将对象传递给事件之前对其进行深度克隆解决了它。

【参考方案2】：

如果您的函数应该基于观察者事件运行，那么该函数应该位于方法中。

【讨论】：

就是这样。它不应该基于观察者事件运行。观察者正在分配它所依赖的值，但函数在这些值被分配之前就已经运行了，所以它最终被调用了两次。