一些小记录

记录一些uni-app中的问题

uni-app与vue的生命周期

在小程序端渲染时的生命周期路线：beforeCreated->created->beforeMount->onLoad->onShow->mounted->onReady->success
在web端渲染时的生命周期路线：beforeCreated->onLoad->onShow->created->beforeMount->onReady->mount->success；

props中的数据无法监听其变化

Uni-app无法监听props里面数据的变化，所以需要对props里面的数据实行动态监听时，需要把它重新放到data里面；

uni-app的渲染

小程序是采用webView渲染，和weex方式的原生渲染；
vue文件走的webView渲染，nvue是weex方式的原生渲染；

浏览器原生对象

app和小程序中不支持浏览器专用的window,document,navigator,location对象，包括cookie等存储，只有在浏览器中才有；

uni-app在配置完请求头token后服务器不响应

在配置uni-app请求头的token后，由于自己的token是存储在uni-app的uni.getStorageSync()里面的，所以在测试时，uni.getStorageSync(‘token’)中已经存在了一个token，所以在不需要设置token的请求头中加入了token字段，导致服务器响应失败；只需清除浏览器缓存，在重新请求即可；

uni-app使用u-view的u–input在微信小程序端不显示

问题：在使用u-view的u-input的输入框，使用slot来控制输入框前后插槽，而在微信小程序端不显示。
原因：在u-view的slot后面说明了在nvue与非nvue渲染时，会有不同，所以，当使用nvue组件时，应该使用u - - input标签，而非nvue时，应该使用u-input标签。一般在微信端，采用的是非nvue，所以根据使用端的不同来决定使用哪个u-view标签；

<!-- #ifdef MP-WEIXIN -->
<!-- 非nvue渲染 -->
<u-input v-model="loginModel.userInfo.userPassWorld" border="none" placeholder="验证码">
<view slot="suffix">
<u-code ref="loginCode" seconds="20" @change="codeChange" changeText="X秒后重新获取"></u-code>
<u-button type="success" size="mini" @tap="getCode" :text="tips"></u-button>
</view>
</u-input>
<!-- #endif -->

<!-- #ifdef H5 -->
<!-- nvue渲染 -->
<u--input v-model="loginModel.userInfo.userPassWorld" border="none" placeholder="验证码">
<view slot="suffix">
<u-code ref="loginCode" seconds="20" @change="codeChange" changeText="X秒后重新获取"></u-code>
<u-button type="success" size="mini" @tap="getCode" :text="tips"></u-button>
</view>
</u--input>
<!-- #endif -->

记录一些vue中的问题

$attrs在vue3中的不同

在vue2中，$attrs可以用来透传组件之间的值，但是在传递style和class时会出现一点问题，一般来说，定义了inheritAttrs：false后，定义这个值的该组件就不希望本组件的根元素继承父组件的attribute，但是遇到style和class就会有所不同：

<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

如果像下面这样使用这个组件。

<my-component id="my-id" class="my-class"></my-component>

但是我们在组件中使用了inheritAttrs这个属性，按理说，这个组件就不会继承父组件传递下来的值，但是实际渲染确实如下：

<label class="my-class">
  <input type="text" id="my-id" />
</label>

组件的label标签继承了my-class这个class，这是在vue2中出现的问题；
但是在vue3中，$attrs 包含了所有的 attribute，这使得把它们全部应用到另一个元素上变得更加容易了。现在上面的示例将生成以下 HTML：

<label>
  <input type="text" id="my-id" class="my-class" />
</label>

vue3中setup里面使用异步函数

在vue3中的beforecreated和created生命周期钩子函数用setup取代后，就不是很容易操作，在写项目时，由于直接在setUp中写异步函数，然后根据函数返回值赋值时，会出现模板不渲染的问题；所以可以在setup中选择调用onMounted这个钩子函数来实现；

setup(){
const NameList= [];
const requestNameList = async()=>{
const {data} = getNameList();
NameList.value.push(...data);
}
onMounted(() => {
      requestNameList();
    });
}

记录一些electron中的问题

关于electron中异步通信的问题

在使用electron时，经常会用到主进程和渲染进程之间的通信，此时就会用到electron中Main Process中的ipcMain和Render Process中的ipcRenderer这两个方法。

// 在主进程中.
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.reply('asynchronous-reply', 'pong')
})

ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.returnValue = 'pong'
})

//在渲染器进程 (网页) 中。
// 注意: Electron 的 API 在预加载后即可访问，直到上下文隔离被禁用
// 详见： https://www.electronjs.org/docs/tutorial/process-model#preload-scripts
const { ipcRenderer } = require('electron')
ipcRenderer.send('synchronous-message', 'ping') // prints "pong"
ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')

这上面会涉及到他们之间执行顺序的问题，会先执行第一个send和第三个send，在执行后面的on，我觉得是js的异步机制导致，所以在写项目时需要注意他们之间的顺序。

ts与es6的一些记录

typescript的never和void类型；

void类型表示没有任意类型，常在定义没有返回值的函数中使用到，void类型的变量只能赋值为undefined和null，其他类型不能赋值给void类型的变量。
never类型是指那些永不存在的值的类型，他是那些总会抛出异常或根本不会有返回值的函数表达式的返回值类型。如下面这两个函数，第一个是总会抛出异常，第二个则是根本不会有返回值的函数。

const errorFunc = (message: string): never => {
  throw new Error(message);
};
const infiniteFunc = (): never => {
  while (true) {}
};

never和void类型的函数不同，void是定义的时候，不在函数中做返回处理，而never类型函数则是一个死循环，根本不会返回值。

ES6中作用域与let,var,const的记录；

在ES6中新增了块级作用域，像变量提升，暂时性死区这些也是因为块级作用域中出现的。这里我想记录的是函数在块级作用域的声明；ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。显然在ES5中没有块级作用域这一说法，所以类似于

if(true){
	f(){
	console.log(1);
	}
}

这种写法在ES5中是非法的，但是由于浏览器的原因，这种写法在实际情况中是能运行的。
但是在ES6中引入了块级作用域后，明确了函数能在块级作用域中声明。但是在块级作用域中声明的函数有点类似于使用ｖａｒ

function f(){console.log('l am outside!')}
(function (){
	if(false){
		function f(){console.log('l am inside!')}
	}
	f();
}());

在ES５中，函数的运行结果是“Ｉ　ａｍ　ｉｎｓｉｄｅ！”；这是因为在ｉｆ里面声明的函数ｆ提升到ｉｆ语句之外；所以会得到上面的运行结果。但是在ES６中会报错。因为在ES６中，上面的函数会被编译成

function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }
  f();
}());

同样是为了解决兼容问题，ES6在附录B里面规定，浏览器可以有自己的行为：
-允许在块级作用域中声明函数；
-函数声明类似与var，即声明的函数会提升到全局作用域或函数作用域的头部；
-同时，函数声明还会提升到所在块级作用域的头部；