vue 是不是在理论上,任何情况下都不需要操作 dom?

2022-04-04 07:59:16 +08:00
 mostkia
请教一下,vue 是不是在理论上,任何情况下都不需要操作 dom ?看到 vue 的官方说明里提到,尽量不要操作 dom ,应该交给 vue 来处理。

但某些情况下似乎的确得操作 dom ,比如点击时一个 dom 时需要操作另外一个 dom 时(后来发现可以在 data 里面写个对象,然后让另外一个 dom 监视它做出反应,而 on 方法里直接改这个对象就行),但我很清楚,因为我比较熟悉传统写法,而新学 vue ,总会有 vue 写法暂时无法解决但直接操作 dom 能解决的事情,一方面想引经据典,尽量不操作 dom ,一方面一个现成方案摆在眼前不用真的有些眼馋。

有时候总在想,是不是 vue 有更好的方法解决,我这样写是不是成了异端,vue 真的是能不用就不用 dom 吗?那些情况下大家都是会选择操作 dom 的?
4100 次点击
所在节点    Vue.js
28 条回复
Biwood
2022-04-04 08:14:31 +08:00
是不要直接操作 DOM ,能用数据驱动界面更新更新的情况下话为什么还有写一堆繁杂的原生 JS 逻辑?这也是 Vue 这类框架存在的意义,既然用它就要适应他的思维方式

当然,有些情况下还是需要直接访问 DOM 的,我能想到的有:
1. 所有对 Vue 实例挂载节点之外的 DOM 操作,比如 window/document/body 这些
2. 需要获取某些 DOM 原生属性的时候,比如 offsetHeight 之类的
placeholder
2022-04-04 08:20:03 +08:00
你这种情况,就是应该先用你现有的知识把功能写出来,

然后随着学习 vue 的深入,慢慢的改成 vue 提供的方式或者方法。

不用太过纠结。
mostkia
2022-04-04 08:22:25 +08:00
@Biwood 好的,第二种情况下,好像都是需要操作 dom 的,比如获取到 html 标签内容,一些属性等。一般来讲需要 js 里获取的数据都是双向绑定的,但也不排除偶尔需要获取到没绑定变量的写死标签里的内容或属性
mostkia
2022-04-04 08:24:57 +08:00
@placeholder 好的,我也是这样想的,有得选的话,肯定是优先使用 vue 的方案来解决问题,尽量的适应 vue 的写法,这种情况下可能脑子里清空旧知识反而学 vue 会快一些,我碰到过一些学前端的,dom 都操作不来,但不影响他们写页面😂
Kawa
2022-04-04 08:55:30 +08:00
别问, 问就是写着写着 Vue 就想引入一个 jQuery
Vue 绝大部分情况下不需要操作 DOM, 但是一旦需要操作就是痛苦面具, 特别是用了 ts+setup 的情况, 写起来是真的蛤人.
IvanLi127
2022-04-04 09:21:32 +08:00
能用 Vue 做数据驱动就用 Vue 做,不能就直接操作 DOM 。不过,直接操作 DOM 的,包在 Vue 组件内,比较雅观。
IvanLi127
2022-04-04 09:23:00 +08:00
@IvanLi127 补充下: 我的意思是需要 DOM 操作的元素单独放在一个组件内。
Cbdy
2022-04-04 09:29:38 +08:00
有一些操作还是需要操作 DOM 的,所以 Vue 也提供了 ref API
sadfQED2
2022-04-04 09:36:23 +08:00
😂我们公司的屎山项目就是 vue+jquery ,结果就是你永远不知道某个 ui 为啥消失出现
des
2022-04-04 09:48:59 +08:00
是容易出现 9 楼那种问题,而且容易有 bug
类比一下,你可以想象一个提线木偶。然后木偶的动作( html 显示什么)都是通过线( bind )由你(数据)来控制的
至于和 dom 直接互动建议用 ref

另外你说的眼馋不会指的是 jQuery 吧?
Desiree
2022-04-04 09:57:05 +08:00
不要为了用框架而用框架,先理解框架是为了解决什么问题。
jorneyr
2022-04-04 10:21:26 +08:00
写 directive 的时候可能会用到,例如 DOM 获取焦点,创建一些子 DOM 。
statumer
2022-04-04 11:25:04 +08:00
楼主应该是还没学会 Vue 的状态管理库吧,不会跨组件控制
mostkia
2022-04-04 11:26:59 +08:00
@Kawa 是挺纠结的,偶尔需要操作一下 dom 时,原生代码真的老大一串,引入的话,又是很大的一个文件。所以说还是会点原生 js 比较好
mostkia
2022-04-04 11:30:17 +08:00
嗯,$ref 这玩意儿挺好使的,也是官方提供的。
mostkia
2022-04-04 11:32:10 +08:00
@sadfQED2 笑死,所以官方才不推荐这样操作吧,vue:肯定 jquery 干的,我没动过这 dom 。jquery:莫挨老子,我都没读取过这 dom 节点🤣
mostkia
2022-04-04 11:37:05 +08:00
@des 不是,眼馋是指有些情况下需要某个标签的属性或者 text 内容,或者跨节点操作,vue 似乎不提供现成方法,这时就很想拿到 dom 来操作,我之前写原生 js 比较多,习惯还一下子改不过来。
mostkia
2022-04-04 11:40:06 +08:00
@statumer 你说的是 vuex 吗?那个的确没学,我看文档才一周不到,现在刚刚用顺手 vue ,至少不是负效率写页面了,现在觉得还是挺香的,小项目使用$ref 偶尔协调一下应该够用了,毕竟需要直接操作 dom 的场景不多
mostkia
2022-04-04 11:41:22 +08:00
@IvanLi127 好的,感谢,我会作为参考的
mostkia
2022-04-04 11:45:03 +08:00
@sadfQED2 jquery 要用也是配合 vue 的逻辑用比较好,大范围的独立于 vue 之外干预 vue 控制的 dom 的确是个烂主意

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/844832

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX