-
vue中换行需要 {{'字符串\n'}}，且需要添加white-space:pre-wrap;或\u00a0
-
vue中如果要写行内动态背景图片，需要用require引入图片，因为图片经过了webpack打包，如果直接用url引入的话，会找不到图片。img标签不用。
:style="{ backgroundImage: `url(${backgroundImg})`
computed: {
backgroundImg() {
return require(`@/assets/images/measure-icon/${this.imgName}.png`)
}
}
- 如果在组件上绑定点击事件，需要用@click.native
- publicPath 关于Vue项目中publicPath的二三事 关于Vue项目中publicPath的二三事
文本溢出隐藏overflow: hidden;white-space: nowrap；text-overflow: ellipsis;然后隐藏的元素上加上title='隐藏的文本'。这样就能悬浮后显示文本了。
文字渐变：background-image:渐变。color透明， background-clip: text;
text-align:center可以设置图片水平居中；display：flex;align-item:center；可以垂直居中
文字和图片在同一行显示可能不对齐。在字体的标签上设置vertical-align: middle;或者设置文字基线
当ppt这种需要展示的东西展示的时候，可以给背景虚化，以减少干扰。
是否全屏 window.onresize = () => {
// 可视区域的高度
const clientHeight =
document.documentElement.clientHeight || document.body.clientHeight
// screen是window的属性方法，window.screen可省略window，指的是窗口
this.isFullScreen = screen.height === clientHeight
}
vue请求异步数据传给子组件 异步请求回来的数据，如果数据不会变，只是用作展示。data不用写在return里，可以写在return外面。这样vue就不会监听data。
但是这个data由于没有响应式，所以也不会被子组件watch到。可以在return中声明一个show属性，让子组件v-if：show在data拿到后再渲染。不能v-if：data.legth!=0。因为data没有响应式。
this.data = newData
this.chartShow = true
setToken如果没有存值或存的不是字符串，则token结果为字符串undefined
1.6
vue模板中\n换行符不生效可以用white-space：pre-wrap
11.22
前端正向代理和nginx反向代理
例如：
'/modelService1/': {
target: 'http://192.168.11.144:3001/',
changeOrigin: true,
pathRewrite: {
'modelService1/': '',
},
前端正向代理：存在于开发环境，解决跨域问题。虚拟服务器地址为http://localhost:8000/ 。想要的资源为http://192.168.11.144:3001/3dtiles/pf4dzjrph/tileset.json。如果直接填写这个地址，浏览器不让发送请求。于是发送http://localhost:8000/modelService1/3dtiles/pf4dzjrph/tileset.json。代理服务器匹配到modelService1，转发给http://192.168.11.144:3001/3dtiles/pf4dzjrph/tileset.json，即拿到这个地址的资源或者这个地址为nginx的代理服务器，ningix再次代理给真实服务器。
nginx代理：存在于线上环境，一是因为前端代理了，后端也需要代理。二是解决资源分布问题。当再线上环境时，发送的请求为：http://10.32.11.102/modelService1/3dtiles/pf4dzjrph/tileset.json。nginx匹配到：modelService1. nginx上也有一个类似前端配置代理的文件记录真实服务器地址，于是发送：http://192.168.11.144:3001/3dtiles/pf4dzjrph/tileset.json。
12.14
如果用less了
css中用 url('~@/assets')
img中用 src="~@/asssets"
动态style :style={fontSize:num+'px'}，注意需要加 ： 小驼峰 可以使用变量 px
计算属性 是属性使用不加()
12.25
行内元素不可以设置宽高和上下内外边距。浮动和定位后行内元素会变成块级元素。img是行内块元素
11.1
const Tc = connect(({ riskMonitoring }) => ({
zongOpen: riskMonitoring.zongOpen,
}))(Index);
const IndexRef = forwardRef((props, ref) => <Tc {...props} refInstance={ref} />);
原本是（props,ref） => (props) {refINstance}=props
connect和forwardRef一起用
11.3
正向代理和反向代理
https://cloud.tencent.com/developer/article/1418457
正向代理设置在客户端，反向代理设置在服务器端
less background:url('@{asssets}/image/')
react 如果接受的props改变了，整个组件重新渲染。antd中的switch重新渲染，checked会重新执行。
11.4
数据库编目：表的字段信息上传到irs系统，新增目录。
数据归集：表的数据同步。
11.18
- 如果每次显示页面，发现先显示上一个页面的数据，然后页面在渲染程这个页面的数据。说明在页面渲染之后redux的数据才改变。
- 维护一个多状态的可以用数组。更具index改变状态
11.10
transition 可以设置过渡效果需要有开始状态和结束状态。如果元素一开始不存在，那么设置过渡效果无效。
animation 过渡效果通过定义关键帧实现。
如果元素一开始不存在，点击按钮时元素显示，这时如果添加过渡效果，需要先等元素显示后再改变过渡属性。
10.10
Vue.use(message)页面刷新自动触发；应该使用vue.prototype.$message;
includes; string.includes
filtter filtter是返回有满足条件return ture的item数组
map map是将每一个item映射
/services proxy做代理时别忘了加 /
export 抛出变量需要用{}包裹，default可以抛出一个变量。不可以解构。
登录后有token，路由跳转有token可以放行，且如果跳转登录页直接到首页。如果没有token，到登录页。
登录返回动态路由。遍历加入router字典，存入vues。页面刷新动态路由消失，导致刷新后无法跳转。所以每次跳转前先判断有没有动态路由。
需要存到vuex的接口，写在store中。比如动态路由。
权限涉及到token，用户信息，动态路由。且这三者都需要存到vuex中。
permission.js store/index.js router/index.js
浏览器控制台的结果先于axios的封装结果
axios中post的两种方式 params：拼接在url中的键值对 data：对象。request.post默认data。
reques.get(url,{params:params}) request({url,mehtods,params:params,})
request.post(url, params, {params:params})
注意post有两种请求方式，一种即get那种把参数拼接到url中的，一种是放在请求体中的，如果放在参数中，第二个位置需要设置为null，第三个位置放参数
请求头中可以也只请求类型，axios默认请求类型是application/json;一种键值对结构。还有一种是application/x-www-form-urlencoded;
https://blog.csdn.net/yangyangkl123/article/details/109024222
https://blog.csdn.net/xiaofeiwei521/article/details/123409954
10.13
axios.create创建实例，request.js抛出实例。
axios。defaults.headers
实例.interceptors.request/response.use((config/res)=>{},err=>{})
读取public下的json文件用axios
async await用try catch捕获错误
string -> number parseInt(string,string的进制数)， string-0 不能用string+0，变成string0,可以+string
10.14
num.toFixed(2) 返回一个string
vue-router next()放行 next("/")中断当前路由跳转到'/'
next({...to,replace:true})addrouters后在跳转路由
对象配置/策略模式
Map 更好的对象 [["a", 1], ["b", 2], ["c", 3]]
map.set("key","value") map.get("key")
Object.entries(obj)
for (let [key, value] of iterable) {
console.log(value);
}
Set 键唯一的数组 set.add('value')
缓存：浏览器缓存：storeg，cookie
http缓存：强缓存：如果有Cache-control：max-age=10。则10s内都去内存或磁盘中读文件。不向服务器发请求。
协商缓存：如果Cache-control last-modified:最后修改时间。仍然向服务器发请求看文件是否改变，如果改变则返回新文件，如果没改变则304去读缓存。
10.18
this.$set(this.student,"age",24)
// 比较两个对象是否相等 用continue
function diffObjectByKeys(obj1, obj2) {
let isEqual = true;
for (let key in obj1) {
let v = obj1[key];
if (obj2[key] && obj2[key] === v) {
continue;
} else return false;
}
return isEqual;
}
::v-deep .class
.class .class 和.class,.class
flex-direction justify-content
10.20
css filter可以控制图片的颜色
a表面href="javascript:void(0)"
data-name element.dataset.name
一次性导入文件 let files=require.context(文件路径，是否遍历子目录，匹配文件正则) files是一个对象,{./user.js : value} value.default拿到文件抛出的东西
10.26
useRecude，useCallback
假如父组件中渲染一个值，父组件传给子组件一个方法可以改变这个值，子组件中不需要渲染这个值但可以改变这个值。当子组件改变这个值后，父组件因为用到了这个值所以需要重新渲染，然而虽然子组件没有用到这个值，但是它是在父组件中的，所以也重新渲染了，实际上子组件是不需要重新渲染的，这样就造成了性能问题。
解决方法：
1.如果用MemoChild=React.memo(child),也是无法解决问题的，因为父组件重新渲染后传给子组件的方法也重新生成了，导致子组件的props改变了，所以child还是会重新渲染。不过不用React.memo不管props变没变，当父组件重新渲染时，子组件都会重新渲染。
还需要用useCallback将父组件传给子组件的方法包裹一下，把这个方法的引用缓存住，当这个方法只依赖一个state时，可以用setState(count=>count+1）这个方法让useCallback的依赖消失，这样这个方法就不会改变，子组件也就不会重新渲染了。但是如果传给子组件的方法依赖了多个state，那么useCallback就需要声明多个依赖，当依赖改变时方法就会改变，导致子组件仍然会重新渲染。
2.如果用useReduce，因为useReduce返回的dispatch的引用在父组件重新渲染时不会改变，所以就不需要用useCallback缓存方法了。即useCallback将多个依赖给隐藏起来了，依赖少子组件的重新渲染次数就少。
const [state,changeCount]=useReduce(countReducer,{count:0})
状态 dispatch reducer 初始状态
const countReducer=(state,action)=>{
switch (action.type){
case 'INCREASE':
return {...state,count:state.count+action.data}
}
}
const increaseCount=()=>{
changeCount({type:'INCREASE',data:1})
}
<child changeCount={changeCount} />
changeCount不会改变
useState每次渲染生成不同的state，useRef每次渲染用的是同一个ref。
如果用到了多个依赖，但是不声明多个依赖，后造成闭包问题无法更新。
父组件传方法给子组件时可以包一层：当子组件调用handleIncrease时，就相当于调用setCount(count=>count+1)。如果只传setCount的话，还需要把count传过去。
const handleIncrease = () => {
setCount(count => count + 1);
};
子改变父状态：父组件可以把属性和状态传给子组件，子组件通过调用父组件的方法改变父组件的状态。
父改变子：父组件通过child=useRef,ref={child},child.current拿到子组件的引用,从而拿到子组件的方法改变子组件的状态。
class组件多次渲染维护的是一个状态，而function每次渲染都会重新生成状态，导致函数组件re-render前后其中的函数和引用类型变量时不相等的，这会导致不必要的re-render。
useCallback返回接收的函数，useMemo会调用接受的函数，返回接受函数返回的结果。
如果一个结果需要通过耗时的函数返回可以用useMemo包裹。或者一个引用类型可以同useMemo包裹。
+++
ctrl+backspace删除一个单词
ctrl+shift+.打开面包屑 上下左右和ctrl+左右
f2 ctrl+g ： @
--dirname 当前文件所在的绝对路径