携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情
最近换了组，白天大部分时间都是在熟悉新项目组的系统，所以只在刚来公司时和晚上的时候，才稍微看一下之前的那个缺陷。今天在看的时候，好像看懂了个大概。代码中有很多地方使用的语法、写法我都不了解其含义，今天了解了一下其中的几个，代码立刻就能看懂个大概了，不过还是没有解决那个缺陷.....
$refs 的含义
先用我自己的话概括一下，我感觉 $refs 这个东西，就是在写代码时，可以通过它获取你正在写的这个页面上的某个 DOM 元素。其实之前我也不懂还可以直接在代码中获取 DOM 元素的。获取 DOM 元素最容易理解的方法就是通过 document.querySelector() 方法获取 DOM 节点，如果想要获取某个输入框中的值 inputA ，写法如下：
document.querySelector(".inputA")
而如果采用 $refs 的方式，可以直接在 input 标签中绑定 inputA，然后在 $refs 中调用就行，这样就可以减少 DOM 节点的消耗。具体例子如下：
<div id="app">
<!-- 使用 ref="inputA" 相当于 css 选择器中的 id 属性 -->
<input type="text" ref="inputA"/>
<button @click="clickMethod">点击这里</button>
</div>
<script>
new Vue({
el: "#app",
methods: {
cilckMethod:function() {
// this.$refs.inputA 减少 DOM 节点的消耗
this.$refs.input.value="inputA的值";
}
}
})
</script>
简单理解，就像我开头所说，$refs 就是 Vue 用来获取 DOM 元素和子组件数据的一个，Vue 对象。前提是你有用 ref 指定过 DOM 元素。
ref 与 $refs
ref，以 标签 的形式存在，接收 String 参数。ref 被用来给 元素 或者 子组件 注册引用信息。分为两种情况：
- 如果在
普通的 DOM 元素上使用，引用指向的就是真实的 DOM 元素； - 如果在
子组件上，引用则指向的是组件实例对象
$refs，以 对象 的形式存在，表示 持有 ref 属性 的所有组件，该对象对应 ref 属性：
- 如果 ref 是在
普通的标签上，则 $refs 指向的就是该 DOM 元素； - 如果 ref 是在
子组件上，则指向的是该组件的实例对象；
clientWidth 的意思
另外，我还注意到代码中有用到一个 clientWidth，这个宽度，我也没看见哪里有定义(其实代码里有很多东西，我都不知道它在哪里定义，搞不清是自带的？还是在其父级等其他层级定义了？)，就想到应该是自带的一种宽度设置，就去了解了一下。
clientWidth，对象的可见宽度，不包含滚动条等边线，会随窗口的 显示大小 改变。了解其含义后，就明白为什么这里要用它，我想达到的目的就是搜索框中的搜索条件能够根据其宽度的改变，而自适应“折叠”起来，设置 clientWidth 还是比较合理的。
除此之外，还有一些类似变量：
-
scrollWidth，对象的实际内容的宽度，不包含边线宽度，会随对象中内容的多少改变，内容多了可能会改变对象的实际宽度； -
scrollHeight，对象的滚动高度； -
scrollLeft，设置或获取位于对象左边界或窗口中可见内容到最左端之间的距离； -
scrollTop，设置或获取位于对象最顶端或窗口中可见内容到最顶端之间的距离； -
offsetWidth，对象的可见宽度，包含滚动条等边线，会随窗口的显示大小改变；
关于 ref 和 $refs 就介绍那么多吧，大致作用就是 可以通过 ref="" 来将某个 DOM 元素 注册 到 ref 中，然后就可以通过 $refs 直接获取该 DOM 元素中的内容，减少 DOM 节点的消耗；后面补充的一些属性，主要是想了解一下 clientWidth：对象的可见宽度，不包含滚动条等边线，会随窗口的显示大小改变，其他的是拓展一下。
希望本文能够帮到你，如有错误，请指正！
我向你敬礼啊，Salute！
