VueJS $watch $refs

Question

可以$watchVue$refs吗？

我想针对嵌套在当前 Vue 实例中但在 ready 回调中的子组件设置逻辑，$refs.childcomponent 在处理时最初是 undefined。

内部ready()

this.$watch('$refs', function() {
    console.log("not firing");
}, { deep: true });

结果：错误：超出最大调用堆栈

watch 实例的属性

watch: {
  '$refs': {
     handler: function() { console.log("hit"); },
     deep: true
  }
}

结果：没有。

Answer 1

你可以$watch$refs.<name>.<data>，但不能$refs.<name>本身，更不用说$refs了。

https://jsfiddle.net/kenberkeley/9pn1uqam/

const Counter = {
  data: () => ({
    i: 0
  }),
  template: `<fieldset>
    <p>Counter</p>
    <code>i = {{ i }}</code>
    <button @click="i += 1"> Add One </button>
  </fieldset>`
}

const App = {
  components: { Counter },
  mounted () {
    this.$watch(
        () => {
            return this.$refs.counter.i
        },
      (val) => {
        alert('App $watch $refs.counter.i: ' + val)
      }
    )
  },
  template: `<fieldset>
    <p>App</p>
    <counter ref="counter" />
  </fieldset>`
}

new Vue({
    el: '#app',
    render: h => h(App)
})

Answer 2

不，$refs 不是响应式的，watch 不起作用。

Answer 3

在下面的挂载使用代码中：

this.$watch(
        () => {
            return this.$refs.<name>.<data>
        },
      (val) => {
        alert('$watch $refs.<name>.<data>: ' + val)
      }
    )

Answer 4

如果您在 created() 期间在 $refs 中定义属性，或者如果您不需要数据中的后备存储，则可以在 beforeCreate() 期间定义属性。例如：

const vm = new Vue({
    el: "#app",
  data() {
    return {
        mode: 0,
        refTest: undefined
    };
  },
  created() {
    Object.defineProperty(this.$refs, 'test', {
      get: function () {
        return this.refTest;
      }.bind(this),
      set: function (newValue) {
        console.log(`set - Setting test refs to an array? ${Array.isArray(newValue)}`);
        this.refTest = newValue;
      }.bind(this),
      enumerable: true
    });
  },
  watch: {
    refTest: {
      handler(newValue, oldValue) {
        console.log(`watch - array? ${newValue ? Array.isArray(newValue) : undefined}`);
      },
      deep: false,
      immediate: true
    }
  },
  methods: {
    toggle() {
        this.mode = (this.mode === 1) ? 2 : 1
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="toggle">Toggle</button>
  <ul v-if="mode === 1">
    <li ref="test">Single Ref</li>
  </ul>
  <ul v-else-if="mode === 2">
    <li ref="test" v-for="s in ['Multiple', 'Refs']" :key="s">{{ s }}</li>
  </ul>
  <div v-else>No Refs</div>
</div>

这是我尝试过的唯一解决方案，当 ref 没有与组件本身一起安装时，它可以工作。

这里使用defineProperty的原因是因为如果ref改变了，watcher就会失去对它的追踪。

如果您想直接在 defineProperty 中处理您的操作，我想这没问题，然后您可以摆脱您的观察者。但是你总是需要有一个后备存储——尽管它不需要在数据中。

Answer 5

有一个解决方法。考虑到 JavaScript 在将数组分配给变量时不会创建数组的副本，它只是创建对原始数组的引用。知道 Vue 的 $refs 是数组，我们可以这样做：

<template>
    <div>
            <ul v-if="showAvailable">
                 <li v-for="pet in allPets.available" :key="pet.id" ref="pets">
                      {{ pet.name }}
                 </li>
            </ul>
            <ul v-else>
                 <li v-for="pet in allPets.unavailable" :key="pet.id" ref="pets">
                      {{ pet.name }}
                 </li>
            </ul>
    </div>
</template>

<script>

export default {
    props: ['allPets'],

    data() {
         showAvailable: true // Normally would change from a button or something
         shownPets: null // set to null for now
    },

    mounted() {
         this.$set(this.$data, 'shownPets', this.$refs.pets);    
    },

    watch: {
         shownPets: {
                         handler(newVal, oldVal){
                              // Do something when the DOM changes!
                         },
                         deep: true
                    }
    }
}
</script>

然后瞧。在组件挂载后，我们将数据shownPets 设置为我们的宠物$ref。引用将根据showAvailable 是true 还是false 来保存不同的元素，现在我们可以观察$ref 或DOM 的变化。

Answer 6

以下解决方案使用MutationObserver

在挂载的钩子中添加：

const config = {
      attributes: true,
      childList: true,
      subtree: true
    };
 // this will be triggered for any change in your element
    this.observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation) {
          this.infoHeight = this.$refs.info.clientHeight + 'px'
          console.log(" changed ", this.$refs.info.clientHeight)
        }
      });
    });
//observe the referenced element
    this.observer.observe(this.$refs.info, config);

完整示例

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: () => ({
    infoHeight: 0,
    observer: null,

    img: "https://images.ctfassets.net/hrltx12pl8hq/6TOyJZTDnuutGpSMYcFlfZ/4dfab047c1d94bbefb0f9325c54e08a2/01-nature_668593321.jpg?fit=fill&w=480&h=270"

  }),
  mounted() {
    const config = {
      attributes: true,
      childList: true,
      subtree: true
    };
    this.observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation) {
          this.infoHeight = this.$refs.info.clientHeight + 'px'
          console.log(" changed ", this.$refs.info.clientHeight)
        }
      });
    });
    this.observer.observe(this.$refs.info, config);


  },

 beforeDestroy(){
   this.observer.disconnect()
  },
  methods: {
    changeImg() {
      this.img = "https://i.pinimg.com/originals/a7/3d/6e/a73d6e4ac85c6a822841e449b24c78e1.jpg"
    },

  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
  <p>{{infoHeight}}</p>

  <button class="btn btn-primary" @click="changeImg">Change image</button>
  <div ref="info">
    <img :src="img" alt="image" />
  </div>
</div>