Vue学习笔记 ——全局AIP（下）（Vue.nextTick、Vue.extend、Vue.filter）

最新推荐文章于 2021-09-14 12:53:40 发布

莫非C

最新推荐文章于 2021-09-14 12:53:40 发布

阅读量173

点赞数

分类专栏： Vue.js学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_43340295/article/details/108341983

版权

将回调函数延迟在下次dom更新数据后调用，当数据更新了，在dom中渲染后，自动调用该函数。

写法：

Vue.nextTick([callback,context]) 
参数：
{
   Function} [callback]
{
   Object} [context]

什么时候需要用Vue.nextTick()？

在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。
在created()钩子函数执行的时候DOM还没有进行渲染，此时的DOM无法操作，所以将DOM操作的js代码放进Vue.nextTick()的回调函数中，待dom更新数据后自动调用该函数。
在数据变化后执行的某个操作。比如设置vm.someData = 'new value'时，DOM并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时要根据更新的DOM 状态去做某些事情，就会出现问题。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用
Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

ps: mounted()钩子函数与created()钩子函数的不同：

mounted()钩子函数执行时所有的DOM挂载和渲染都已完成，因此可以在该钩子函数中进行任何DOM操作。

但是mounted()不会承诺所有的子组件也都一起被挂载。如果需要等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted()，例：

mounted: function () {
   
    this.$nextTick(function () {
   
        //
    })
}

Vue.extend(options)
它是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，而不是一个具体的组件实例， extend就是一个构造器，就像原生js的构造函数，可以new N次，构造N个对象，但是不能重复使用，代码如下：

<body>
    <div>
        <xiao><xiao>

关注