1.使用{{ }}来填充html的text时异步操作容易出现数据未及时传入导致页面出现{{}}的问题，这个时候可以使用v-cloak指令来隐藏。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
[v-cloak]{
display:none !important;
}
</style>
</head>
<body>
<div id="itany">
<p v-cloak>{{msg}}</p>
</div>
</body>
</html>2.使用elementUI的el-form进行表达校对时，一个表单项的改动需要联动校验其他表单项时，需要使用类似this.$refs.form.validateField("要联动校验的表单项的prop")来完成联动校验。
3.在v-model直接绑定vuex里的state，实际上没有实现state的双向绑定，这是因为v-mode是双向绑定，而vuex是单向数据流，所以直接使用vuex的state无法实现双向绑定，需要自己实现,使用计算属性computed的get和set来模拟实现双向绑定。
举例：
<input v-model="modelData" />
computed: {
modelData: {
get() {
return this.$store.state.modelData
},
set(newVal) {
this.$store.commit('modelData', newVal)
}
}
}4.vue $emit调用父组件异步方法，返回结果后再执行子组件的方法
现象：子组件请求父组件的方法，触发数据更新，待数据返回后，才能进行后续的操作
解决：使用回调函数的方式
父组件：
async getTaskListDetails(callback = () => {}) {
const { pageSize, currentPage } = this.pagination
const [res, err] = await taskListDetails({
limit: pageSize,
start: pageSize * (currentPage - 1)
})
if (err) return this.$message.error(err?.msg || '请求失败')
if (res.code !== 200) return this.$message.error(res?.msg || '请求失败')
this.dataList = res?.data?.list || []
this.mainTask = res.data.main_task
this.pagination.total = res.data.count
callback(this.dataList)子组件：
this.$emit('updateList', (res) => {
this.checkTaskProgress(res)
})5.浏览器开启自动填充账号密码功能时，页面非账号密码输入框也受影响，被填入账号或者密码。
这是由于浏览器记住密码后只要识别到一个type为text后又紧接着一个password时就默认填充之前浏览器记住的账号密码。所以需要对密码框做修改。
<el-input
v-model="inputValue"
:type="inputType"
:show-password="inputType === 'password'? true : false"
@keydown.enter.native="handleInputEnter"
:placeholder="inputPlaceholder"
auto-complete="new-password"
:readonly="readonlyFlag"
@focus="readonlyFlag=false"
ref="input">
</el-input>如上面代码，当未focus时，输入框为只读状态，focus后readonlyFlag为false状态，可以输入。并且auto-complete="new-password使之不会自动填入密码。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。