Question

我无法理解Vue中的观看机制。

我有一个父组件，该组件将Vehicle对象传递给子组件。

车辆：

{
  Number : 'some number', 
  Position: { lat: 'some lat', lng: 'some long', }
}

现在我有一个计时器，用于更新父对象中的该对象。孩子也反映了变化。在孩子里面，我实际上是将此车辆对象放置在地图上作为标记。

我在这里要做的是观察道具（车辆）的变化，如果它发生变化，那么我想平滑/动画化标记到新更新的位置。

我试图做：

watch: {

vehicle: function(newVal, oldVal){
 console.log('newVal'); 
}

},

它不起作用，什么也没打印。我是否必须在上级组件中使观察者观看和制作该动画？还是孩子可以看看传递给它的财产？

编辑：

更改父级中的Vehicle对象：

如果要从实时数据库接收数据，那么我要做的就是维护一个父数组，并循环显示标记。

现在，我循环数组并与之匹配新数据，并仅在更新后更新值。

//一些随机位置

var positions = [
                    {
                        lat: 24.827393, lng: 67.021769,
                    },
                    {
                        lat: 24.827279, lng: 67.028294,
                    },
                    {
                        lat: 24.834947, lng: 67.024829,
                    },
                    {
                        lat: 24.835719, lng: 67.012825,
                    },
                    {
                        lat: 24.8274599, lng: 67.0322483,
                    },
                ];

                var random = Math.floor((Math.random() * positions.length - 1) + 1);



    this.vehicles[0].position.lat: positions[random].lat;
this.vehicles[0].position.lng: positions[random].lng;

稍后，我将其绑定到我的子组件上，如下所示：

  <CustomMarker :key="vehicle.number" v-bind:vehicle="vehicle"
                      v-for="(vehicle, index) in vehicles"></CustomMarker>

基本上在随机位置数组上方仅用于测试我的平稳运动，完成后我将实时接收相同的坐标。

Answer 1

您的观察者只会直接响应对vehicle道具的更改，而不会对vehicle对象或其后代的属性所做的更改做出响应。我的意思是，如果父组件改变了车辆对象，例如：

this.vehicle.Position.lat = 123

并且this.vehicle绑定到子组件的vehicle道具，那么观察者将不会被触发，因为它仍然是相同的vehicle对象实例。

如果父母改为这样做：

this.vehicle = someOtherVehicle

然后将触发监视程序。

通过将vehicle设置为true，可以指示Vue监视deep对象（及其后代）的属性更改：

watch: {
  vehicle: {
    deep: true,
    handler(newVal, oldVal) {
      ...
    }
  }
}

有关更多信息，请参见watch docs。

如果您想知道旧的和新的纬度和经度值，那么一种方法是观察子级中的Position属性，变异父级中的Position属性，并保留{{ 1}}对象不可变：

孩子

{ lat, lng }

父母

watch: {
  'vehicle.Position'(oldVal, newVal) {
    const oldLat = oldVal.lat
    const newLat = newVal.lat
  }
}

看着道具从孩子体内传来

1 个答案: