前端知识点部分总节

66 阅读4分钟

1. vue创建背景****


2. 库存****

3. Vuex****

vuex是一个专门为vue.js应用程序开发得状态管理模式,vuex存放得状态是响应式的,更改状态只有唯一的途径显示的提交(commit)触发mutation更改state

如何调用:

1. main里面全局注册

2. this.$store.state.文件名.变量

3.  this.$store.commit("collapseMenu");;

4. Vue3 里面先

import { useStore } from 'vuex'

let store = useStore()

   store.commit('user/M_name', "000")

    console.log(store.state.name);

 

4.  $bus****

关于$bus 我们把它叫做事件总线,它Vuex很像,但是它不是用来管理状态的,是管理事件总线的。****

5.  $nextick****

this.nextTick()将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。它跟全局方法Vue.nextTick一样,不同的是回调的this自动绑定到调用它的实例上。假设我们更改了某个dom元素内部的文本,而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的,也就好比我们将打印输出的代码放在setTimeout(fn,0)中;可以根据打印的顺序看到,在created()钩子函数执行的时候DOM其实并未进行任何渲染,而此时进行DOM操作并无作用,而在created()里使用this.nextTick ()**将回调延迟到下次 DOM 更新循环之后执行**。 在修改数据之后立即使用它,然后等待 DOM 更新。 它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。 假设我们更改了某个dom元素内部的文本,而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的,也就好比我们将打印输出的代码放在setTimeout (fn, 0)中; 可以根据打印的顺序看到,在created ()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作并无作用,而在created ()里使用this.nextTick ()可以等待dom生成以后再来获取dom对象****

6. 组件类型****

复合组件 ****扩展组件 自定义组件

7. Keepalive****

keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在v页面渲染完毕后不会被渲染成一个DOM元素****

8. Delete**** 删除对象数组

9. 0.1+0.2等于多少****

0.30000000000000004  js里面所有计算都是2进制的  需要把10进制转2进制  会数据失去精度

10. 环境变量****

Vue-cli环境变量的作用****

根据不同运行模式切换定义的数据****

.env.dev:当以dev模式启动的时候,环境变量值就是.env.dev内定义的值****

11. 生命周期(父子组件生命周期顺序) 小程序生命周期****

父级创建前

 父级创建后

 父级载入前

 创建前

创建后

载入前

 载入后

  onLoad(options) {

    console.log('1. onLoad: 页面加载立即触发,最早执行的钩子')

  },

  onShow(){

    console.log('2. onShow: 页面显示 -- 每次显示都会触发')

  },

  onReady(){

    console.log('3. onReady: 页面初次DOM加载完成 -- 第一次/删除过此页面后')

  },

  onHide(){

    console.log('4. onHide: 页面隐藏')

  },

  onUnload(){

    console.log('5. onUnload: 页面DOM删除')

  },

 

 

12. uniapp授权流程****

1.微信小程序 获取用户信息 与获取手机号

2.uni.getUserInfo 接口调用方式

3.采用uni.getUserProfile 获取信息

4.获取手机号 登录

5.验证码倒计时登录


13. 支付流程****

1.公司注册(id) 2.uni.long获取5分钟有效code   3 .调用官方接口获取真实客户id  opendid 4.调后端接口获取数据 5. 调用uni.requestPayment({})传入从后端得到的数据

14. Uni-app 创建项目有哪两种方法****

创建 uni-app 项目有两种方式:第一种是通过官方的开发者工具 HBuilder 来创建,第二种是通过 vue-cli 命令行创建。****

15. 兼容多端****

uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足。

但每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。

· 大量写 if else,会造成代码执行性能低下和管理混乱。

· 编译到不同的工程后二次修改,会让后续升级变的很麻烦。

在 C 语言中,通过 #ifdef、#ifndef 的方式,为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路,为 uni-app 提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现。


16. 路由跳转****

使用 navigator 组件跳转、调用 API 跳转****

17. 防抖节流****

javascript中,防抖是指触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间;节流是指当持续触发事件时,保证一定时间段内只调用一次事件处理函数。****

18. Js运行机制****

JavaScript的运行机制 :主线程从" 任务队列 "中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为 Event Loop(事件循环) 。 只要主线程空了,就会去读取" 任务队列 "。 这个过程会循环反复。 以下这张图可以很好说明这点。****

19. Promise****

Promise异步编程的一中解决方案,他是一个对象,可以获取到异步的操作,他相比传统的回调函数,更加的强大和合理,避免了回调地狱。****

状态:等待(pending),成功(resolve),失败(reject)

队列化(按照顺序)处理异步操作(ajax,定时器等)

应用场景

解决回调地狱

配合async和await实现异步代码同步化