前端项目小结及概念梳理

一、Element相关问题

1、Element的下拉框

如果要下拉框显示默认选中值，则对v-model绑定的值写入默认值，即初始值。

2、Element的输入框

问题：
输入框输入一个字符就失焦。

原因：
包裹小组件的父组件循环时的key值是随机改变的。当修改了input数据时，:key的数据也跟着变了，因此页面key所在的元素进行重新渲染，因此焦点会消失。

解决：
更改key绑定的值。

3、 Element的弹窗

使用弹窗组件时报错：
TypeError: _this3.$message is not a function

原因：
在js文件里找不到this.$message这个属性。

错误的写法：

this.$message({
      message: "解除成功",
      type: "success"
    });

解决方法（正确写法）：
单独引入，和换一种方法使用：

//引入
import { Message } from "element-ui";

//使用
    Message({
          message: "解除成功",
          type: "success"
        });

二、created、mounted区别

created钩子函数:
是在实例创建完成后立即调用。这话的意思我觉得重点在于说挂载阶段还没开始，什么叫还没开始挂载，也就是说，模板还没有被渲染成html，也就是这时候通过id什么的去查找页面元素是找不到的。下面看下实例来证明。一般creadted钩子函数主要是用来初始化数据。

mounted钩子函数:
一般是用来向后端发起请求拿到数据以后做一些业务处理。这意思是该钩子函数是在挂载完成以后也就是模板渲染完成以后才会被调用。因此，Dom操作一般是在mounted钩子函数中进行的

三、computed、methods与watch

三者区别：Vue中 computed、methods和watch的区别

梳理：

【computed与methods】

computed是计算属性，methods是方法，都可以实现对 data 中的数据加工后再输出。

不同的是 computed 计算属性是基于它们的依赖进行缓存的。计算属性 computed 只有在它的相关依赖发生改变时才会重新求值。这就意味着只要data 中的数据 message 还没有发生改变，多次访问 reversedMessage（对message 进行加工的处理函数） 计算属性会立即返回之前的计算结果，而不必再次执行函数。而对于method ，只要发生重新渲染，method 调用总会执行该函数。

当有一个性能开销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A ，这时候，我们就需要缓存。也就是使用 computed 而不是 methods。但对于每次都需要进行重新计算的属性比如下面这个函数的返回值 function () { return Date.now() } ，我们最好使用 methods。

总之：数据量大，需要缓存的时候用 computed ；每次确实需要重新加载，不需要缓存时用 methods 。

注意：
虽然computed中是以函数定义，但是使用时不要在后面加（），这里它是一个计算属性，本质是一个属性。

【computed与watch】

computed 是计算属性，类似于过滤器，对绑定到视图的数据进行处理，并监听变化进而执行对应的方法。计算属性是基于他们的依赖进行缓存的。只有在相关依赖发生改变时，它们才会重新求值。

watch 是一个侦听的动作，用来观察和响应 vue 实例上的数据变动。

异同：它们都是 vue 对监听器的实现，只不过 computed 主要用于对同步数据的处理，watch 则主要用于观测某个值的变化去完成一段开销较大的复杂业务逻辑。能用 computed 的时候先用 computed，避免了多个数据影响其中某个数据时多次调用 watch 的情况。

运用场景：当我们需要进行数值计算时，并且依赖于其他数据时，应该使用computed；当我们需要在数据变化时执行异步或者开销较大的操作时，应该使用watch。

四、强制刷新的四种方法

1、key（最推荐）

通过 key 属性来进行刷新操作，在 web 中的效果是最理想的，因为页面根本感觉不到组件的销毁与创建过程，但是确实满足了组件的刷新功能。

操作方式：在 data 中定义某个变量，然后将该变量放置在组件的 key 属性中，要实现该组件刷新时，只需改变变量的值即可。

2、this.$forceUpdate()

this.$forceupdate() 迫使 vue 组件重新渲染，实际上指的是强制重启 render 函数。

即调用该方法后，只会触发 beforeUpdate、updated 这两个生命周期，而且只会影响当前组件以及其插槽内容。

3、v-if

v-if 通过变量控制的形式，可以触发被控制的组件 beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed 这6个生命周期，

但是由于 v-if 指令的原因，会导致其控制的内容会发生显示与隐藏操作。

4、刷新路由

this.$router.go(0)

五、项目所遇问题小结

1、如何调用后端接口

2、v-for和v-if一起使用的问题

v-for 的优先级是高于 v-if 的，如果两者同时使用，那么 v-if 会在每一个v-for循环渲染出来的项上作用，造成性能上的浪费。

可以用computed返回过滤函数所需要v-if。

3、js判断一个字符串是否以某个子字符串开头

思路：
用 indexOf()，indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

stringObject.indexOf(searchvalue,fromindex)

searchvalue 必需。规定需检索的字符串值。
fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1，如省略该参数，则将从字符串的首字符开始检索。

例子：

let str2 = str1.indexOf("abc")
if(str2 === 0){表示str2是以abc开头}
if(str2 === -1){表示str2不是以abc开头}

4、跳转外部链接

不新开窗口：

window.location.href(你的外部链接地址);

新开窗口：

window.open('你的外部链接地址', '_blank');

5、webstorm代码未保存

问题：
代码未 commit 和 push。
切换分支时，取消解决冲突，误点了回滚，导致所有代码消失。

解决：
按ctrl+z从磁盘加载，然后项目右键 local history 的 show。进行恢复。

6、常出现的错误状态码

100~199：代表请求已被接受，需要继续处理。
200：成功。
301：永久重定向。
302：临时重定向。
304：未移动，可以继续使用。
400：错误请求，务器不理解请求的语法。
401：未授权，没有权限，请求要求身份验证。
403：服务器拒绝请求。
404：请求资源找不到，一般是请求地址错误。
500：服务器错误。