随手记

• Vue实例被keep-alive之后，即使跳转到其他页面，watch仍然生效。因此watch的范围最好仅限于该实例，如果监听状态管理中的数据，要注意watch可能带来的副作用。
  参考：vue使用keep-alive后是不是watch事件不会被销毁 - SegmentFault 思否

• Vue会在实例销毁时主动解绑上所绑定的事件与指令，但如果是通过addEventListener绑定的事件，需要在beforeDestroy中手动remove。定时器也是同理。

• Vue2中_和$开头的属性不会被Vue代理，即无法通过this访问。
  参考: API — Vue.js (vuejs.org)

• beforeRouteEnter中，next回调函数会在实例mounted之后才执行。因此，对于以下代码：

  data(){
    return {
      lastPage: 'origin'
    }
  },
  beforeRouteEnter(to, from ,next){
    next(vm => {
      vm.lastPage = 'changed'
    })
  },
  created(){
    if(this.lastPage === 'changed'){
      dosomething()
    }
  }
  

  dosomething()永远不会被执行到。因此如果想根据上级页面来源做出不同的行为，要么把相关逻辑都写到next回调函数里；要么引用外部变量或者使用vuex，在next执行前就改变需要修改的变量。

• Object.assign会合并值为null和undefined的属性。

  let a = { a: '1', b: '2' };
  let b = { a: null, b: undefined, c: '3' };
  let c= Object.assign({}, a, b)
  
  c
  // { a: null, b: undefined, c: '3' }
  

• 在class中定义的属性会挂载到类的原型上，如下图中Test的属性a等于Test.prototype.a，但是在new Test()的时候每个实例都会创建一个自己的a属性。因此test1.a !== Test.prototype.a，但是test1.__proto__.a === Test.prototype.a。另外，函数声明会被当作引用，new的时候不会重新创建。而函数表达式会被当做属性创建。在类中定义的static变量和方法会被定义在类本身上，不会出现在原型或者类的实例对象中，static方法中的this也指的是类本身。
  

• 部分支持Vue3的组件库
  移动端：

  1. Vant(Vue2 Vue3)
     Vant3、Vant4都支持Vue3。3、4的发布间隔特别短，Vant4主要添加了黑暗模式支持，目前4还在alpha测试。
  2. Varlet(Vue3)
     基于Material风格的Vue3组件库。
  3. NutUI(Vue2 Vue3)
     京东的组件库
  4. TDesign(Vue3)
     腾讯的组件库

  PC端：

  1. NaiveUI(Vue3)
     感觉还不错
  2. ElementPlus(Vue3)
     ElementUI
  3. antd(vue2 vue3)
     Ant Design
  4. TDesign(Vue2 Vue3)
     腾讯的

• 关于momentjs
  新项目建议不要使用momentjs。momentjs已经进入维护期（It is not dead, but it is indeed done.）momentjs官网推荐了几个替代方案，我感觉里面最合适的是dayjs。一个是体积大大减小，最低配只有2KB，额外功能可以按需引入（dayjs的plugin）。另外api也非常接近momentjs，切换成本很小。还有就是有完善的中文文档。
  参考：Moment.js | Docs (momentjs.com)

• Vite使用require
  vite中不支持使用require，如果想使用require需要安装额外包。但如果只是想用require引入commonJS包，可以直接使用es module写法（import xxx from 'xxx'），vite会在预构建打包阶段将cjs转为ejs。

• tsc
  tsc编译单个文件时，不支持指定tsconfig。但是使用tsc -p .编译整个项目时，会自动找项目中的tsconfig文件。另外typescript编译时不会自动转换别名(@之类的)，需要额外的包支持。

• Promise
  一直处于pending状态的Promise不会造成内存泄露，如同其他对象一样，当promise不被任何变量引用时将会被回收

• 闭包的创建时机
  函数闭包会在函数创建时就确定。函数 + 函数创建时的环境 = 闭包。JavaScript 闭包

• 对display: none的元素使用getComputedStyle时，会显示原始css值。比如

width: fit-content;
display: none;

获取宽度时会显示fit-content。去掉display: none则会正常显示宽度值。