参考文章:vue中需要注意的问题总结(上)

1.对于sync的使用

参考vue的修饰符sync

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。
这个sync可以在你不得不在子组件改变父组件的传值 后,反馈给父组件时使用.
在父组件中使用

<text-document v-bind:title.sync="doc.title"></text-document>

在子组件<text-document>中,如果需要改变title的值,则需要使用this.set(被更新的)

this.$emit('update:title', newTitle)

2.对于父组件传过来的值需要立即调用

问题:开发的业务组件,父组件使用子组件时,给子组件传递一个prop为name的属性,子组件在创建时,根据这个prop值去做一些异步操作,包含请求后端数据等(本人觉得组件开发冗余业务操作有些怪怪的,但是没有更好的选择).实际上在created()钩子函数调用,获取到的name有时候是undefined.

1. 有时获取到的值是undefined的原因是html标签不区分大小写,传值失败.
   这时建议传值的话使用<my-a :my-attr='myAttr'></my-a>这种形式传值.而组件实际定义的prop:['myAttr'],参考文章vue的prop传值失败问题
2. 父组件数据还未获取时就向子组件传props，导致子组件不到数据而报错。
   这个的话,使用比较迂回的做法,等到父组件传递某个数据的时候,才去渲染dom.
   mpvue父子组件props传参失败的解决方案
   这篇文章分析的比较全面:
   详解vue2父组件传递props异步数据到子组件的问题
   比较完美的做法,结合watch来监听prop的变化,收到父组件给到的符合预期的值,再去做其他操作:

 props: {
    parent: {
      type: Object,
      required: true,
      default: () => {
        sons: [];
      }
   },
 watch: {
//,而immediate:true代表如果在 wacth 里声明了 parent之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。
    parent: {
      immediate: true,
      handler: async function(newer) {
        //异步加载后代函数
        this.sons = await this.loadSons(newer);
//这里通过sync来同步更新parent的值
        //const { parent } = this;
     //   parent.sons = this.sons;
        //this.$emit("update:parent", parent);
        console.log(this.sons);
        console.log(parent, "parent");
      }
    }
  }

3.新增加对象属性页面不更新

参考文章vue修改对象的属性值后页面不重新渲染
问题:在页面中展现的列表项,支持多选,所以虽然给列表项增加一个属性isSelected来标记是否选中,但是在动态增加这个属性时,页面却不会更新.
最后在更新对象前使用强制更新

this.$forceUpdate();
this.$set(被更新的对象,"被更新的属性名称",更新后的取值);

3.数据更新,Dom未更新

理解vue中的nextTick
问题:有一个弹框,用isShow控制是否显示,当弹框显示时,只要设置isShow为true即可.为了更好地交互,弹框打开时,弹框里面的第一个输入框就要获取焦点onfouse.根据原生的js写法:

document.querySelector(".my-modal input").focus();

但是并不生效,原因就是vue的DOM更新是异步的.
所以我们使用

this.$nextTick(()=>{
//或者可以使用vue提供的获取dom的方法
 // this.$refs.myInput.focus();
document.querySelector(".my-modal input").focus();
});

以下是vue官方对DOM更新的解读.

Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和MessageChannel，如果执行环境不支持，会采用 setTimeout(fn, 0)代替。
例如，当你设置vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程，但是如果你想在 DOM 状态更新后做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。