前端学习 - Vue

1.如何判断数据是否受Vue管理，数据（对象，数组，字符串等）能否响应式更新？

• 即查看数据是否有对应get/set方法，数组没有对应get/set方法，故操作数组要通过其封装好的变更方法

2.数组更新检测原理

变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

• push() - 向数组的末尾添加一个或多个元素，并返回新的长度。
• pop() - 删除并返回数组的最后一个元素。
• shift() - 把数组的第一个元素从其中删除，并返回第一个元素的值。
• unshift() - 向数组的开头添加一个或更多元素，并返回新的长度。
• splice() - 向 / 从数组中添加 / 删除项目，然后返回被删除的项目。
• sort() - 对数组的元素进行排序。
• reverse() - 反转数组中元素的顺序。

非变更方法，替换数组

变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如

• filter() -创建一个新的数组，过滤指定元素
• concat() - 连接两个或多个数组。
• slice() - 从已有的数组中返回选定的元素。

它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

其他

• split() - 把一个字符串分割成字符串数组（返回一个数组）。

新增新属性

• Vue.set( target, propertyName/index, value )
• vm.$set( target, propertyName/index, value )
  注意：两者不能给vm（vm实例）或vm的跟数据对象（vm._data） 添加属性

问题1：使用el-table，el-table-column 时使用show-overflow-tooltip可以使用但控制台报红

Invalid prop: type check failed for prop “showOverflowTooltip”. Expected Boolean, got String with value “true”.

      <el-table-column prop="terms" :label="$t('table.terms')" show-overflow-tooltip="true" width="180">
      </el-table-column>

翻译
无效道具：道具“showOverflowTooltip”的类型检查失败。应为布尔值，得到的字符串值为“true”。
根据问题修改为boolean值:true后依然不行

      <el-table-column prop="terms" :label="$t('table.terms')" show-overflow-tooltip=true width="180">
      </el-table-column>

解决

      <el-table-column prop="terms" :label="$t('table.terms')" :show-overflow-tooltip="true" width="180">
      </el-table-column>

在show-overflow-tooltip前面加上 冒号 ：即可

问题2- 使用elementui el-table的:show-overflow-tooltip="true"属性时，当单元格数据过多时，鼠标划过时显示全部数据，此时数据会先占满一行且溢出页面，很不美观，需要修改其宽度。

新增css文件

.el-tooltip__popper {
    max-width: 500px;
}

导入文件

效果

3 vscode拉取git代码到本地提示 在签出前,请清理存储库工作树

原因就是因为本地代码和git远程库代码存在冲突，也就是你改的文件，别人也做了修改，并且别人先于你提交了，当你再去拉取时就会发现如上提示，导致拉取失败。
解决：就是将本地变更的代码暂存起来，那么本地的代码就是没有更改的，此时就可以拉取远程仓库最新的代码了，拉取完成后再把本地的代码放出来即可。

操作

# 储藏
git stash  把当前未提交的修改暂存起来，让仓库还原到最后一次提交的状态。
# 拉取
git pull  拉取远程仓库的代码，让你现在的代码和远程仓库一致
# 弹出储藏
git stash pop  放开暂存，恢复当前未提交的修改，比对代码，准备合并

3 国际化的三种页面书写方式

1	this.$i18n.t('message.delTipMessage')
2	:label="$t('form.couponName')"
3	<span>{{ $t('menu.coupon') }}</span>

4 拿到row之后对其修改的同时会影响table列表原数据的展示

问题描述：当我们在form表单中输入数据时（input输入框），即使没有保存而是直接关闭Modal的时候，table列表中的数据发生了改变，除非刷新页面，否则将展示错误数据。
解决方法：复制一份row

• 错误做法：因为row传过来的，可以看作是java的对象（Object），即引用地址

	this.updateForm = row

• 正确做法：

	this.updateForm = Object.assign({}, row)

这个时候对updateForm 的修改就不会影响到row即table原数据