请问如何理解：`只能通过直接的 DOM 操作来实现`？

Question

Vue自定义指令：

只有当所需功能只能通过直接的 DOM 操作来实现时，才应该使用自定义指令。其他情况下应该尽可能地使用 v-bind 这样的内置指令来声明式地使用模板，这样更高效，也对服务端渲染更友好。

请问如何理解：只能通过直接的 DOM 操作来实现这句话 ？

Answer 1

即：不能通过将 html 代码转换成 DOM 节点的方式直接实现；而是需要在该节点被创建并添加到 DOM 树上之后，再进行一些操作。

比如动画，一些跟图像有关的仓库，等。

Answer 2

比如文档中的v-focus的例子，如果想要让输入框聚焦，就避免不了对dom进行直接操作。代码中的el就是指令所绑定的dom

const vFocus = {
  mounted: (el) => el.focus()
}

---

再举一个例子，如果单纯实现文本溢出的话，完全可以把样式直接写到class上，但如果想做到溢出的同时给文本添加title属性的话就要用js操作dom属性了

const vTitle = {
  mounted: (el) => {
     el.style.overflow = "hidden";
     el.style.textOverflow = "ellipsis";
     el.style.whiteSpace = "nowrap";
     if (el.clientWidth < el.scrollWidth) {
       el.title = el.innerHTML;
     }
  }
}

Answer 3

我觉得可以这么理解，内置指令可以实现的尽可能使用内置指令，内置指令实现不了的再考虑使用自定义指令，而自定义指令是可以通过直接操作DOM api去实现的，也就是js 操作 html的原生api，这里的DOM实例举个例子就是 focus 方法中的 el