首先要明确几个概念

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. linux resolver

    linux resolver 概要 解析域名,由libresolv提供,用法参见man 3 resolver 配置文件,resolv.conf(参看 man 5 resolv.conf)配置dns s ...

  2. Git之pull,fetch差别

    简言之, pull=fetch+merge,下拉远程分支并与本地分支合并. fetch只是下拉远程分支,怎么合并,可以自己再做选择. 进一步了解是,git本地有暂存区(亦称为Index区) fetch ...

  3. TensorFlow 基础概念

    初识TensorFlow,看了几天教程后有些无聊,决定写些东西,来夯实一下基础,提供些前进动力. 一.Session.run()和Tensor.eval()的区别: 最主要的区别就是可以使用sess. ...

  4. idea thymeleaf页面变量报错解决

    IDEA在thymeleaf页面编写变量,如${user.id}会出现红色波浪下划线错误,提示Validates unresolved references and invalid expressio ...

  5. Angular入门到精通系列教程（10）- 指令（Directive）

    1. 摘要 2. 组件与指令之间的关系 2.1. 指令的种类 3. Angular 中指令的用途 4. 指令举例 4.1. 指令功能 4.2. Anuglar CLI生成基本文件 4.3. Direc ...

  6. python作业完成简单的文件操作

    题目 请创建以学号命名的目录,在该目录中创建名称为file1.txt的文件,并将自己的个人信息(序号.姓名以及班级)等写入该文件:然后并读取文件中的内容到屏幕上:接着重新命名该文件为file2.txt ...

  7. .NET Core部署到linux(CentOS)最全解决方案，常规篇

    本文为大家介绍使用 .NET Core部署到Linux服务器的方法,通过本文你将了解到Linux在虚拟机下的安装.Xshell,Xftp的使用方法.git在linux下的交互使用以及.net core ...

  8. 用 UniRx 实现 Timeline 式的异步操作

      没接触 UniRx 之前,我在 Unity 中通常用 Coroutine 或 Callback 来实现异步操作.根据我的任务,一般都是去实现游戏组件的演出,比如:敌方角色图形显示后,我方角色 UI ...

  9. vue-cli3x4x修改本地端口port

    一.推荐方法 "scripts": { "serve": "vue-cli-service serve --port 3000", &quo ...

  10. Linux内核分析_课程学习总结报告

    请您根据本课程所学内容总结梳理出一个精简的Linux系统概念模型,最大程度统摄整顿本课程及相关的知识信息,模型应该是逻辑上可以运转的.自洽的,并举例某一两个具体例子(比如读写文件.分配内存.使用I/O ...