[JavaScript知识库]前端常识小积累

1. $event,方法占位符；e.preventDefault阻止默认行为；e.stopPropagation:阻止冒泡

2. 事件正常经历的阶段是事件捕获->事件冒泡（默认情况下事件冒泡的时候才处理事件）-给一个事件加上捕获模式，他在捕获阶段就触发事件。

3. wheel鼠标滚轮事件 scroll滚动条事件

4. 键盘事件 keydown keyup

5. Vue开发者工具，页面没用到，开发者工具现在是不更新的

6. 计算属性不能开启异步任务维护数据

7. 定时器的回调是js引擎调的，普通函数：this指的是window；箭头函数：没有自己this，往外找，找到vm实列

8. Math.floor(Math.random()*3)随机生成0、1、2

9. vue中template只能配合v-if ，不能配合v-show，v-show=false，不生效

10. 一个字符串是包含空字符的 往往第一个位置是0

11. vue注解可以通过//#region //#endregion 可以折起来

12. slice、filter、map、concat:返回一个新数组，reduce、join、这些都是有返回，不会改变原数组

13. push、unshift、pop、shift、splice、sort、revert:会修改原数组且在vue中会触发响应式。forEach可以修改原数组

14. sort(a,b=>a-b)升序，b-a降序；

15. arr.reduce(function(prev, cur, index, arr) {return prev + cur;}，0)

16. vue提供了个api set 可以维持响应式Vue.set(target,key,Value) ，vm.$set 一样， vue只能给data的某个属性追加属性，不能给data追加属性—响应式

17. vue；v-for循环的时候需要过滤，最好用计算属性，用数组的方法可能在一些小程序开发出现问题。比如字节、飞书

18. 验证一个元素是真实dom 可以用 console.dir||或者判断是否（a instanceof HtmlElement）

19. 指令命名多个单词的命名，kebab-case命名（user-name）、camelCase命名（userName）驼峰命名

20. vue中data必须写成函数？避免组件被复用时，数据存在引用关系。

21. props优先级高于data;mixins使用时，生命周期，混入优先级高，其他地方自身优先级高;Watch和 computed的优先级是watch慢

22. uuid是个全球通用的 不可能重复的id，简化版本nanoid (小很多)

23. 修改对象中的值（es6） var obj ={…a,…b} 重复的用后面的对象里面的数据，合并对象;解构赋值 {data:ret}=res 获取对象的data赋值给ret

24. 组件之间通信

    1.props

    父->子 props

    子->父 props 方法，调用父组件方法回调

    2.自定义事件 $emit

    3.全局事件总线

    4.消息订阅与发布（pubsub，例）

    5.依赖注入（provide和inject）

    6.vuex

    7.v-attrs

    8.缓存

    9.$parent和$children

    10.ref

25. 插槽，子向父传数据。父：scope=‘child’ 就可以用child.game;子： scope=“{game}“或者slot-scope=”{game}”

26. 脚手架main.js中会让导入都上升到最顶部

27. vue2中，vuex与vue-router用3版本，vue3用4版本

28. 路由守卫的执行顺序beforeRouteLeave->beforeEach->beforeEnter->beforeRouteEnter->afterEach

29. vue2中，vuex与vue-router用3版本，vue3用4版本

30. 绝对定位(absolute),将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位,原来的位置会被后面的内容占据。绝对定位的元素脱离文档流，margin属性值无效。相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。

31. 单例（Singleton）模式的定义：指一个类只有一个实例，且该类能自行创建这个实例的一种模式

    单例模式有 3 个特点：

    1. 单例类只有一个实例对象；
    2. 该单例对象必须由单例类自行创建；
    3. 单例类对外提供一个访问该单例的全局访问点；

32. vue配置了axios.defaults.baseURL；使用axios的时候，某个界面要写完整的地址。

    import axios from ‘axios’

    // 由于我们现在获取的地图矢量数据并不是后台数据, 所以咱们不能使用this.$http（main.js配置的，Vue.prototype.$http = axios）
    const ret = await axios.get(‘http://localhost:8999/static/map/china.json’)

33. 接口取消

1
export function getDocumentList(params,f) {
  return request({
    url: `/sale-project/project/project-document-list`,
    method: 'get',
    params,
    cancelToken:f
  })
}
2
cancelRequest() {
   if (typeof this.cancelFun === 'function') {
     this.cancelFun()
   }
 },


   this.cancelRequest();
   let params = this.ArrayToString(this.searchForm)
   getListMilestoneTaskFollow(params,new axios.CancelToken((c) => 			 {
     this.cancelFun = c
    }))