Vue - 如何将 document/window 属性绑定到计算的属性？

Question

我想监听我的 Vue 应用程序中输入的所有焦点事件。为了获得当前聚焦的输入，我考虑过将 document.activeElement 属性绑定到我的应用程序组件中的计算属性，但这不是反应性的，why ?

在数据中声明 activeElement 也不是反应式的。

观察者也一样！

让它工作的唯一方法是在输入本身的 focus/blur 事件之后简单地返回值，但这不符合我的需要。

new Vue({
  el: "#app",
  data: {
    activeElem: document.activeElement.tagName,
    realActiveElem: document.activeElement.tagName,
  },
  methods: {
    getActiveElem() {
      this.realActiveElem = document.activeElement.tagName;
    }
  },
  computed: {
    focused() {
      return document.activeElement.tagName;
    }
  },
  watch: {
    activeElem(val, oldVal) {
      console.log(val !== oldVal);
    },
    focused(val, oldVal) {
      console.log(val !== oldVal);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2 @focus="getActiveElem()">
    Data: {{activeElem}}
  </h2>
  <h2>
    Computed: {{focused}}
  </h2>
  <h2>
    From function to data: {{realActiveElem}}
  </h2>
  <input placeholder="Focus/Blur me" id="test" @focus="getActiveElem()" @blur="getActiveElem()" />
</div>

有什么方法可以将文档或 window 属性绑定为反应式吗？

Answer 1

Vue 只能响应对数据所做的更改，而不是 DOM。 document.activeElement 中的更改是 DOM 更改。

您可以使用事件触发方法来更新数据。例如：

new Vue({
  el: "#app",
  data: {
    element: ""
  },
  created() {
    document.addEventListener("focusin", this.focusChanged);
  },
  beforeDestroy() {
    document.removeEventListener("focusin", this.focusChanged);
  },
  methods: {
    focusChanged(event) {
      this.element = event.target.tagName;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input id="mine">
  <p>{{ element }}</p>
</div>

Vue - 如何将 document/window 属性绑定到计算的属性？

Vue - How to get document/window properties bound to a computed property?

javascript

vue.js

vue-reactivity

Vue - 如何将 document/window 属性绑定到计算的 属性？

Vue - How to get document/window properties bound to a computed property?

javascript

vue.js

vue-reactivity

Vue - 如何将 document/window 属性绑定到计算的属性？