Vue 踩坑指南

+ 单向数据流

• 错误提示

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value.

• 原理解释

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

• 避坑指南

1. 不使用 prop 传递参数， 改用父组件直接调用子组件方法

 	showModal() {
      this.$refs.anchorEditor.show();
    }

2. 官方说明

+ table should have a unique key or rowKey

使用 antdesign vue 中表格控件错误：

antdv: Each record in table should have a unique key prop,or set rowKey to an unique primary key。

	 :rowKey="record => record.id"

+ 重置 Select 组件选项

弹出组件，只包含一个 Select 组件，默认再次打开时，会显示上次选择的选项。。现在需要每次打开时恢复初始状态。改动如下：

1. 在 select 中将 value 与 数据项 selectedId 绑定

<a-select
      :placeholder="placeholder"
      :value="selectedId"
      ...
        <a-select-option :value="-1" :key="-1">
        请选择
      </a-select-option>

2. 设置数据项 selectedId 初始值为 -1

<script>
	export default {
	  data() {
	    return {
	      selectedId: -1,
	      ...

3. 在外部方法中重置 selectedId 为 -1 ，组件重置为第一项（“请选择”）

  methods: {
 	update() {
      this.selectedId = -1;
      ...

+ Select 组件显示值，而非选项名

因为 select 中的 value 是 string 类型， 但系统设置的 id 是 number 类型， 对应不上， 所以想要选中 value 的option， 就需要使用 toString() 将 id 转换成字符串。

+ 在vue中，使用setInterval()方法

在mounted（）函数里边使用setInterval()

  mounted() {
    this.initMap();
    setInterval(this.addRandomFeature, 1000);
    source.on("addfeature", function(e){
      console.log(e);
    });
  }

+ Vue 报 “this is undefined”

在定义的一些回调函数中使用 this 时会报这个错误。

  methods:{
	reset() {
      vectorSource.forEachFeature(
        function(f) {
          this.translate(f);
        }.bind(this)
      );
    },
    translate(f) {...}
    ...
 }

错误的原因:

普通函数的this是由动态作用域决定，它总指向于它的直接调用者

this 的指向具体可以分为以下四种情况：

1. this总是指向它的直接调用者， 例如 obj.func() ,那么 func() 里的this指的是 obj。
2. 在默认情况(非严格模式,未使用 ‘use strict’)，如果函数没有直接调用者，this 为window
3. 在严格模式下,如果函数没有直接调者，this 为 undefined
4. 使用 call,apply,bind 绑定的，this 指的是绑定的对象

有两种方法可以修正：

1. 箭头函数

箭头函数是没有自己的this，在它内部使用的this是由它定义的宿主对象决定。

	reset() {
      vectorSource.forEachFeature( f => {
        this.translate(f);
      });
    }

2. bind

使用 call,apply,bind 绑定的，this 指的是绑定的对象

	reset() {
      vectorSource.forEachFeature(
        function(f) {
          this.translate(f);
        }.bind(this)
      );
    },

格式化自动添加逗号

vscode 格式化单引号变双引号，自动添加逗号 问题