将 Vue.js 计算为运行而不是 DOM 的一部分

Question

我无法弄清楚如何让 Vue.js 始终评估计算值，无论我是否在页面中实际使用它。我想要完成的一个简化版本是有几个输入字段，我想在其中一个字段更新时影响另一个字段的值。我也希望这个字段也可以手动编辑。 Example jsfiddle.

html:

<div id="app">
  <p v-if="updateUsername">Just here to get the darn thing to run</p>
  <div>
    yourName:<input v-model="yourName">
  </div>
  <div>
    dogsName:<input v-model="dogName">
  </div>  
  <div>
    username:<input v-model="userName">
  </div>
</div>

js:

var main = new Vue({
    el: '#app',
        data: {
            yourName: 'Adam',
        dogName: 'Barkster',
        userName: ''
    },
        methods: {
    },
    computed: {
        updateUsername: function(){
                this.userName = this.yourName + this.dogName;
        }
    }
});

这完全符合我的要求，但我需要在 html 中使用 "updateUsername"。我相信有更好的方法。

Answer 1

对于 Vue2，computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed。

在您的示例中，计算的属性=updateUserName 将在更改 dogName 或 yourName 时重新计算。

而且我认为在计算属性中更新其他数据不是一个好主意，你会记得在计算属性=updateUserName[=31= 中更新用户名] 现在，但在很长一段时间后，您可能会遇到一些问题，为什么我的用户名被意外更新，然后您不记得您在其中一个计算属性中更新了它。

最后，根据你的例子，我觉得watch应该更好。

你可以为userName、dogName、yourName定义三个watcher，然后在那里执行你自己的逻辑。

var main = new Vue({ el: '#app', data: { yourName: 'Adam', dogName: 'Barkster', userName: 'Adam Barkster' }, methods: { }, computed: { updateUsername: function(){ return this.yourName + this.dogName; } }, watch: { dogName: function(newValue){ this.userName = this.yourName + ' ' + newValue }, yourName: function(newValue){ this.userName = newValue + ' '+this.dogName }, userName: function(newValue) { // below is one sample, it will update dogName and yourName // when end user type in something in the <input>. let temp = newValue.split(' ') this.yourName = temp[0] this.dogName = temp[1] } } });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <div id="app"> <div id="app"> <p v-if="updateUsername">Just here to get the darn thing to run</p> <div> yourName:<input v-model="yourName"> </div> <div> dogsName:<input v-model="dogName"> </div> <div> username:<input v-model="userName"> </div> </div> </div>

Answer 2

您可以添加 watch:

watch: { updateUsername() {} }

Fiddle: https://jsfiddle.net/acdcjunior/k6rknwqg/2/

但你想要的似乎是两个观察者：

var main = new Vue({
    el: '#app',
    data: {
        yourName: 'Adam',
        dogName: 'Barkster',
        userName: ''
    },
    watch: {
        yourName: {
            handler() {
                this.userName = this.yourName + this.dogName;
            },
            immediate: true
        },
        dogName() {
            this.userName = this.yourName + this.dogName;
        }
    }
});

Fiddle: https://jsfiddle.net/acdcjunior/k6rknwqg/6/

另一种选择（同时观看两个或多个属性）：

var main = new Vue({
    el: '#app',
    data: {
        yourName: 'Adam',
        dogName: 'Barkster',
        userName: ''
    },
    mounted() {
        this.$watch(vm => [vm.yourName, vm.dogName].join(), val => {
            this.userName = this.yourName + this.dogName;
        }, {immediate: true})
    }
});

Fiddle: https://jsfiddle.net/acdcjunior/k6rknwqg/11/

将 Vue.js 计算为 运行 而不是 DOM 的一部分

Getting a Vue.js computed to run without being part of the DOM

vue.js

将 Vue.js 计算为运行而不是 DOM 的一部分