如何使用vue js检查组件本身的数据何时发生变化？

Posted 2023-02-23

【中文标题】如何使用vue js检查组件本身的数据何时发生变化？

【英文标题】：How to check when data changes in component by itself with vue js?

【发布时间】：2018-05-27 19:48:48

【问题描述】：

我有自己改变数据的方法，简单的例子：

Vue.component('component', 
  template: '#component',
  data: function () 
    return 
      dataToBeWatched: ''
    
  ,
  methods: 
    change: function (e) 
      var that = this;
      setTimeOut(function() 
        that.dataToBeWatched = 'data changed';
      , 2000);
    ,
    makeSmthWhenDataChanged: function () 
      // ajax request when dataToBeWatched changed or when dataToBeWatched isn't empty
    
  
);

如何使用正确的方法 vue js 创建这样的观察者？ 或者我需要在组件中使用道具观看它？

【参考方案1】：

Vue 组件可以有一个 watch 属性，它是一个对象。对象键需要是需要监视的道具或数据的名称，值是数据变化时调用的函数。

https://vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property

Vue.component('component', 
  template: '#component',
  data: function () 
    return 
      dataToBeWatched: ''
    
  ,
  methods: 
    change: function (e) 
      var that = this;
      setTimeOut(function() 
        that.dataToBeWatched = 'data changed';
      , 2000);
    ,
    makeSmthWhenDataChanged: function () 
      // ajax request when dataToBeWatched changed or when dataToBeWatched isn't empty
    
  ,
  watch: 
      dataToBeWatched: function(val) 
          //do something when the data changes.
          if (val) 
              this.makeSmthWhenDataChanged();
          
      
  
);

【讨论】：

非常感谢，我知道应该很简单！