共计 4542 个字符，预计需要花费 12 分钟才能阅读完成。
1.user-select：none
场景：测试的共事常常跟咱们说，操作比拟迅速的状况下，页面的元素总会有一层蓝色，尽管不影响成果，然而不美观。其实这是用户抉择操作，浏览器自带的，如果不想要改成果，能够在元素容器设置 css 款式 user-select：none 即可。
2. 特殊字符的正则匹配
<template>
<div>
<h3> 特殊字符的正则全局匹配 </h3>
<div @click="hanleReplace()"> 将特殊字符转化成 123 并标红 </div>
<p v-html="str"></p>
</div>
</template>
<script>
export default {data() {
return {str: '大师傅 @$/::)sdfdhttp:// 的设计 /::) 费看::-Osf 的数据反馈 http://study.sxmaps.com 给'
}
},
methods: {hanleReplace() {let special = '/::)'
//const transform = special.replace(/[.\\[\]{}()|^$?*+]/g, '\\$&');
//let pattern = new RegExp(special, 'g');
// let pattern = new RegExp(transform, 'g');
let redText = '<span style="color: red">123</span>'
this.str = this.str.replace(special, redText);
},
}
}
</script> 该列子是将特殊字符 /::) 替换成 123 并将字体色彩更改为红色，咱们看看一下几种状况：
（1）当只替换第一个匹配的字符状况下，没有任何问题
hanleReplace() {let special = '/::)'
//const transform = special.replace(/[.\\[\]{}()|^$?*+]/g, '\\$&');
//let pattern = new RegExp(special, 'g');
// let pattern = new RegExp(transform, 'g');
let redText = '<span style="color: red">123</span>'
this.str = this.str.replace(special, redText);
},（2）全局替换，然而没有将特殊字符本义，报错
hanleReplace() {let special = '/::)'
//const transform = special.replace(/[.\\[\]{}()|^$?*+]/g, '\\$&');
let pattern = new RegExp(special, 'g');
// let pattern = new RegExp(transform, 'g');
let redText = '<span style="color: red">123</span>'
this.str = this.str.replace(pattern, redText);
},
//Invalid regular expression: //::)/: Unmatched ')'at new RegExp (<anonymous>)(3) 解决特殊字符的正则匹配，将特殊字符正则本义
hanleReplace() {let special = '/::)'
const transform = special.replace(/[.\\[\]{}()|^$?*+]/g, '\\$&'); // 本义
//let pattern = new RegExp(special, 'g');
let pattern = new RegExp(transform, 'g');
let redText = '<span style="color: red">123</span>'
this.str = this.str.replace(pattern, redText);
}, 利用场景：（1）我的项目中展现微信聊天记录，解析微信发送的 emoji。（2）依据关键字疾速匹配聊天记录性能。
3.scrollIntoView 疾速定位到以后可见区域
在上拉加载更多聊天记录的时候，咱们个别状况下是通过计算以后高度和加载后的高度相减以达到目标，用 scrollIntoView 不须要计算就能达到目标。<template>
<div>
<h3>ScrollIntoView</h3>
<div class="chatBox" @scroll="handleScroll" id="chatBox">
<div
class="chatItem"
v-for="item in chatList"
:key="item"
:id="`record${item.number}`"
>
{{item.message}}
</div>
</div>
</div>
</template>
<script>
export default {data() {
return {chatList: [],
currentIndex: 0,
scrollLoading: true,
lastIndex: 0, // 以后索引 id
currPagePos: 0, // 以后内容高度
};
},
created() {this.getData();
this.$nextTick(() => {let chatBox = document.getElementById("chatBox");
chatBox.scrollTop = chatBox.scrollHeight;
});
},
methods: {
//scrollIntoView
handleScroll(e) {if (e.target.scrollTop <= 5) {
this.lastIndex = this.chatList.length - 1;
this.getData();
setTimeout(() => {
const id = "record" + this.lastIndex;
document.getElementById(id).scrollIntoView();}, 0);
}
},
// handleScroll(e) {// if (e.target.scrollTop <= 5) {// this.currPagePos = document.getElementById("chatBox").scrollHeight;
// this.getData();
// setTimeout(() => {// let totalHeight = document.getElementById("chatBox").scrollHeight;
// document.getElementById("chatBox").scrollTop =
// totalHeight - this.currPagePos;
// }, 0);
// }
// },
// 获取数据
getData() {let newList = [];
for (let i = 0; i < 20; i++) {
newList.unshift({
number: this.currentIndex,
message: "message" + this.currentIndex,
});
++this.currentIndex;
}
this.chatList = newList.concat(this.chatList);
},
},
};
</script>
<style scoped>
.chatBox {
width: 400px;
height: 500px;
border: 1px solid #f5f5f5;
margin: 30px;
overflow-y: scroll;
}
.chatItem {
height: 100px;
background: #f5f5f5;
margin-top: 30px;
}
</style>
4.Promise.all
解决咱们要期待两个或者多个异步操作实现在执行下一步操作的问题。
init(url) {const a = new Promise((resolve) => {initWxConfig(url).then(() => {window.wx.invoke("getCurExternalContact", {}, (res) => {console.log(res, 'userId')
if (res.err_msg == "getCurExternalContact:ok") {
//userId = res.userId ; // 返回以后内部联系人 userId
this.workWechatExternalUserId = res.userId;
sessionStorage.setItem("workWechatExternalUserId", res.userId);
resolve("ok");
} else {// 错误处理}
});
});
});
let b = new Promise((resolve) => {let userId = localStorage.getItem("userId");
if (!userId) {
sessionModel
.workWechatgetuserinfo(this.$route.query.code)
.then((res) => {
this.workWechatUserId = res.userId;
sessionStorage.setItem("userId", res.userId);
resolve("胜利");
});
} else {resolve("胜利");
}
});
Promise.all([a, b]).then(() => {let url = `${process.env.VUE_APP_HTTP_URL}/cuckoo/studentInformation`;
window.history.replaceState(null,null,url)
this.getMemberDetail();});
},5.vue 函数式组件
函数式组件，即无状态，无奈实例化，外部没有任何生命周期解决办法，十分轻量，因此渲染性能比一般的高达 70%，特地适宜用来只依赖内部数据传递而变动的组件。
<!-- App.vue -->
<template>
<div id="app">
<List
:items="['Wonderwoman','Ironman']"
:item-click="item => (clicked = item)"
/>
<p>Clicked hero: {{clicked}}</p>
</div>
</template>
<script>
import List from "./List";
export default {
name: "App",
data: () => ({ clicked: ""}),
components: {List}
};
</script>
<!-- List.vue 函数式组件 -->
<template functional>
<div>
<p v-for="item in props.items" @click="props.itemClick(item);">
{{item}}
</p>
</div>
</template>
[7 个有用的 Vue 开发技巧](https://juejin.cn/post/6844903848050589704)
正文完