問(wèn)題一：通過(guò)for循環(huán)渲染的dom節(jié)點(diǎn)陆爽，更改數(shù)據(jù)后言秸，頁(yè)面不更新
解決方案：使用 this.$forceUpdate()強(qiáng)制渲染頁(yè)面
問(wèn)題二： 父組件mounted中獲取到的數(shù)據(jù)在子組件mounted接收不到
??父子組件生命周期執(zhí)行順序：父create->子created->子mounted->父mounted
??子組件掛載完成后软能，父組件還未掛載。所以組件數(shù)據(jù)回顯的時(shí)候举畸，在父組件mounted中獲取api的數(shù)據(jù)查排，子組件的mounted是拿不到的。仔細(xì)看看父子組件生命周期鉤子的執(zhí)行順序抄沮，會(huì)發(fā)現(xiàn)created這個(gè)鉤子是按照從外內(nèi)順序執(zhí)行跋核，所以父子組件傳遞接口數(shù)據(jù)的解決方案是：在created中發(fā)起請(qǐng)求獲取數(shù)據(jù)，依次在子組件的created或者mounted中會(huì)接收到這個(gè)數(shù)據(jù)叛买。
問(wèn)題三：get到ES6新知識(shí)變量的解構(gòu)
https://es6.ruanyifeng.com/#docs/destructuring
const values = {
username: 'lyl',
password: '123456'
}
const { username,password } = values;
console.log({ username,password })
// {
// username: 'lyl',
// password: '123456'
// }
console.log(username) // lyl
console.log({username})
// {
// username: 'lyl',
// }
問(wèn)題四： 使用 Object.assign 不更新視圖
場(chǎng)景: 父組件改變子組件綁定的parentValue屬性的值砂代，在子組件監(jiān)聽到改變后通過(guò)Object.assign 賦值給childValue，頁(yè)面{{childValue}}無(wú)變化
// html
{{childValue}}
//js
props: {
parentValue: Object // tset{a:111}
},
data () {
return {
childValue: {}
}
},
watch: {
parentValue: {
handler (newv, oldv) {
Object.assign(this.childValue, newv)
}
deep: true
}
解決方案1：賦值后使用this.$forceUpdate();強(qiáng)制頁(yè)面重新渲染
watch: {
parentValue: {
handler (newv, oldv) {
Object.assign(this.childValue, newv)
this.$forceUpdate();
}
deep: true
}
解決方案1：先Object.assign({}, newv)把值復(fù)制給{}創(chuàng)建新對(duì)象率挣，再將新對(duì)象的值賦值給childValue
watch: {
parentValue: {
handler (newv, oldv) {
this.childValue=Object.assign({}, newv)
}
deep: true
}
問(wèn)題五：子組件通過(guò)watch監(jiān)聽props的變量泊藕，第一次加載不執(zhí)行，數(shù)據(jù)有變化才會(huì)執(zhí)行
解決方案: 設(shè)置 immediate: true
watch: {
parentValue: {
handler (newv, oldv) {
console.log(newv);
}
immediate: true
}
問(wèn)題六：子組件 通過(guò) watch 監(jiān)聽props的對(duì)象难礼，對(duì)象值發(fā)生變化時(shí)娃圆，并不會(huì)執(zhí)行watch的handler方法
解決方案: 設(shè)置 deep: true實(shí)現(xiàn)深度監(jiān)聽
watch: {
parentValue: {
handler (newv, oldv) {
console.log(newv);
}
deep: true
}
問(wèn)題七：子組件中直接修改props中傳入的【基本數(shù)據(jù)類型】的變量控制臺(tái)會(huì)出現(xiàn)警告
解決方案： 通過(guò)在子組件中定義一個(gè)新變量，監(jiān)聽到父組件傳入值發(fā)生變化時(shí)蛾茉，在handler方法中把傳入的新值賦值給新變量讼呢，使用或者修改新定義的變量來(lái)完成相應(yīng)操作。
問(wèn)題八：指令無(wú)法修改v-modal綁定是值
解決方案：調(diào)用input事件使v-modal綁定更新event.target.dispatchEvent(new Event('input'))
update (el, binding, vnode) {
var pattern;
if (!binding.value) {
pattern = /^\s*|\s*$/g;
} else {
pattern = /\s+/g;
}
el.addEventListener('input', function (event) {
event.target.value = event.target.value.replace(pattern, '');
//調(diào)用input事件使v-modal綁定更新
event.target.dispatchEvent(new Event('input'))
});
}
