vue项目常见问题总结

时间 2019-11-10

标签 vue 项目常见问题总结繁體版

原文原文链接

vue中为何使用key?
若是不使用 key，Vue 会使用一种最大限度减小动态元素而且尽量的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化从新排列元素顺序，而且会移除 key 不存在的元素。css

vue项目中websocket的使用。前端

一、定义websocket.js文件，使用install注册组件,代码结构以下：

export default {
    install(Vue) {
        Vue.prototype.websocket = null;
        var timerDate = null;
        // 创建链接的方法
        Vue.prototype.create_websocket = function(obj) {
         this.websocket.onerror = function() {}
         this.websocket.onmessage = function() {}
         this.websocket.onopen = function() {}
         this.websocket.onclose = function() {}
        }
    }
}
websocket的readStatus状态有 0,1，2,3

二、在main.js中引入并挂载到Vue上
import socket from "./utils/websocket"
Vue.use(socket)

3.vue项目中form表单组件的封装vue

4.vue项目中table组件的封装react

5.vue项目中form表单的disabled属性
使用场景：表单初始化时为disabled禁止修改状态，当点击修改按钮的时候，表单为可编辑状态。能够经过对form表单的es6

6.vant-circle的使用中遇到的问题web

7.vue项目中字体图标库 fontawsome的使用算法

一、npm安装font-awesome: cnpm install font-awesome --save
二、在main.js中引入：import 'font-awesome/css/font-awesome.min.css'
三、在页面中使用：<i class="fa fa-align-justify"></i>

8.refvuex

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子组件上，引用就指向组件实例：

9.setTimeout、Promise、Async/Await 的区别npm

1. setTimeout
console.log('script start')    //1. 打印 script start
setTimeout(function(){
    console.log('settimeout')    // 4. 打印 settimeout
})    // 2. 调用 setTimeout 函数，并定义其完成后执行的回调函数
console.log('script end')    //3. 打印 script start
// 输出顺序：script start->script end->settimeout
2. Promise
Promise自己是同步的当即执行函数， 当在executor中执行resolve或者reject的时候, 此时是异步操做， 会先执行then/catch等，当主栈完成后，才会去调用resolve/reject中存放的方法执行，打印p的时候，是打印的返回结果，一个Promise实例。

console.log('script start')
let promise1 = new Promise(function (resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {
    console.log('promise2')
})
setTimeout(function(){
    console.log('settimeout')
})
console.log('script end')
// 输出顺序: script start->promise1->promise1 end->script end->promise2->settimeout
当JS主线程执行到Promise对象时，

promise1.then() 的回调就是一个 task

promise1 是 resolved或rejected: 那这个 task 就会放入当前事件循环回合的 microtask queue

promise1 是 pending: 这个 task 就会放入 事件循环的将来的某个(可能下一个)回合的 microtask queue 中

setTimeout 的回调也是个 task ，它会被放入 macrotask queue 即便是 0ms 的状况

3. async/await
async function async1(){
   console.log('async1 start');
    await async2();
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}

console.log('script start');
async1();
console.log('script end')

// 输出顺序：script start->async1 start->async2->script end->async1 end
async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操做完成，再执行函数体内后面的语句。能够理解为，是让出了线程，跳出了 async 函数体。

举个例子：

async function func1() {
    return 1
}

console.log(func1())
在这里插入图片描述
很显然，func1的运行结果其实就是一个Promise对象。所以咱们也可使用then来处理后续逻辑。

func1().then(res => {
    console.log(res);  // 30
})
await的含义为等待，也就是 async 函数须要等待await后的函数执行完成而且有了返回结果（Promise对象）以后，才能继续执行下面的代码。await经过返回一个Promise对象来实现同步的效果。

10.前端中的模块化开发json

答案：模块化的好处就是，抽离代码，重复使用。

模块化和组件化的区别与联系：
组件是具体的：按照一些小功能的通用性和可复用性来抽象组件。
组件化更多的关注UI部分，好比用户看到的弹出框，页脚，确认按钮等，这些组件能够组合成新的组件，又能够和其余组件组合组合成新的组件

模块是抽象的：按照项目业务划分的大模块
模块化侧重于数据的封装，一组相关的组件定义成一个模块，一个json对象能够是一个模块。
封装以后须要解决的就是模块之间的依赖，babel是目前比较火的es6转换器，

11.Promise 构造函数是同步执行仍是异步执行，那么 then 方法呢？

答案：一、promise函数是同步执行的，.then方法是异步执行的。
二、模块化的规范，有 CMD 和 AMD
三、CMD (Common Module Definition), 是sea.js在推广过程当中对模块定义的规范化产出，主要用于浏览器端。它主要特色是：*对于依赖的模块是延迟执行，依赖能够就近书写，等到须要用这个依赖的时候再引入这个依赖，应用有sea.js.*
   AMD规范（Asynchronous Module Definition）：是 RequireJS 在推广过程当中对模块定义的规范化产出，也是主要用于浏览器端。其特色是：**依赖前置，须要在定义时就写好须要的依赖，提早执行依赖，应用有require.js**

12.vue兼容IE浏览器：

npm下载babel-polyfill模块：cnpm install babel-polyfill --save
在main.js中引入 require("babel-polyfill");

13.编码规范

变量在使用前必定要判断是否存在
不能滥用if和for循环
对于一些普通的if判断尽量使用双目运算符，减小代码量
代码斜体文字发布时不能随便在编码中输出console或alert
对于数据的处理能够借助第三方插件，如underscore或者lodash
尽量的提取公共的代码，组件化编码，提升代码的复用率及便于后期的进行问题的定位

14.cookie 和 token 都存放在 header 中，为何不会劫持 token？

cookie：登录后后端生成一个sessionid放在cookie中返回给客户端，而且服务端一直记录着这个sessionid，客户端之后每次请求都会带上这个sessionid，服务端经过这个sessionid来验证身份之类的操做。因此别人拿到了cookie拿到了sessionid后，就能够彻底替代你。

token：登录后后端不返回一个token给客户端，客户端将这个token存储起来，而后每次客户端请求都须要开发者手动将token放在header中带过去，服务端每次只须要对这个token进行验证就能使用token中的信息来进行下一步操做了。

xss：（跨站脚本攻击）用户经过各类方式将恶意代码注入到其余用户的页面中。就能够经过脚本获取信息，发起请求，之类的操做。

csrf：（跨站请求攻击），简单地说，是攻击者经过一些技术手段欺骗用户的浏览器去访问一个本身曾经认证过的网站并运行一些操做（如发邮件，发消息，甚至财产操做如转帐和购买商品）。因为浏览器曾经认证过，因此被访问的网站会认为是真正的用户操做而去运行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求自己是用户自愿发出的。csrf并不可以拿到用户的任何信息，它只是欺骗用户浏览器，让其以用户的名义进行操做。

csrf例子：假如一家银行用以运行转帐操做的URL地址以下： http://www.examplebank.com/withdraw?account=AccoutName&amount=1000&for=PayeeName
那么，一个恶意攻击者能够在另外一个网站上放置以下代码： <img src="<http://www.examplebank.com/withdraw?account=Alice&amount=1000&for=Badman>">
若是有帐户名为Alice的用户访问了恶意站点，而她以前刚访问过银行不久，登陆信息还没有过时，那么她就会损失1000资金。

上面的两种攻击方式，若是被xss攻击了，无论是token仍是cookie，都能被拿到，因此对于xss攻击来讲，cookie和token没有什么区别。可是对于csrf来讲就有区别了。

以上面的csrf攻击为例：

cookie：用户点击了连接，cookie未失效，致使发起请求后后端觉得是用户正常操做，因而进行扣款操做。
token：用户点击连接，因为浏览器不会自动带上token，因此即便发了请求，后端的token验证不会经过，因此不会进行扣款操做。
这是我的理解的为何只劫持cookie不劫持token的缘由。

15.冒泡排序如何实现，时间复杂度是多少，还能够如何改进？

16.箭头函数与普通函数（function）的区别是什么？构造函数（function）可使用 new 生成实例，那么箭头函数能够吗？为何？

17.a.b.c.d 和 a'b'['d']，哪一个性能更高？

18.在 Vue 中，子组件为什么不能够修改父组件传递的 Prop，若是修改了，Vue 是如何监控到属性的修改并给出警告的。

子组件为什么不能够修改父组件传递的 Prop
单向数据流，易于监测数据的流动，出现了错误能够更加迅速的定位到错误发生的位置。
若是修改了，Vue 是如何监控到属性的修改并给出警告的。

19.介绍http握手过程

客户端使用https的url访问web服务器,要求与服务器创建ssl链接
web服务器收到客户端请求后, 会将网站的证书(包含公钥)传送一份给客户端
客户端收到网站证书后会检查证书的颁发机构以及过时时间, 若是没有问题就随机产生一个秘钥
客户端利用公钥将会话秘钥加密, 并传送给服务端, 服务端利用本身的私钥解密出会话秘钥
以后服务器与客户端使用秘钥加密传输

ssl. 加密套接字协议层（一种加密的通信协定，用在使用者与网服器之间，Security Socket Layer）

20.双向绑定和 vuex 是否冲突?

在严格模式中使用Vuex，当用户输入时，v-model会试图直接修改属性值，但这个修改不是在mutation中修改的，因此会抛出一个错误。当须要在组件中使用vuex中的state时，有2种解决方案：
一、在input中绑定value(vuex中的state)，而后监听input的change或者input事件，在事件回调中调用mutation修改state的值
二、使用带有setter的双向绑定计算属性。见如下例子（来自官方文档）：
<input v-model="message">
computed: { message: { get () { return this.$store.state.obj.message }, set (value) { this.$store.commit('updateMessage', value) } } }

21.如何把一个字符串的大小写取反（大写变小写小写变大写），例如 ’AbC' 变成 'aBc'

function toString (s) {
var arr = s.split('');
var new_arr = arr.map((item) => {
    return item === item.toUpperCase() ? item.toLowerCase() : item.toUpperCase();
});
return new_arr.join('');
}
console.log(processString('AbC'));

22.如何让一个div水平垂直居中

23.冒泡排序如何实现，时间复杂度是多少，还能够如何改进？

24.react-router 里的 <Link> 标签和标签有什么区别?

Link 的本质也是a 标签。只不过在Link 中禁用了 a 标签的默认事件，改用了history对象提供的方法进行跳转。

25.数组里面有10万个数据，取第一个元素和第10万个元素的时间相差多少

数组能够直接根据索引取的对应的元素，因此无论取哪一个位置的元素的时间复杂度都是 O(1)

得出结论：消耗时间几乎一致，差别能够忽略不计

26.a.b.c.d 和 a'b'['d']，哪一个性能更高？

应该是 a.b.c.d 比 a['b']['c']['d'] 性能高点，后者还要考虑 [ ] 中是变量的状况，再者，从两种形式的结    构来看，显然编译器解析前者要比后者容易些，天然也就快一点。

27.箭头函数与普通函数（function）的区别是什么？构造函数（function）可使用 new 生成实例，那么箭头函数能够吗？为何？

箭头函数是普通函数的简写，能够更优雅的定义一个函数，和普通函数相比，有如下几点差别：

一、函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

二、不可使用 arguments 对象，该对象在函数体内不存在。若是要用，能够用 rest 参数代替。

三、不可使用 yield 命令，所以箭头函数不能用做 Generator 函数。

四、不可使用 new 命令，由于：

没有本身的 this，没法调用 call，apply。
没有 prototype 属性 ，而 new 命令在执行时须要将构造函数的 prototype 赋值给新的对象的 __proto__
new 过程大体是这样的：

function newFunc(father, ...rest) {
  var result = {};
  result.__proto__ = father.prototype;
  var result2 = father.apply(result, rest);
  if (
    (typeof result2 === 'object' || typeof result2 === 'function') &&
    result2 !== null
  ) {
    return result2;
  }
  return result;
}


区别：
1.箭头函数没有本身的this属性、arguments属性、而普通函数有，箭头函数的this指向当前函数做用域的this。
new：
2.箭头函数没有prototype显示原型，因此不能做为构造函数。

箭头函数带来的好处：

没有箭头函数的时候，函数闭包 var that = this 的事没少干，有了箭头函数，就不须要这么写了。
极简语法，函数式风格，写一时爽一时，一直写一直爽！

一、组件刷新

实现方式1：借助vue组件path地址butong,参数不一样时，自动刷新的能力，想要刷新当前组件，只须要执行方法:`
```
refresh() {
 this.$router.replace({
   path: "/aboutus/index",
   query: {
     t: Date.now()
   }
 });
},`
```
实现方法2：借助中间组件，先跳转到中间组件而后在中间组建中设置当即跳转回来，用户看到的效果就相似于刷新了当前页面。

二、组件内使用高德地图，组件内数据更新后，更新高德地图上点的位置和显示内容

三、vue项目中使用高德地图

一、注册key值，
二、引入高德地图相关js

四、slot在父子组件中的使用

五、关于this的指向问题

六、微信公众号中，使用微信地图接口显示当前位置

注意配置的经纬度字段值类型必须为number类型，不能为string类型，不然点击地图，将没法调取微信地图页面，也不会报错。

七、父子路由的配置，子级path自动补全父级path

八、method 不能使用箭头函数，method 中方法使用定时器须要使用箭头函数

methods: {
  goPage: function (index) {
    this.newPage = index
  },
  inv: function () {
    this.invt = setInterval(() => {
      this.goPage(this.nextPage)
      console.log(this)
      //此时的this指向是该vue组件，无论在哪使用，指向都是该vue组件
    }, 1000)
  }
}

做者：小生方勤
连接：https://juejin.im/post/5d1a15fc6fb9a07eca6993c3
来源：掘金
著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。

普通函数中，setInterval() 与 setTimeout() 是 window 对象的函数，因此 this 会指向 window

九、el_table表格嵌套时，嵌套表格样式错乱，问题定位发现：当page变为2时，页面不只显示第2页的数据，第一页的数据仍然存在。

十、Vue子组件调用父组件的方法

第一种方法是直接在子组件中经过this.$parent.event来调用父组件的方法
第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就好了。

十一、vue中的 ref 是什么？

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子组件上，引用就指向组件实例。

十二、$route和$router的区别？

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。

$router是'路由实例'对象包括了路由的跳转方法，钩子函数等。

1三、input 设置placeholder,注意：一、el-input设置placeholder可能失效，要对input元素进行设置。二、-webkit-input-placeholder属性前面要加上input及父级class类名。

.placeholder_box input::-webkit-input-placeholder {
  color: #ccc !important;
  z-index: 100000 !important;
  font-size: 14px !important;
}
.placeholder_box input::-moz-placeholder {
  color: #ccc !important;
  z-index: 100000 !important;
  font-size: 14px !important;
}
.placeholder_box input:-ms-input-placeholder {
  color: #ccc !important;
  z-index: 100000 !important;
  font-size: 14px !important;
}

.white_placeholder input::-webkit-input-placeholder {
  color: #fff !important;
  z-index: 100000 !important;
  font-size: 12px !important;
}
.white_placeholder input::-moz-placeholder {
  color: #fff !important;
  z-index: 100000 !important;
  font-size: 12px !important;
}
.white_placeholder input:-ms-input-placeholder {
  color: #fff !important;
  z-index: 100000 !important;
  font-size: 12px !important;
}

1四、wx端代码修改的时候，不一样的公众号须要修改的地方有如下几点：

要修改，微信自定义分享时设置的appid，
相关接口的修改，如：将www.shengdongyushang.com修改成：yxzj.saiyunxi.com
相关图片的修改，如：主界面：分享图片及title及描述文字的修改。
注意：必定要注意appid的修改，不然会出现 redirect_url错误。。。重要的事情要记住。。。

1五、element的select选中可能页面显示的值不会变，但其实获取到的传给后台的值已经变化。遇到此问题，修改方式有两种：

1. this

1六、关于百度富文本上传图片和视频，显示失效问题：由于：后台返回的地址里面缺乏http:// 全部形成无效源问题。解决方法：后台修改返回地址。其实前台不用修改相关上传viedo代码，而我改为了 <embed>标签

发现没有http://仍是不能显示视频，因此前台改不改ueditor相关配置文件都无所谓。额鹅鹅鹅，本身改了半天其实和不改同样同样的，心累。。。。。。。。。