Vue 2.0学习笔记之使用$refs访问Vue中的DOM(2)

日期：2020-05-11 栏目：程序人生浏览：次

点击按钮之后，按钮的文本将更改变“Hi,!大漠”：

当然，我们也可以通过使用查询选择器来访问DOM元素来实现这样的效果，但是使用ref属性更简洁，而且这也是Vue中的方法。它也将更安全，因为你不会依赖于class和id。因此，几乎不会因为更改了HTML的标签或者CSS样式受到影响。

像Vue这样的JavaScript框架的主要目的之一就是让开发人员不必去处理DOM。所以你应该避免去做这样的事情，除非你真的需要去做。还应该要注意一个潜在的问题。

首先来看一个简单的示例，给h1元素添加一个ref属性。

<div id="app">
  <h1 ref="message">{{ message }}</h1>
  <button ref="myButton" @click="clickedButton">点击偶</button>
</div>

当我们点击按钮之后，浏览器控制台输出的值将会得到改变：

由于我们把Vue的实例赋值值了变量app，所以我们可以继续使用它。现在要做的是改变元素的文本。最初<h1>元素的内容是message的值，在下面这个示例中，通过一个setTimeout来看看元素<h1>发生的变化：

let app = new Vue({
  el: '#app',
  data () {
    return {
      message: 'Hi!大漠'
    }
  },
  methods: {
    clickedButton: function () {
      console.log(this.$refs);
      this.$refs.myButton.innerText = this.message
    }
  }
})

setTimeout(function() {
  app.$refs.message.innerText = '延迟2000ms修改h1元素的文本';
}, 2000);

正如你所看到的，我们在更新数据属性时覆盖了我们对DOM所做的更改。这样做的原因是，当访问DOM元素并直接操作它们时，实际上跳过了前面文章中讨论到的虚拟DOM。因此，Vue仍然控制着h1元素，甚至当Vue对数据中的做出更新时，它会更新虚拟DOM，然后更新DOM本身。因此，你应该小心使用对DOM的直接更改，就算是你不小心做了相应的修改，你所做的任何更改都将可能会被覆盖。虽然在使用refs时应该小心更改DOM，但是做只读操作相对来说比较安全，比如从DOM中读取值。

另外来看看v-for指令中使用refs属性的效果。比如下面这个示例，给一个无序列表ul，通过v-for指令输出1至10的数字。

Vue 2.0学习笔记之使用$refs访问Vue中的DOM(2)

相关推荐