使用Vue时getElementById返回null？求解决方案及相关疑问

1. 原生window.onload获取元素返回null的原因及解决方法 #

你这里犯了一个很容易忽略的小错误：document.getElementById()的参数不需要加#前缀！

jQuery的$("#sell")是使用CSS选择器语法，所以需要#来标识ID选择器；但原生JS的getElementById()只需要传入纯ID字符串，不需要任何前缀。你之前写的document.getElementById('#sell')相当于在找一个ID为#sell的元素，而你的DOM里是<div id="sell">，自然返回null。

修正后的代码应该是这样：

window.onload = function() {
  const sellEl = document.getElementById('sell'); // 去掉#
  if (sellEl) {
    new Vue({
      el: '#sell',
      components: {
        'sell-picture': SellPictureComponent
      }
    });
  }
}

另外补充一点：你的脚本放在</body>标签前，此时浏览器已经解析完前面的所有DOM元素了，其实**不需要window.onload**也能直接获取到#sell元素——window.onload是等所有资源（图片、样式表等）加载完成才触发，而DOM就绪的时间更早。所以你甚至可以简化成：

// 直接初始化Vue，因为此时#sell已经存在于DOM中
new Vue({
  el: '#sell',
  components: {
    'sell-picture': SellPictureComponent
  }
});

2. Vue中使用jQuery是否可行？ #

完全可行，但要注意使用场景和方式，避免和Vue的核心机制冲突：

• 安全的使用场景：

  • 调用jQuery的工具类方法：比如$.trim()、$.extend()、$.each()这类不涉及DOM操作的功能，和Vue完全兼容。
  • 处理Bootstrap依赖jQuery的组件：比如模态框、下拉菜单、轮播等。只要在Vue的mounted钩子（此时Vue已经渲染完DOM）里初始化这些Bootstrap组件就没问题，比如：

    new Vue({
      el: '#sell',
      mounted() {
        // 初始化Bootstrap模态框
        $('#myModal').modal({ backdrop: 'static' });
      }
    });
    

  • 用jQuery做AJAX请求：虽然Vue推荐用axios，但如果习惯了$.ajax()，直接用也不会有问题，只要把请求回来的数据赋值给Vue的data，保持数据驱动即可。

• 需要避免的情况：
  不要用jQuery直接修改Vue绑定了数据的DOM元素！比如Vue用v-model绑定的输入框，如果你用$('#input').val('new value')修改它的值，Vue的响应式数据不会同步更新——因为Vue是通过监听DOM事件来同步数据的，直接修改DOM值不会触发这些事件，会导致数据和视图脱节。这种情况一定要通过修改Vue的data来更新视图。

总的来说，只要你遵循"Vue管数据驱动视图，jQuery管非核心的DOM交互/工具类操作"的原则，两者可以很好地共存。

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