首先要明确几个概念

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. asp.net core 学习笔记

    项目整体感知 项目初始化 项目启动流程: Program.cs Microsoft.Extensions.Hosting.Host => CreateHostBuilder().UseStart ...

  2. Java并发包源码学习系列：ReentrantLock可重入独占锁详解

    目录 基本用法介绍 继承体系 构造方法 state状态表示 获取锁 void lock()方法 NonfairSync FairSync 公平与非公平策略的差异 void lockInterrupti ...

  3. 十八般武艺玩转GaussDB(DWS)性能调优：路径干预

    摘要:路径生成是表关联方式确定的主要阶段,本文介绍了几个影响路径生成的要素:cost_param, scan方式,join方式,stream方式,并从原理上分析如何干预路径的生成. 一.cost模型选 ...

  4. 【C++】《C++ Primer 》第二章

    第二章 变量和基本类型 指针和引用的不同点 引用不是一个对象,它没有实际地址,但是指针是一个对象.允许对指针赋值和拷贝,而且在指针的生命周期内它可以先后指向几个不同的对象. 指针无须在定义时赋初值.

  5. 【Linux】Centos7 安装redis最新稳定版及问题解决

    ------------------------------------------------------------------------------------------------- | ...

  6. 【Linux】配置ssh留下的一些思考和大坑解决办法

    今天传包突然有问题,结果发现是ssh出现了问题,密钥也在里面,都是正常的,但是还有什么问题呢? 后来总结下需要注意点: 1.最开始你要检查.ssh/  这个文件夹的权限,看下权限是否为700或者为75 ...

  7. 基础Markdown语法

    Markdown语法 1.标题 //标题语法 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 一级标题 二级标题 三级标题 四级标题 ...

  8. 使用ogg实现oracle到postgresql表的实时同步

    参考:https://docs.oracle.com/goldengate/c1221/gg-winux/index.html https://blog.51cto.com/hbxztc/188071 ...

  9. 原生js制作表单验证，基本的表单验证方法

    表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...

  10. 全网最全！彻底弄透Java处理GMT/UTC日期时间

    目录 前言 本文提纲 版本约定 正文 Date类型实现 时区/偏移量TimeZone 设置默认时区 让人恼火的夏令时 Date时区无关性 读取字符串为Date类型 SimpleDateFormat格式 ...