首先要明确几个概念

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. 如何使用 VS Code开发.NET Core应用程序

    Visual Studio Code(VS Code)是Microsoft为Windows,Linux和Mac操作系统开发的免费,跨平台,轻量级的源代码编辑器,它是源代码编辑器,而Visual Stu ...

  2. Oracle 锁表以及解锁

    -- kill_exec 列为解锁的语句,copy出来执行即可.select 'alter system kill session ''' || s.sid || ',' || s.serial# | ...

  3. .net core 和 WPF 开发升讯威在线客服与营销系统：使用 WebSocket 实现访客端通信

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf.shengxunwei.com 注意 ...

  4. AttGAN: Facial Attribute Editing by Only Changing What You Want 论文阅读笔记和AttGan的pytorch代码实现

    1.总体框架 上面的过程用详细描述即是 Test阶段: Train阶段: 由于我们无法得知编辑后的image,所以显而易见人脸属性编辑是一个无监督问题,而对于我们的xa需要获得关于b的属性,故利用at ...

  5. （二）数据源处理4-excel部分封装及数据转换

    excel02.py # -*- coding: utf-8 -*-#@File :excel_oper_02.py#@Auth : wwd#@Time : 2020/12/7 8:16 下午impo ...

  6. InheritableThreadlocal使用问题排查

    背景 在做一个微服务系统的时候,我们的参数一般都是接在通过方法定义来进行传递的,类似这样 public void xxx(Param p, ...){ // do something } 然后这时有个 ...

  7. 【Linux】rsh进程缓慢问题处理

    环境CentOS 6.5 由于项目上线时间很长,服务器持续很久没有关机重启过,随后发现rsh反应特别慢 rsh登陆服务器的反应最慢时候3分钟才可以建立链接,登陆之后查看服务器负载是否正常,查看cpu, ...

  8. [Usaco2008 Nov]Buying Hay 购买干草

    题目描述 约翰的干草库存已经告罄,他打算为奶牛们采购H(1≤H≤50000)磅干草,他知道N(1≤N≤100)个干草公司,现在用1到N给它们编号.第i个公司卖的干草包重量为Pi(1≤Pi≤5000)磅 ...

  9. Nginx的简介和使用nginx实现请求转发

    一.什么是Nginx Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. Nginx功能丰富,可作为H ...

  10. JS获取本机地址，生成地图

    dome代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...