首页 > 其他分享 >理解vue2.x版本中productionTip=false设置无效的原因

理解vue2.x版本中productionTip=false设置无效的原因

时间:2023-05-13 15:36:26浏览次数:49  
标签:productionTip vue false js 源码 vue2 setTimeout

首先,我们看到vue官网中关于productionTip的API使用:在这里插入图片描述
但是,我在本地中使用却无效,代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初识Vue</title><!-- 引入Vue --><script src="../js/vue.js"></script>
</head><body><script>Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示</script>
</body></html>

于是,我在网上找了半天解决办法,都说是把vue.js的源码中的productionTip改成false,但是我想知道原因啊,并不是解决办法。
于是,我又去了vue的github中找解决办法,看到别人有提这个问题的。
在这里插入图片描述

于是我在底下的评论里看到这条:
在这里插入图片描述
大致翻译过来的解释是,在最新版本的Chrome中,在script中使用settimeout,将在允许第一个js完成后立即回调。
我们看一下源码的这部分:
在这里插入图片描述

确实是用了一个setTimeout包裹,那么,我们怎么知道这个setTimeout中的内容我在body中script设置的productionTip=false,谁先执行呢?
我们来测试一下:

  • 我们先在body中的script中打印222
    在这里插入图片描述

  • 然后我们在vue源码中打印config.productionTip

    然后,我们去浏览器的控制台看结果,发现刷新了几下浏览器,有两种结果:

    • 结果1——异常
      在这里插入图片描述
    • 结果2——正常
      在这里插入图片描述

原因解释:

  1. 异常返回——先返回true,然后是注释,最后是false,此时,vue.js加载完后执行的222,不会再进行判断,productionTip设置无效
  2. 正常返回——先返回222,后返回false,setTimeout后执行,此时productionTip为false,注释方法后222执行,productionTip设置有效

哦!!到这里我就明白了,原来就是这个setTimeout和body中的script两个比较谁先,由于setTimeout异步,所以返回时间不确定谁快。

解决方法:

  1. 直接源码修改productionTip为false (在vue.js文件中搜索关键字)
  2. 把源码中的setTimeout的时间改为10ms,如下图:在这里插入图片描述

参考文章,感谢:http://e.betheme.net/article/show-1117786.html?action=onClick

标签:productionTip,vue,false,js,源码,vue2,setTimeout
From: https://www.cnblogs.com/javaxubo/p/17397457.html

相关文章

  • Vue2电商实战项目(三)
    排序的操作要求的数据格式-数据格式说明-'1'表示'综合排序'-'2'表示'价格排序'-'asc'表示'升序'-'desc'表示降序-项目的数据格式的样子 -1:asc -1:desc -2:asc -2:desc###Search.index.vue......&quo......
  • vue2+van2 实现带搜索的级联选择组件
    级联选择组件新建组件-子项CasadeSelect/CasadeSelectItem.vue<template><divclass="container-list-item"><divclass="icon"><divclass="checkbox"><svg-iconv-if="curChecked"ic......
  • 使用vue2+element-ui+vuex实现后台管理系统的头部背景色动态点击修改
    **以下内容仅供自己学习使用话不多说,直接上代码1.首先去vuex里面importVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);conststore=newVuex.Store({state:{headerColor:'default-header',//定义一个默认的颜色},mutations:{ //setHe......
  • vue2 对vxe-table组件二次封装并全局引入
    要求新组件的写法要和旧组件保持一致,那么保留原本的插槽,属性,方法写法如下,以vxe-table为例组件封装<template><vxe-gridref="vxeGrid"v-bind="$attrs"v-on="$listeners"@filter-change="filterChange"><templatev-for="slotinslots......
  • Vue2没有`public`文件夹,该怎么建资源文件,编译后不被压缩
    在Vue2项目中,如果没有`public`文件夹,可以在项目根目录下创建一个`static`文件夹来存放静态资源文件,如JS、CSS、图片等。 如果你想在打包后不压缩JS文件,并且这个JS文件是在HTML中通过`script`标签引用的,可以按照以下步骤进行操作: 1.在`static`文件夹下创建一个`js`文件夹,并......
  • Vue2项目中,在编译打包后通过读取配置文件,任意修改接口地址
    可以按照以下步骤进行操作: 1.在项目根目录下创建一个名为`config`的文件夹,并在该文件夹下创建一个名为`index.js`的文件,用来存放配置文件,如: ```javascriptmodule.exports={  apiRoot:'http://api.example.com'}``` 这里定义了一个`apiRoot`属性,用来存放接口地......
  • vue2+vant2+rem+axios+钉钉自动登录 h5模板
    下载代码请轻轻的点一下这里~Node版本要求VueCLI需要Node.js8.9或更高版本(推荐8.11.0+)。你可以使用nvm或nvm-windows在同一台电脑中管理多个Node版本。本示例Node.js14.17.0启动项目npminstallnpmrundev打包项目打测试包会带vconsole控制台对......
  • Vue2--入门学习
    看了慕课网的教学视频,觉得挺不错的,在此做个随堂记录,有兴趣的可以去看视频vue版本:2.5文档链接:https://v2.cn.vuejs.org/v2/guide/installation.html视频链接:https://www.imooc.com/video/16976 在vue官网下载开发版本的vue.js,并复制其代码到编译器中创建的vue.js文件中 ......
  • vue2自定义组件@click点击失效问题及解决
    1.参照官方文档,可以用@click.native=“click”解决2.$emit组件之间事件传递解决https://www.jb51.net/article/246610.htm......
  • Vue2入门之超详细教程九-监视属性
    1、简介监视属性watch:1.当被监视的属性变化时,回调函数自动调用,进行相关操作2.监视的属性必须存在,才能进行监视!!3.监视的两种写法:(1) newVue时传入watch配置(2) 通过vm.$watch监视深度监测:(1) Vue中的......