问题一：通过for循环渲染的dom节点，更改数据后，页面不更新
解决方案：使用 this.$forceUpdate()强制渲染页面
问题二： 父组件mounted中获取到的数据在子组件mounted接收不到
父子组件生命周期执行顺序：父create->子created->子mounted->父mounted
子组件挂载完成后，父组件还未挂载。所以组件数据回显的时候，在父组件mounted中获取api的数据，子组件的mounted是拿不到的。仔细看看父子组件生命周期钩子的执行顺序，会发现created这个钩子是按照从外内顺序执行，所以父子组件传递接口数据的解决方案是：在created中发起请求获取数据，依次在子组件的created或者mounted中会接收到这个数据。
问题三：get到ES6新知识变量的解构
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',
// }
问题四： 使用 Object.assign 不更新视图
场景: 父组件改变子组件绑定的parentValue属性的值，在子组件监听到改变后通过Object.assign 赋值给childValue，页面{{childValue}}无变化
// 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();强制页面重新渲染
watch: {
parentValue: {
handler (newv, oldv) {
Object.assign(this.childValue, newv)
this.$forceUpdate();
}
deep: true
}
解决方案1：先Object.assign({}, newv)把值复制给{}创建新对象，再将新对象的值赋值给childValue
watch: {
parentValue: {
handler (newv, oldv) {
this.childValue=Object.assign({}, newv)
}
deep: true
}
问题五：子组件通过watch监听props的变量，第一次加载不执行，数据有变化才会执行
解决方案: 设置 immediate: true
watch: {
parentValue: {
handler (newv, oldv) {
console.log(newv);
}
immediate: true
}
问题六：子组件 通过 watch 监听props的对象，对象值发生变化时，并不会执行watch的handler方法
解决方案: 设置 deep: true实现深度监听
watch: {
parentValue: {
handler (newv, oldv) {
console.log(newv);
}
deep: true
}
问题七：子组件中直接修改props中传入的【基本数据类型】的变量控制台会出现警告
解决方案： 通过在子组件中定义一个新变量，监听到父组件传入值发生变化时，在handler方法中把传入的新值赋值给新变量，使用或者修改新定义的变量来完成相应操作。
问题八：指令无法修改v-modal绑定是值
解决方案：调用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, '');
//调用input事件使v-modal绑定更新
event.target.dispatchEvent(new Event('input'))
});
}
