vue项目常见问题总结

1. vue中为什么使用key?

   如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

2. vue项目中websocket的使用。

   1、定义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
   
   2、在main.js中引入并挂载到Vue上
   import socket from "./utils/websocket"
   Vue.use(socket)

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

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

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

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

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

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

8.ref

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

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

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.前端中的模块化开发

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

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

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

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

答案：1、promise函数是同步执行的，.then方法是异步执行的。
2、模块化的规范，有 CMD 和 AMD
3、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种解决方案：
1、在input中绑定value(vuex中的state)，然后监听input的change或者input事件，在事件回调中调用mutation修改state的值
2、使用带有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 生成实例，那么箭头函数可以吗？为什么？

箭头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，有以下几点差异：

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

2、不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

3、不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

4、不可以使用 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、组件刷新

• 实现方式1：借助vue组件path地址butong,参数不同时，自动刷新的能力，想要刷新当前组件，只需要执行方法:`

   refresh() {
   this.$router.replace({
     path: "/aboutus/index",
     query: {
       t: Date.now()
     }
   });
  },`
  

• 实现方法2：借助中间组件，先跳转到中间组件然后在中间组建中设置立即跳转回来，用户看到的效果就类似于刷新了当前页面。

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

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

• 1、注册key值，
• 2、引入高德地图相关js

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

5、关于this的指向问题

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

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

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

8、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

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

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

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

11、vue中的 ref 是什么？

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

12、$route和$router的区别？

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

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

13、input 设置placeholder,注意：1、el-input设置placeholder可能失效，要对input元素进行设置。2、-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;
}

14、wx端代码修改的时候，不同的公众号需要修改的地方有以下几点：

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

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

1. this

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

发现没有http://还是不能显示视频，所以前台改不改ueditor相关配置文件都无所谓。 额鹅鹅鹅 ，自己改了半天其实和不改一样一样的，心累。。。。。。。。。