Vue组件执行created钩子后被重新创建，导致DOM样式设置失效的问题求助

首先得明确核心矛盾：Vue是数据驱动视图的框架，直接用jQuery操作DOM的方式，很容易和Vue的响应式渲染机制冲突。当Vue检测到响应式数据变化时，会重新生成虚拟DOM并同步更新真实DOM，这时候你之前用jQuery修改的DOM样式/状态就会被Vue的模板渲染结果覆盖；而且有时候组件重新渲染是父组件状态变化触发的，子组件的created只执行一次，updated也可能因条件不满足没触发，就出现了“操作生效后又被打回原形”的情况。

针对第一个图片居中问题：你用计算属性绑定样式的思路完全正确 #

你后来改成用v-bind:style结合计算属性动态计算margin-left，这就是Vue推荐的做法——把DOM状态和响应式数据绑定，让Vue负责DOM更新，而非手动操作DOM。这样每次组件渲染时，计算属性会自动重新计算值，样式同步更新，彻底避免了jQuery操作被覆盖的问题。

这里给个小优化建议：计算属性里直接用jQuery获取DOM宽度的方式，依赖真实DOM的时机，最好在mounted钩子中先获取一次图片宽度并存入响应式数据，再监听窗口resize事件更新这个值，这样计算属性可以直接复用数据，不用每次都查询DOM，性能更优：

data() {
  return {
    imgWidth: 0
  }
},
mounted() {
  this.getImgWidth();
  window.addEventListener('resize', this.getImgWidth);
},
beforeUnmount() {
  window.removeEventListener('resize', this.getImgWidth);
},
methods: {
  getImgWidth() {
    const imgSelector = this.source === 'detail-main' 
      ? ".vodal.image-dialog .pop-up .main-image img" 
      : ".vodal.image-dialog .pop-up .side-image img";
    this.imgWidth = $(imgSelector).width();
  }
},
computed: {
  margin() {
    return window.innerWidth / 2 - this.imgWidth / 2;
  }
}

针对第二个组件显示隐藏问题：放弃jQuery，用Vue内置指令控制 #

你说组件初始display: none，点击按钮用$.show()显示后又被重新渲染隐藏，且没进入created/updated。这大概率是因为点击按钮时修改了某个响应式数据，导致组件所在模板重新渲染，而组件初始样式是display: none，所以渲染后又回到隐藏状态。

解决核心是用Vue的响应式数据控制组件显示隐藏，而非直接操作DOM样式：

• 如果组件需要频繁切换显示隐藏，用v-show指令：
  1. 在组件模板上绑定v-show="isComponentVisible"
  2. 在data里定义isComponentVisible: false
  3. 点击按钮时只需修改this.isComponentVisible = true，Vue会自动处理显示隐藏，完全不用jQuery
• 如果组件需要销毁重建（比如切换时要重置状态），用v-if指令：
  1. 模板上绑定v-if="isComponentVisible"
  2. 点击按钮时修改this.isComponentVisible = true，Vue会负责创建组件并显示

这种方式不会被覆盖的原因是：Vue会根据isComponentVisible的值控制DOM的显示/存在状态，每次渲染都会依据这个响应式数据生成对应DOM状态，不会出现手动操作DOM被覆盖的情况。

避免这类问题的通用原则 #

• 尽量避免在Vue中直接操作DOM：除非是第三方库这类特殊场景，否则优先用Vue的响应式数据、指令、计算属性控制视图。
• 理解Vue生命周期钩子：created仅在组件创建时执行一次，updated在组件更新后执行；如果组件被<keep-alive>包裹复用，会触发activated而非created。若必须执行DOM操作，优先选mounted（DOM已渲染完成）或updated，但要在updated里加条件判断，避免重复执行不必要操作。
• 用Vue状态管理代替DOM状态：把需要控制的DOM状态（显示隐藏、样式等）绑定到Vue响应式数据上，让Vue处理视图更新，彻底规避和渲染机制的冲突。

内容的提问来源于stack exchange，提问作者cuneyttyler