前端杂项记录

JS函数的几种写法

// 1
function demo1(x,y){
  return x + y
}
console.log(demo1(2,3))

// 2
let demo1 = function (x,y){
  return x + y
}
console.log(demo1(2,2))

// 3
(function(){
  console.log('hello')
})();

// 4
let demo = x => console.log(x)
demo(20)

// 5
let cat = {
  name:"miaomiao",
  eat(food){					// eat 的值 是一个 匿名函数
      console.log("吃"+food)
  }
}
cat.eat("🐟");

es6对象的计算属性名

Computed property names（计算属性名）
The object initializer syntax also supports computed property names. That allows you to put an expression in brackets [], that will be computed and used as the property name.

let lastWord = 'last word'
let a = {
  'first word': 'hello',
  [lastWord]: 'world'
}

a['first word'] 	// "hello"
a[lastWord] 		// "world"
a['last word'] 		// "world"


// 表达式还可以用于定义方法名
let obj = {
  ['h' + 'ello'](){
    return 'hi'
  }
}
obj.hello() 	// hi
obj['hello']()	// hi

对象初始化语法计算属性名
es6属性名表达式

const是否可以修改

Array和Object都是引用类型,当用const声明数组和对象时,const声明的常量保存的仅仅是目标的指针.
- 数组和对象的指针不能改变
- 修改其中的值是可以的

const arr = [1,2,3,4,5]
arr[0] = 2			// 合法
arr.push(6)			// 合法
console.log(arr)	// [2,2,3,4,5,6]
arr = [1,2,3]		// 错误

const obj = {name:'frank', age=18}
obj.age = 19 		// 合法
obj.weight = 100	// 合法
console.log(obj)	// {name:'frank',age=19,weight=100}
obj = {name:'lisa'}	// 错误

父组件传值给子组件，数据更新，子组件视图不更新

解决办法：
1.在父组件中，给子组件添加v-if属性

<Button v-if="refresh" :data='data' />

2.监听data，当data发生变化时，重新渲染子组件

export default {
	data(){
		data: [],
		refresh: true
	},
	watch:{
		data(){
			this.refresh = false;
			this.$nextTick(() => {
		        // 重新渲染组件
		    	this.refresh = true;
		    });
		}
	}
}

这个方法会强制删除旧组件并创建新组件。
第二种方法：

// 如果key保持不变, 则不会更改组件.
// 但当key发生更改时, vue会删除旧组件并创建新组件, 它将重新初始化自身并"重置"其状态.
<template>
  <component-to-re-render :key="componentKey" />
</template>

export default {
  data() {
    return {
      componentKey: 0
    }
  },
  methods: {
    forceRerender() {
      this.componentKey += 1
    }
  }
}

强制刷新子组件重新渲染
antdv中form表单中使用自定义组件

<a-form-item label="省市区选择" has-feedback>
  <cascaderProvince
    v-decorator="['city', {
      rules: [{ type: 'array', required: true, message: '请选择所在省市区!' }],
      initialValue: modal.defaultProvince
    }]"
    @myevent="setCityData"							<!-- 接收子组件传的值 -->
    :defaultProvince="modal.defaultProvince"		<!-- 给子组件传值 -->
  >
  </cascaderProvince>
</a-form-item>

setCityData (data) {
  this.form.setFieldsValue({
    city: data					<!-- 为表单元素赋值 -->
  })
}

AntDesignVue的省市区级联选择组件

JSON.parse("[12,'sgd']")		// error
JSON.parse('[12,"sfg"]')		// ok, 会得到一个数组
JSON.stringify(values.city), 	// 将数组序列化为字符串

moment格式化UTC时间

// 原格式: "2022-09-08T16:09:35.605Z"

let crt = _this.search.createTime
if (crt !== null) {
  crt = moment(_this.search.createTime).format('YYYY-MM-DD HH:mm:ss')
}

// 格式化后: 2022-09-08 00:11:24

js对象

      headers: {
        'X-Requested-With': null
      }
      // 带中横线的键名,需要包裹上引号, 不然报错

antdv: Each record in table should have a unique key prop
路由传参
v-decorator的取值与赋值
Ant Design分步表单传参问题