# 2020.11.25

### react 和 vue 区别

[react 和 vue 区别](/blog/mian-shi/zhen-dui-zi-jie/react-mian-shi-zhun-bei.md)

vue 实现双向绑定 watch computed this.nextTick()

vue 通信方式

### 写一下发布订阅

\[{ key: \[fn, fn, fn] }]

###

```js
state = {
  index: 1,
};
```

```js
题一
componentDidMount(){
    this.setState({
        index:this.state.index+1
    })
    console.log('state',this.state.index)
}
题二
componentDidMount(){
    setTimeout(()=>{
        this.setState({
            index:this.state.index+1
        })
        console.log('state',this.state.index)
    },0)
}

题三
componentDidMount(){
    this.setState({
        index:this.state.index+1
    },()=>{
        console.log(this.state.index)
    })
    this.setState({
        index:this.state.index+1
    },()=>{
        console.log(this.state.index)
    })
}
```

### react 事件机制

### react 性能优化

[react 性能优化](/blog/mian-shi/zhen-dui-zi-jie/react-mian-shi-zhun-bei.md)

### 数组排序

### xss csrf csp

[前端网络安全](/blog/za-wen/qian-duan-wang-luo-an-quan.md)

### 跨域

###

```js
function a(test) {
  console.log(test);
}
var b = a.bind(this, "xxx");
var c = b.bind(this, "lll");
c();
```

总结: bind 方法可以绑定 this 和参数，但一旦参数被绑定，后续的 bind 调用不会覆盖已经绑定的参数。

在这段代码中，c() 最终调用的是 a('xxx')，因此输出是 xxx。

var calc = generatorCalc(); calc(1); calc(2)(3); calc() // 6 实现 generatorCalc

1. 命名规范
2. 类数组 与数组 的转化的问题
3. 扩展运算符的使用
4. 链式调用的设计

###

```js
console.log("script start");

async function async1() {
  await async2();
  console.log("async1 end");
}

async function async2() {
  console.log("async2 end");
}

async1();

setTimeout(() => {
  console.log("setTimeout");
}, 0);

new Promise((resolve, reject) => {
  console.log("promise start");
  resolve();
})
  .then(() => console.log("promise1"))
  .then(() => console.log("promise2"));

console.log("script end");
```

同步代码 总是最先执行。

微任务（如 Promise.then、await 后面的代码）会在同步代码执行完毕后立即执行。

宏任务（如 setTimeout）会在微任务队列清空后执行。

### Promise 状态

```js
new Promise(function (res, rej) {
  res(2);
  console.log("xxx");
})
  .then(
    function () {
      // 处理 resolve 的传入值
      return 6;
    },
    function () {
      //??
    }
  )
  .then(function () {})
  .catch();
```

一个 Promise

### 适配问题

1. 全局滚动与弹窗的问题（没有遇到）
2. 兼容性要求 > Android 8.0 css 特性兼容性要求 currentCorlor 变量

css less 哪些能力

* 变量
* 嵌套

跑马灯的组件

* 无限循环滚动

### webpack 性能优化方面

[webpack 优化](https://github.com/hoelshen/Blog/blob/master/源码/webpack/webpack常用优化.md)

### HMR 工作原理

[webpack HMR](https://github.com/hoelshen/Blog/blob/master/源码/webpack/webpack热更新原理.md)

### new 函数 和 直接 函数

当作为未绑定对象被调用时，this 默认指向全局上下文或者浏览器中的 window 对象。然而，如果函数在严格模式下被执行，上下文将被默认为 undefined

当通过 new 一个对象的实例的方式来调用一个函数的时候，this 的值将被设置为新创建的实例

```js
function foo() {
  console.log(this);
}

foo(); // window
new foo(); // foo{}
```

```js
function generatorCalc() {
  let sum = 0;
  function calc(...args) {
    if (args.length === 0) {
      return sum;
    }
    sum += args.reduce((a, b) => a + b, 0);
    return calc;
  }

  return calc;
}

var calc = generatorCalc();
calc(1);
calc(2)(3);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shenjunhong.gitbook.io/blog/mian-shi/mei-zu-jing-li/2020.11.25.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.