汇总 Vue 中大家最爱问的高频问题

文章目录

`data functions should return an object`
我给组件内的原生控件添加事件,怎么不生效了!
我用了 axios , 为什么 IE 浏览器不识别(IE9+)
我在函数内用了 `this.xxx=`，为什么抛出 `Cannot set property 'xxx' of undefined`
为什么我引入的小图片渲染出来却是 `data:image/png;base64xx`
`Component template shold contain exactly one root element.If you are useing v-if on multiple elements`
跨域问题怎么破？
我需要遍历的数组值更新了,值也赋值了,为什么视图不更新
为什么我的组件间的样式不能继承或者覆写
路由模式改为 `history` 后，除了首次启动首页没报错，刷新访问路由都报错！
我想拦截页面，或者在页面进来之前做一些事情，可以吗？
`Unexpected token: operator xxx`
CSS `background` 引入图片打包后，访问路径错误
安装模块时命令窗口输出 `unsupported platform xxx`
`Failed to mount component: template or render function not defined`
axios 的 post 请求后台接收不到
过滤器可以用于DOM区域结合指令么
我的 Vue 网站为什么 UC 访问一片空白亦或者 flex 布局错乱！
`Module not found:Error:Can't resolve xx-loader in xx`
父组件可以直接调用子组件的方法吗
`Error in event handler for "click": "xxx"`
组件的通讯有哪几种啊！
既然 localStorage 和 sessionStorage 能做到数据维护，为什么还要引入 vuex
vuex 的用户信息为什么还要存一遍在浏览器里（sessionStorage or localStorage）
线上若是 nginx，如何部署？以及反向代理这些
`npm run dev` 报端口错误
什么时候用 `v-if`，什么用 `v-show`
`` 是什么
`the 'scope' attribute for scoped slots ... replaced by 'slot-scope' since 2.5`
`props` 不使用 `:(v-bind)` 可以传递值么
`Uncaught TypeError: Cannot set property xxx which has only a getter`
`SyntaxError: Unexpected identifier`
为什么我的 npm 或者 yarn 安装依赖会生成 lock文件，有什么用!
组件可以缓存吗？
`package.json` 里面的 `dependencies` 和 `devDependencies` 的差异
首屏加载比较慢，怎么破，打包文件比较大
Vue SPA 没法做优化(SEO)!有解决方案么

`data functions should return an object`

这个问题是 Vue 实例内，单组件的 data 必须返回一个对象。

为什么要return一个数据对象呢？
官方解释如下: data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！

简言之,组件复用下,不会造成数据同时指向一处,造出牵一发而动全身的破问题…

我给组件内的原生控件添加事件,怎么不生效了!

<!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件--><!--// 错误例子1-->
<el-input placeholder="请输入特定消费金额 " @mouseover="test()"></el-input><!--// 错误例子2-->
<router-link :to="item.menuUrl" @click="toggleName=''"><i :class="['fzicon',item.menuIcon]"></i><span>{{item.menuName}}</span>
</router-link><!--上面的两个例子都没法触发事件!!!-->
<!--究其原因,少了一个修饰符 .native-->
<router-link :to="item.menuUrl" @click.native="toggleName=''"><i :class="['fzicon',item.menuIcon]"></i><span>{{item.menuName}}</span>
</router-link><!--明明官方文档有的,一堆人不愿意去看,,Fuck-->
<!--https://cn.vuejs.org/v2/guide/components.html#给组件绑定原生事件-->

我用了 axios , 为什么 IE 浏览器不识别(IE9+)

那是因为 IE 整个家族都不支持 promise, 解决方案:

npm install es6-promise// 在 main.js 引入即可
// ES6的polyfill
require("es6-promise").polyfill();

我在函数内用了 `this.xxx=`，为什么抛出 `Cannot set property 'xxx' of undefined`

这又是 this 的套路了。this 是和当前运行的上下文绑定的…

一般你在 axios 或者其他 promise , 或者 setInterval 这些默认都是指向最外层的全局钩子.

简单点说：“最外层的上下文就是 window,vue内则是 Vue 对象而不是实例!”;
解决方案:

暂存法：函数内先缓存 this，let that = this
箭头函数：会强行关联当前运行区域的 this 的上下文

为什么我引入的小图片渲染出来却是 `data:image/png;base64xx`

这个是 webpack 里面的对应插件处理的.
对于小于多少 K 以下的图片(规定的格式)直接转为 base64 格式渲染;
具体配置在 webpack.base.conf.js 里面的 rules里面的 url-loader
这样做的好处:在网速不好的时候先于内容加载和减少 http 的请求次数来减少网站服务器的负担。

`Component template shold contain exactly one root element.If you are useing v-if on multiple elements`

大体就是说，单组件渲染 DOM 区域必须要有一个根元素，不能出现同级元素。
可以用 v-if 和 v-else-if 指令来控制其他元素达到并存的状态。

换个直白的解释，就是有一个唯一的父类，包裹者。

比如一个 div(父包含块) 内部多少个同级或者嵌套都行,但是最外层元素不能出现同级元素。

跨域问题怎么破？

这种问题老生常谈了，我就不细说了。大体说一下：
1、 CORS , 前后端都要对应去配置，IE10+
2、 nginx 反向代理，一劳永逸【线上环境可以用这个】
线下开发模式，比如你用了vue-cli，里面的 webpack 有引入了proxyTable这么个玩意，也可以做接口反向代理

// 在 config 目录下的index.jsproxyTable: {"/bp-api": {target: "http://new.d.st.cn",changeOrigin: true,// pathRewrite: {//   "^/bp-api": "/"// }}
}// target : 就是 api 的代理的实际路径
// changeOrigin: 就是是变源,必须是...
// pathRewrite : 就是路径重定向,一看就知道

当然还有依旧坚挺的 jsonp 大法!不过局限性比较多，比较适合一些特殊的信息获取。

我需要遍历的数组值更新了,值也赋值了,为什么视图不更新

那是因为有局限性啊，官方文档也说的很清楚，只有一些魔改的之后的方法提供跟原生一样的使用姿势(却又可以触发视图更新)。

一般我们更常用(除了魔改方法)的手段是使用：this.$set(obj,item,value)

传送门：数组更新检测（触发视图更新）

为什么我的组件间的样式不能继承或者覆写

单组件开发模式下，请确认是否开启了 css 模块化功能
也就是 scoped (vue-cli 里面配置了，只要加入这个属性就自动启用)

<style lang="scss" scoped></style>

为什么不能继承或者覆写呢，那时因为每个类或者 id 乃至标签都会给自动在 css 后面添加 hash
比如

// 写的时候是这个
.trangle{}// 编译过后,加上了 hash
.trangle[data-v-1ec35ffc]{}

这些都是在 css-loader 里面配置

路由模式改为 `history` 后，除了首次启动首页没报错，刷新访问路由都报错！

必须给对应的服务端配置查询的主页面。也可以认为是主路由入口的引导

传送门：Vue-Router history Mode

我想拦截页面，或者在页面进来之前做一些事情，可以吗？

各种路由器的钩子。传送门：导航守卫
当然，记忆滚动的位置也可以做到，详情翻阅文档

`Unexpected token: operator xxx`

这种一看就是语法错误
基本都是符号问题
一般报错会给出哪一行或者哪个组件

CSS `background` 引入图片打包后，访问路径错误

因为打包后图片是在根目录下，你用相对路径肯定报错啊。
你可以魔改 webpack 的配置文件里面的 static 为 ./static 但是不建议
你若是把图片什么丢到 assets 目录下，然后相对路径，打包后是正常的。

安装模块时命令窗口输出 `unsupported platform xxx`

一般两种情况，node 版本不兼容，系统不兼容。
解决方案：要么不装，要么满足安装要求

`Failed to mount component: template or render function not defined`

组件挂载失败，问题只有这么几个
组件没有正确引入；挂载点顺序错了
自行动手排查

axios 的 post 请求后台接收不到

axios 默认是 json 格式提交，确认后台是否做了对应的支持。
若是只能接受传统的表单序列化，就需要自己写一个转义的方法
当然还有一个更加省事的方案，装一个小模块 qs

npm install qs -S// 然后在对应的地方转就行了..单一请求也行,拦截器也行...我是写在拦截器的.
// 具体可以看看我 axios 封装那篇文章//POST传参序列化(添加请求拦截器)
Axios.interceptors.request.use(config => {// 在发送请求之前做某件事if (config.method === "post") {// 序列化config.data = qs.stringify(config.data); // ***** 这里转义}// 若是有做鉴权token , 就给头部带上tokenif (localStorage.token) {config.headers.Authorization = localStorage.token;}return config;},error => {Message({//  饿了么的消息弹窗组件,类似toastshowClose: true,message: error,type: "error.data.error.message"});return Promise.reject(error.data.error.message);}
);

过滤器可以用于DOM区域结合指令么

// 不行,看下面的错误例子
<li v-for="(item,index) in range | sortByDesc | spliceText">{{item}}</li>// `vue2+`的指令只能用语 mustache`{{}}` , 正确姿势如下:<span>{{ message | capitalize }}</span>

我的 Vue 网站为什么 UC 访问一片空白亦或者 flex 布局错乱！

来来来，墙角走起！！UC号称移动界的 IE，这称号不是白叫的

flexbox 布局错乱，一般是你没有把兼容方案写上，就是带各种前缀，复合属性拆分
UC访问空白，有一种情况绝对会造成，那就是 ES6 的代码降级不够彻底，其他情况可能就是路由配置问题（自己去排除）
1、现在的开发都推荐按需引入，靠 babel-preset-env 来控制，以达到打包体积减小
2、但是这样做的后果，有些内核比较老的，很难达到效果
3、所以最好把代码完全 ES5 化，记住有些特性不能乱使用，没有对应的 polyfill ，比如 ES6 的 proxy

`Module not found:Error:Can't resolve xx-loader in xx`

这里问题一般就是 webpack 的配置文件你改动了或对应的 loader 没有装上

父组件可以直接调用子组件的方法吗

可以，通过 $refs 或者 $children 来拿到对应的实例，从而操作

`Error in event handler for "click": "xxx"`

这个问题大多都是你写的代码有问题，你的事件触发了。
但是组件内部缺少对应的实现或者变量，所以抛出事件错误。
解决方案：看着报错慢慢排查

组件的通讯有哪几种啊！

基本最常用的是这三种：
1、父传子： props
2、子传父： emit
3、兄弟通讯：

event bus：就是找一个中间组件来作为信息传递中介
vuex：信息树

既然 localStorage 和 sessionStorage 能做到数据维护，为什么还要引入 vuex

这个问题问得好，Vuex 的目的用来维护同级组件间的数据通讯，拥有一个共同的状态树；

仅仅活在 SPA 的里面的 伪多页（路由） 内，这种东西 localStorage 和 sessionStorage 也可以做到，还能做到跨页面数据维护，还不会被浏览器刷新干掉。

为什么还要引入 vuex，我个人觉得原因只有这么一个，“可维护性”和“易用性”

这么理解呢？

可维护性：因为是单向数据流，所有状态是有迹可循的，数据的传递也可以及时分发响应
易用性：它使得我们组件间的通讯变得更强大，而不用借助中间件这类来实现不同组件间的通讯

而且代码量不多，若是你要用 localStorage 或者 sessionStorage ，你必须手动去跟踪维护你的状态表

虽说可行，但是代码量会多很多，而且可读性很差

是不是每个项目都需要用到 vuex ？
答案是否定的，小型项目上这个反而是累赘，这东西一般是用在中型项目+的
因为里面涉及需要维护的数据比较多，同级组件间的通讯比较频繁

若是用到 vuex 的项目记得结合 localStorage 或者 sessionStorage 来达到某些状态持久化

vuex 的用户信息为什么还要存一遍在浏览器里（sessionStorage or localStorage）

因为 vuex 的 store 干不过刷新啊
保存在浏览器的缓存内，若用户刷新的话，值再取一遍呗。

线上若是 nginx，如何部署？以及反向代理这些

传送门：一篇不大靠谱的nginx 1.11.10配置文件

`npm run dev` 报端口错误

在 webpack 配置：config/index.js

dev: {env: require("./dev.env"),port: 8080, //  这里这里,若是这个端口已经给系统的其他程序占用了.改我改我!!!!!!autoOpenBrowser: true,assetsSubDirectory: "static",assetsPublicPath: "/"
}

什么时候用 `v-if`，什么用 `v-show`

我们先来说说两者的核心差异：

v-if ： DOM 区域没有生成，没有插入文档，等条件成立的时候才动态插入到页面
有些 DOM 的渲染，需要遍历的数组对象或者值，最好用这个控制，等到拿到值才处理遍历，不然一些操作过快的情况会报错，比如数据还没请求到
v-show ： DOM 区域在组件渲染的时候同时渲染了，只是单纯用 css 隐藏了
对于下拉菜单，折叠菜单这些数据基本不这么变动，用这个最合适了，而且可以改善用户体验，因为它不会导致页面的重绘，DOM操作会。

简而言之：DOM 接口不怎么变化的用 v-show，数据需要改动很大或者布局改动的用 v-if

`<template>` 是什么

不过 Vue 的 template 有点不一样，不是去给浏览器解析的。。
因为最终 template 不会解析到浏览器的页面，它只是在 Vue 解析的过程充当一个包裹层
最终我们看到的是内部处理后的组合的 DOM 结构

`the 'scope' attribute for scoped slots ... replaced by 'slot-scope' since 2.5`

这个问题只出现老项目升级到 vue 2.5+ 的时候，提示就是 scope 现在要用 slot-scope 来代替，但是 scope 暂时可以用，以后会移除

`props` 不使用 `:(v-bind)` 可以传递值么

可以，只是默认传递的类型会被解析成字符串
若是要传递其他类型，该绑定还是绑定

`Uncaught TypeError: Cannot set property xxx which has only a getter`

这个问题就是你要操作的属性只允许 getter，不允许 setter
解决方案？用了别人的东西就要遵循别人的套路来，不然就只能自动动手丰衣足食了。

`SyntaxError: Unexpected identifier`

语法错误,看错误信息去找到对应的页面排查

为什么我的 npm 或者 yarn 安装依赖会生成 lock文件，有什么用!

lock 文件的作用是统一版本号，这对团队协作有很大的作用
若是没有 lock 锁定，根据 package.json 里面的 ^ ， ~这些
不同人，不同时间安装出来的版本号不一定一致
有些包甚至有一些 breaking change(破坏性的更新)，造成开发很难顺利进行

组件可以缓存吗？

可以，用 keep-alive
不过是有代价的。占有内存会多了，所以无脑的缓存所有组件!!!别说性能好了…切换几次，有些硬件 hold 不住的，浏览器直接崩溃或者卡死。
所以 keep-alive 一般缓存都是一些列表页，不会有太多的操作，更多的只是结果集的更换。
给路由的组件 meta 增加一个标志位，结合 v-if 就可以按需加上缓存了。

`package.json` 里面的 `dependencies` 和 `devDependencies` 的差异

其实不严格的话，没有特别的差异。
若是严格，遵循官方的理解。

dependencies : 存放线上或者业务能访问的核心代码模块，比如 vue，vue-router
devDependencies: 处于开发模式下所依赖的开发模块，也许只是用来解析代码，转义代码，但是不产生额外的代码到生产环境，比如什么babel-core这些

如何把包安装到对应的依赖下呢?

npm install --save xxx  // dependencies
npm install --save-dev xxx  // devDependencies// 也能用简易的写法（i:install，-S:save，-D:save-dev）npm i xxx -S  // npm install xxx --save
npm i xxx -D  // npm install xxx --save-dev

首屏加载比较慢，怎么破，打包文件比较大

依次排除和确认：

减少第三方库的使用,比如jquey这些都可以不要了,很少操作 dom,而且原生基本满足开发
若是引入moment这些,webpack 排除国际化语言包
webpack 常规压缩js,css, 愿意折腾的还可以引入 dll 这些
路由组件采用懒加载
加入路由过渡和加载等待效果,虽然不能解决根本,但起码让人等的舒心一点不是么!!!

整体下来，打包之后一般不会太大。
但是倘若想要更快？那就只能采用服务端渲染(SSR)了，可以避免浏览器去解析模板和指令这些;直接返回一个 html …还能 SEO…

Vue SPA 没法做优化(SEO)!有解决方案么

可以的,SSR(服务端渲染就能满足你的需求),因为请求回来就是一个处理完毕的 html

现在 vue 的服务端开发框架有这么个比较流行,如下
传送门： Nuxt.js

原文链接

---------------------------(正文完)------------------------------------
一个前端的学习交流群，想进来面基的，可以点击这个logo，或者手动search群号：685486827

写在最后：约定优于配置-------软件开发的简约原则.
-------------------------------- (完)--------------------------------------

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…