Question

怎么将vue中method中的方法设置为公有，各个vue界面都可以调用？

Answer 1

• 下面开始介绍下，在页面加载一个数据列表完成之后，页面自动滚动定位到中间某个列表元素，需要在列表数据渲染完成，计算列表高度，再控制定位到指定行。首先介绍下一开始尝试没有生效的方案，这也是大家最容易出现错误的地方，vue.js提供的mounted函数，表示挂载到实例上去之后调用该钩子

  

• 运行之后，发现mounted执行的时候，获取到的height值不对，打个断点也可以发现，此时页面没有渲染完成，列表块还是一片空白

  

• 此时查询官方api文档发现，有一个nextTick方法，意思是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。使用之后发现，还是不能解决我所需要的效果

  

• 继续查询api文档发现，watch方法，用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调，再次尝试，运行后发现还是不行

  

• 最终把watch和nextTick组合一起

  watch:{    showList:function(){        this.goPrice(0);    }}

  showList对应表格页面的绑定变量

  <tr v-for="(item,index) in showList">

  

• 运行后发现，已经达到了预期的效果

  

• 7

  最后说明下，有时候我们会想到使用setTimeout的方式来实现，使用这种方式需要设置个超时执行时间，由于渲染时间无法确定，有快有慢，就会出现不稳定的现象。

  END

注意事项

• 使用watch可能会因为监控的对象发生多次变化，而触发多次初始化函数

• 以上只是我测试时找到的方法，不一定是最好的实现方式，只做参考