使用vue问题总结

问题一：通过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')) 
        });
    }