前端小知识点杂记

1、vue组件内的data为什么要用函数形式而不是直接使用对象形式？

因为直接写对象形式是引用数据类型，各个组件中都有data的话会互相影响，但是以函数形式返回出的对象，每次都是返回一个新对象，不会造成各组件间数据干扰。

2、弹性盒中文本溢出隐藏省略出现的问题

弹性盒模型中，文本的溢出隐藏（以省略号结尾）会出现问题，不能正常的截断文本，以省略号结尾。

3、vue中props参数的default为什么数组可以直接写空数组、对象需要在外部包裹括号

因为{}会直接被解读为一个函数，返回值是undefined，而不是空对象

arr: {
      type: Array,
      default: () => [],
},
obj: {
      type: Object,
      default: () => ({}),
},

4、vue的data中如果有参数过于复杂且实际上不需要vue监听参数的变化时优化

初始化时，vue会对data做getter、setter改造，在现代浏览器里，这个过程实际上挺快的，但仍然有优化空间。当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter，这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
此种问题场景可以是初始化了一个echarts等实例并保存放在vue数据中
优化方法：
① Object.freeze()
Vue 在遇到像 Object.freeze() 这样被设置为不可配置之后的对象属性时，不会为对象加上 setter getter 等数据劫持的方法
② 将参数提到export上方，这样vue就不会监听此对象

5、推荐一种监听生命周期的方法

this.$once

mounted() {
  window.addEventListener('scroll', this.fn)
  this.$once('hook:beforeDestroy', () => {
    window.removeEventListener('scroll', this.fn)
  })
}

6、ref数组问题

通过循环出来的ref取值时是个数组，但是直接写的重名ref取值时取的是最后一个出现的此名称ref元素

7、css设置文字溢出隐藏

// 多行溢出
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 最多展示几行
-webkit-box-orient: vertical;

// 单行溢出隐藏
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;