VueJS $watch $refs

Question

Is it possible to $watch Vue $refs ?

I'm wanting to set logic against a child component that is nested inside my current Vue instance but inside the ready callback, $refs.childcomponent is initially undefined while it's processed.

inside ready()

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

Result: Error: Maximum call stack exceeded

watch property of the instance

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

result: nothing.

Answer 1

You can $watch $refs.<name>.<data> but not $refs.<name> itself, not to mention $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

In mounted use code below:

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

Answer 4

There is a work around to this. Consider that JavaScript doesn't create a copy of an array when assigning it to a variable, it merely creates a reference to the original array. Knowing that Vue's $refs are arrays, we can do the following:

<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>

And voilà. We set our data shownPets to our pets $ref after the component mounts. The reference will hold different elements based on if showAvailable is true or false , and now we can watch for $ref or DOM changes.

Answer 5

the following solution uses MutationObserver

in mounted hook add :

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);

Full example

 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>

Answer 6

This is possible if you define the property in $refs during created(), or during beforeCreate() if you don't need the backing store in data. For example:

 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>

This is the only solution I have experimented with which works when the ref is not mounted along with the component itself.

The reason to use defineProperty here is because if the ref changes, the watcher will lose track of it.

If you want to handle your action right in the defineProperty, I suppose that would be ok and then you could get rid of your watcher. But you will always need to have a backing store -- though it doesn't need to be in data.