Javascript VueJS$watch$refs

是否可以

$watch

Vue

$refs

我想针对嵌套在当前Vue实例中但在

就绪

回调中的子组件设置逻辑，

$refs.childcomponent

在处理时最初是

未定义的

内部

ready（）

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

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

watch

实例的属性

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

---

结果：无。

不，$refs没有反应，watch不会工作。

您可以

$watch

$refs..

但不能

$refs.

本身，更不用说

$refs

const计数器={
数据：（）=>({
i:0
}),
模板：`
柜台

i={{i}
加一
`
}
常量应用={
组件：{Counter}，
挂载（）{
这是一块50美元的手表(
() => {
退回这个。$refs.counter.i
},
（val）=>{
警报（'App$watch$refs.counter.i:'+val）
}
)
},
模板：`
应用程序

`
}
新Vue({
el:“#应用程序”，
渲染：h=>h（应用程序）
})

安装使用代码如下：

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

这个。$watch(
() => {
将此返回。$refs。。
},
（val）=>{
警报（“$watch$refs..”+val）
}
)

有一个解决方法。考虑到JavaScript在分配给变量时不创建数组的副本，它只创建对原始数组的引用。知道Vue的$ref是数组，我们可以执行以下操作：

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

所有宠物中的宠物：key=“pet.id”ref=“pets”>
{{pet.name}




{{pet.name}


导出默认值{
道具：[“所有宠物”]，
数据（）{
showAvailable:true//通常通过按钮或其他方式进行更改
shownPets:null//暂时设置为null
},
安装的（）{
此.$set（此.$data，'shownPets'，此.$refs.pets）；
},
观察：{
展台：{
处理程序（newVal、oldVal）{
//当DOM改变时做些什么！
},
深：是的
}
}
}

---

瞧。在安装组件后，我们将数据

shownPets

设置为宠物

$ref

。根据

showAvailable

是否为

true

或

false

，引用将包含不同的元素，现在我们可以查看$ref或DOM更改。

是否为

此处
deep:true是由输入错误造成的吗？是的，这不在实际的代码中，这只是我对stackoverflow的错误端口。很好，已删除。
deep:true
=>超过最大调用堆栈大小检查此$refs。安装时可能未定义。创建comp时，您应该
this.$watch（（）=>this.$refs.comp.prop，（val）=>{…}）
。@aztack所以在
mounted
hook@KenBerkeley不一定，可以随时创建带有ref的元素。例如，在API调用返回响应后，可以通过单击按钮创建表示文章的元素。这是一个例外的答案吗？OP说：
$refs.childcomponent在处理时最初是未定义的。
我处于相同的情况，模板看起来像：
所以在mount
中是这样。$refs.myRef
是未定义的，
这个。$refs.myRef.someProp
将抛出。谷歌搜索
vue watch ref
在顶部给我这个答案，但我看不出这个答案对我有什么作用，或者我解决这个问题的方法是看
product
：
watch:{product（）{this.$refs.myRef
因为
v-if
有条件地呈现ref，如果产品是真实的。是的…'\_(ツ)_/''那么，什么是正确的Vue方式来响应DOM元素的更改？