Watch 属性在 Vuejs 中不起作用

Question

我开始学习 Vuejs，在工作中我尝试测试 Watch 属性，但它对我不起作用，你能告诉我下面的代码有什么问题吗？

<div id="k2c">
    Kilometers : <input v-model= "Kilometers">
    Meters : <input v-model = "Meters"> 
</div>
<script type="text/javascript"> 
    var vr = new Vue({ 
        el:'#k2c',
        data:{
            Kilometers: 0;
            Meters : 0;
        },

        methods:{

        },
        computed:{
        },
        watch : {
            Kilometers : function(val){   
                this.Kilometers = val;
                this.Meters = val * 1000;  
            },    
            Meters : function(val){
                this.Kilometers = val / 1000;
                this.Meters = val;
            }
        }
    });
</script>

Answer 1

您正在改变观察者内部的属性。不要，没必要。除此之外，您还有其他问题（请参阅下面的 cmets）。

推荐阅读：https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics

<script src="https://unpkg.com/vue"></script>
<div id="k2c">
  Kilometers : <input v-model="Kilometers">
  Meters : <input v-model="Meters">
</div>
<script>
var vr = new Vue({
  el: '#k2c',
  data: {
    Kilometers: 0,          // replaced ; with ,
    Meters: 0               // removed ; here
  },
  methods: {

  },
  computed: {},
  watch: {
    Kilometers: function(val) {
      //this.Kilometers = val;         // commented out this line, you should remove it
      this.Meters = val * 1000;
    },
    Meters: function(val) {
      this.Kilometers = val / 1000;
      //this.Meters = val;             // commented out this line, you should remove it
    }
  }
});
</script>

注意：您的两个计算属性具有循环依赖关系（更改一个会更改另一个，反之亦然）。目前这不是问题，因为它们的值收敛。如果这没有发生，您会收到 stackoverflow 错误。