javascript - 为什么 JQuery 插件无法在 Vue 区域运行？

Question

我知道如果我们直接在 Vue 实例中使用 JQuery 插件，它是行不通的。
这就是我们使用包装组件的原因。 我想知道的是为什么它不能工作？
是因为Vue切断了元素和插件之间的绑定(bind)还是什么？
如果是，它是否发生在 Vue 生命周期的特定部分？
以 JQuery 日期选择器为例，我尝试查看生命周期中是否有某些内容发生更改，我想也许某些内容会被覆盖，但最终我什么也没发现......
谁能解释一下Vue和第三方库冲突的机制吗？谢谢...

console.log($('#date-picker'));
  console.log(document.getElementById('date-picker'))
new Vue({
  el: '#app',
 	beforeCreate: function() {
  	console.log($('#date-picker'));
    console.log(document.getElementById('date-picker'))
	},
  created: function() {
  	console.log($('#date-picker'));
    console.log(document.getElementById('date-picker'))
  },
  beforeMount: function() {
  	console.log($('#date-picker'));
    console.log(document.getElementById('date-picker'))
  },
  mounted: function() {
  	console.log($('#date-picker'));
    console.log(document.getElementById('date-picker'))
  },
});

<div id="app">
  <input id="date-picker">
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Answer 1

来源: https://github.com/vuejs/vue/issues/3587

当 vue 初始化时，对于内联模板，它将获取当前模板标记，然后将其从 DOM 中删除，并将该标记编译为渲染函数，因此在此过程中所有事件都会被销毁，因此渲染函数生成的新标记将不会有那些事件。

现在，您想知道什么？如果我添加 @click/v-on:click 效果很好，为什么？因为在编译期间这个属性被解析并且事件被附加到 vue 实例方法，然后它将被添加回 DOM。所以它们会工作得很好。

因此，如果您在初始化之前附加了事件，那么在内联模板的情况下它将被删除。

<小时/>

那么，接下来如何处理这些事情？？是的，我们可以处理这个问题，因为一旦这个过程完成，实例就会安装到 DOM 上，除非我们需要它，否则它不会删除元素，所以在 Mounted 后，会触发 mounted 生命周期事件，因此在这种情况下您可以附加您的事件现在将被保留。

如果还有什么需要了解的，请评论。