开发问题随笔

1、子组件修改父组件数据

不允许子组件直接改变父组件的数据，但是往往项目需求需要改变父组件的数据，那我们如何变通呢？

如果不想影响父组件的值，我们也可以用JSON颠倒转换的方式，在mounted方法中进行深拷贝，在data中初始化数据时用另一个变量作为承载，这样才承载变量改变，就不会影响父组件该变量的值了。

2、字体在一行显示不换行

.text-oneLine {
  display: block; /*内联对象需加*/

  word-break: keep-all; /* 不换行 */

  white-space: nowrap; /* 不换行 */

  overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */

  text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

3、attribute 是元素标签的属性，property 是元素对象的属性

4、深拷贝原始数据对象

JSON.parse(JSON.stringify(...))

5、关于生命周期钩子

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文。

6、Vue中keep-alive的使用及详解

7、Vue .sync修饰符

代码简化：子组件内触发的事件名称以“update:myPropName”命名，父组件v-bind:value 加上.sync修饰符，即 v-bind:value.sync（父组件就不用再手动绑定@update:value事件）

关于 v-model双向绑定：一个组件上只能定义一个v-model，但如果有其他属性也要提供双向绑定，就需要.sync

注意点：

• 如果一个组件的多个prop都要实现双向绑定， 则这么写 v-bind.sync = "对象"
• .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)
• 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，

8、关于VUE生命周期

文章一

如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null

双向绑定数据时，视图会进行重渲染。只有当实例被创建时，data中存在的属性才是响应式的

9、解构赋值问题

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

函数参数的解构也可以使用默认值

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

上面代码中，函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。

注意，下面的写法会得到不一样的结果。

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。

undefined就会触发函数参数的默认值

10、标签模板

重要应用：

• 过滤 HTML 字符串，防止用户输入恶意内容。
• 多语言转换（国际化处理）。

11、循环可以用递归代替，而一旦使用递归，就最好使用尾递归。

12、对象属性存取

点语法

中括号（可以通过变量访问属性）

let person = {
    "name": 'huohuo'
}

person.name; // huohuo

let person = {
    "name": 'huohuo',
    age: '16'
}

person['name']; // huohuo
person[age]; // 16