【vue】解决使用vue，导致jq插件失效的问题

我们常常发现，静态页面的插件效果还好好的，但在使用vue进行数据交互时，插件功能却失效了。

问题分析：

这根vue的生命周期有关，vue生命周期分为以下几个周期。

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

当mounted时，才完成挂载，在此之后的各种插件程序运行时，才有效果。

所以，插件程序与vue程序并行，vue实例还未创建，所以插件无法获取dom元素，插件功能也就失效了。

 

解决办法：

情况1：如果使用插件的dom元素，不是ajax异步请求来的（写死在HTML中）。

解决方式：把“插件程序”，放在mounted中。

1、封装插件程序：

function init() { //你的插件程序，该代码可以放在其他js文件上
}

 2、“插件程序”，放在vue程序的mounted(){}

mounted(){ init(); //插件程序，放在mounted中
},

 

情况2：如果使用插件的dom元素，是ajax异步请求来的。

解决方式：把“插件程序”，放在ajax请求成功后的success中，并用  this.$nextTick。

1、封装插件程序：

function init() {
    //你的插件程序，该代码可以放在其他js文件上
}

 2、“插件程序”，放在ajax的success中

success: function (data) {
 _this.$nextTick(()=>{ 

　　　　init();
　　 }); 
},