首先要明确几个概念

1.Vue的核心思想

数据驱动 和 组件化系统

2.同步和异步

在没有特殊情下，程序一般先执行同步代码，等待同步执行完之后，执行异步代码

下面进入正题，首先贴出程序片段：

　　

在该段代码执行时，数据驱动发生，由于数据驱动页面的变化有先后之分，先执行数据的更新，在进行页面的渲染更新。前者是同步操作，后者是异步操作，而接下来的this.$nextTick()，他是等到页面渲染之后，才调用该函数，所以顺理成章，执行过程如下： 数据更新（同步） =》 页面更新（异步） =》this.$nextTick() （等到页面更新完毕之后）

来一个对比：

　　如果没有的话，如图所示：

　　

　　这个时候会报错：

　　

　　显示 后面的$refs前面的是undefined  现在的执行顺序是： 数据更新（同步） =》 this.$refs.saveTagInput.$refs.input.focus()  (同步， 查到对应的dom元素节点，如果找到的话，继续执行)  =》  页面更新 （异步）

　　显然是执行不了的，因为在页面更新之前，还没有渲染页面，他找不到对应  this.$refs.saveTagInput 的dom节点，所以报错显示 undefined

　　需要特别注意 的是 this.$nextTick()  的执行时机  即：等到页面更新完毕之后执行

this.$nextTick( 回调函数 )的作用的更多相关文章

  1. js中的回调函数的理解和使用方法

    js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...

  2. Node.js：回调函数

    概要:本篇博客主要通过对比node.js异步与同步方式读取文件的方式来解释node中回调函数的作用. 1.异步方式读取文件: 新建一个文本文档用于测试,如下图: 代码如下: // node异步方式读取 ...

  3. 进程池的回调函数callback

    如下代码: from multiprocessing import Pool def func1(n): print('in func1') return n*n def func2(nn): pri ...

  4. JavaScript回调函数的实现

    https://github.com/forsigner/blog/blob/master/source/_posts/javascript-callback.md 在JavaScript中,回调函数 ...

  5. PHP回调函数及匿名函数概念与用法详解

    1.回调函数 PHP的回调函数其实和C.Java等语言的回调函数的作用是一模一样的,都是在主线程执行的过程中,突然跳去执行设置的回调函数: 回调函数执行完毕之后,再回到主线程处理接下来的流程 而在ph ...

  6. jQuery的deferred对象详解 jquery回调函数

    http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html jQuery的 ...

  7. ajax的回调函数和匿名函数

    1.什么是js回调函数 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为函数实际上 ...

  8. 深入浅出剖析C语言函数指针与回调函数(一)【转】

    本文转载自:http://blog.csdn.net/morixinguan/article/details/65494239 关于静态库和动态库的使用和制作方法. http://blog.csdn. ...

  9. C# 一个帮您理解回调函数的例子（新手必看）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 回调函数 ...

随机推荐

  1. MySQL中的这个池子，强的一批！

    Mysql 中数据是要落盘的,这点大家都知道.读写磁盘速度是很慢的,尤其和内存比起来更是没的说.但是,我们平时在执行 SQL 时,无论写操作还是读操作都能很快得到结果,并没有预想中的那么慢. 可能你会 ...

  2. OpenTelemetry - 云原生下可观测性的新标准

    CNCF 简介 CNCF(Cloud Native Computing Foundation),中文为"云原生计算基金会",CNCF是Linux基金会旗下的基金会,可以理解为一个非 ...

  3. 【渲染教程】使用3ds Max和ZBrush制作卡通风格的武器模型(上)

    克里斯蒂娜·马丁(CristinaMartín)介绍了她的项目灵剑(Spirit Sword)的制作过程,并详细的展示了使用3ds Max和ZBrush制作模型,纹理绘画和最终展示的过程. 介绍 克里 ...

  4. 【Java基础】集合

    集合 集合概述 一方面, 面向对象语言对事物的体现都是以对象的形式,为了方便对多个对象 的操作,就要对对象进行存储.另一方面,使用 Array 存储对象方面具有一些弊端,而 Java 集合就像一种容器 ...

  5. 无限重置IDE过期时间插件 亲测可以使用

    相信破解过IDEA的小伙伴,都知道jetbrains-agent这个工具,没错,就是那个直接拖入到开发工具界面,一键搞定,so easy的破解工具!这个工具目前已经停止更新了,尽管还有很多小伙伴在使用 ...

  6. mysqlbinlog :unknown variable 'default-character-set=gbk'

    mysqlbinlog :unknown variable 'default-character-set=gbk'  解决方法: 在命令行中加入--no-defaults开关,使用mysqlbinlo ...

  7. 怎么启用apache的mod_log_sql模块将所有的访问信息直接记录在mysql中

    怎么启用apache的mod_log_sql模块将所有的访问信息直接记录在mysql中

  8. Android根据pdf模板生成pdf文件

    我们需要生成一些固定格式的pdf文件或者一些报表数据,那么我们可以用 iText包去做. 需要包含的jar包:iText-5.0.6.jar    iTextAsian.jar ,怎样jar包导入工程 ...

  9. 深度学习DeepLearning技术实战研修班

    深度学习DeepLearning(Python)实战培训班 时间地点: 2020 年 12 月 18 日-2020 年 12 月 21日 (第一天报到 授课三天:提前环境部署 电脑测试) 一.培训方式 ...

  10. USB2514集线器调试总结

    一般的MCU不会留有太多的USB口,但在实际项目中又会遇到需要很多个USB口的情况,这时就会用到USB集线器来扩展USB口了.USB2514这个芯片是我在工作中用的比较多的,但是问题很多,从来没有调稳 ...