Vue踩坑合集

配置篇

  1. 对ES6/7语法的支持
    ES6模块的动态加载是我们经常用到的。在项目中,我们经常看到的一个报错就是Unexpexted token import,我们要注意importexport是ES6的新特性。通常的解决方法是引入babel-polyfill依赖包。这个包的作用是啥?看官网上是怎么说的:

    This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool. This polyfill is automatically loaded when using babel-node.
    This means you can use new built-ins like Promise or WeakMap, static methods like Array.from or Object.assign, instance methods like Array.prototype.includes, and generator functions (provided you use the regenerator plugin). The polyfill adds to the global scope as well as native prototypes like String in order to do this.

    也就是说, 使用这个包可以将ES6语法重新编译,仿真ES5开发环境。如果我们在IE浏览器进行本地测试,控制台可能会提示我们使用polyfill兼容浏览器。在Vue服务器渲染环境下,我们可以在入口文件(index.js)引入全局:

    require('babel-core/register');
    require('babel-polyfill');
    require('./server.js'); //实际入口文件
    
  2. 上面的操作可能会引入新的问题,Error: Plugin/Preset files are not allowed to export objects, only functions. 这个出现的原因可能是我们引入的babel包和原来项目中的babel-loader冲突。有两个解决方案,一个降级到6, 一个升级到7。配置如下:

    //1. 降级
    "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-loader": "^7.0.0"
    }
    //2. 升级
    "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/register": "^7.0.0"
    }
    
  3. 安装一些包有可能报错:npm ERR! network 'proxy' config is set properly. See: 'npm help config' 这时只要修改下node配置即可:
    npm config set registry http://registry.cnpmjs.org/

用户交互篇

  • 阻止事件冒泡:事件修饰符 .prevent / stop
  • 对象引用问题:
    • 如果多个组件引用了同一个对象作为数据,那么当其中一个组件改动对象数据时,其他对象的数据也会同步改动;如果要避免同步依赖,可以通过深拷贝JSON.parse(JSON.stringify())
    • 在Vue中如果数据是数组,Vue提供了数组操作的变异方法pop,push等,可以触发视图更新
    • 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新,我们可以使用Vue.set(target, key, value)

数据库篇


  转载请注明: Blog Vue踩坑合集

 上一篇
离线应用与客户端存储 离线应用与客户端存储
参考资料cookie和session细说localStorage, sessionStorage, Cookie, Session 离线检测 支持离线Web应用开发是HTML5的另一个重点 HTML5定义了一个navigator.onLin
2018-09-12
下一篇 
闭包的理解 闭包的理解
闭包的理解 闭包 是指有权访问另一个函数作用域中变量的函数。创建闭包最常见的方式就是在一个函数的内部创建另一个函数,通过另一个函数访问这个函数的局部变量 利用闭包可以突破作用域链,将函数内部的变量和方法传递到外部 作用域链的理解:当某个函数
2018-09-12
  目录