关于vue的一些实践

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

1.对于sync的使用

参考vue的修饰符sync

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

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

在子组件<text-document>中,如果需要改变title的值,则需要使用this.emit('update:propName',newValue);用法和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 更新完成后就会调用。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 4,705评论 0 29
  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 24,944评论 1 12
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 10,394评论 4 129
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 6,735评论 0 25
  • 嫩草镶白钻,晨鸟肚已圆。 途路三千里,蓬莱一尺间。 相顾不相言,留汗落两边。 四海雨露沾,五湖鲈鱼鲜。 但羡嫦娥悬...
    半日浮闲阅读 283评论 0 1
  • 雨夜 倾听窗外 淅淅沥沥 寂静 让人 心思缥缈 我在 听雨 也在等你 我在 等你 也在听雨 …… 暗黑中 的光亮 ...
    beikemama贝壳妈妈阅读 213评论 2 0
  • 有人告诉我 东华分再高也是东华
    昵称是榴芒吖阅读 77评论 1 0
  • 文/伊伊 钱呀 钱呀 好多钱呀 买房子 买家具 买书 哈哈哈 买爸爸 买妈妈 还有买宝宝 买到一家人啦 PS:谁能...
    白茶心阅读 201评论 0 2