Vue.nextTick()是比较常用到的API

　　　Vue官网对它的解释是：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

　　　首先要明白Vue的响应式原理（官网有详细的解释）：在data选项里所有属性都会被watch监控，当修改了data的某一个值，并不会立即反应到视图中。vue将你对data的更改放到watcher的一个对列中（异步），只有在当前任务空闲时才会去执行watcher队列任务。这就有一个延迟时间了（我们看起来是直接反映到视图的，其实并不是！！，只是浏览器引擎在很短的时间内就比较完了数据的前后差异并更新到视图里）。官网有个很清晰的例子：

　　　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        <example></example>

    </div>

</body>

<script>

        Vue.component('example', {

              template: '<span>{{ message }}</span>',

              data: function () {

                return {

                      message: '没有更新'

                }

              },

          mounted () {

              this.updateMessage();

          },

        methods: {

            updateMessage: function () {

              this.message = '更新完成'

              console.log(this.$el.textContent) // => '没有更新'

              this.$nextTick(function () {

                console.log(this.$el.textContent) // => '更新完成'

              })

            }

          }

        })

        new Vue({

            el:'#app'

        })

    </script>

</html>

　　在视图上最终显示 更新完成，但在控制台console.log就不一样了

　　

　　在updateMessage函数里改变了msg的值（异步），下一步打印 msg （同步）  可以看出 打印的是‘没有更新’   【注意：改变data的某个值，再立即引用，是经常犯的一个错误】，为了规避这个错误，就有了nextTick( ) ,现在再结合官网的那两句话，是不是清晰很多呢？ 视图更新完了就调用nextTick(),此时数据也就更新完了而且插到视图。

　　那什么场景需要使用到nextTick( ) 呢？

　　　　

　　　　　　待续。。。。。。。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2017-06-28  00：31

　　　　

Vue--Vue.nextTick()的使用的更多相关文章

  1. vue中nextTick

    vue中nextTick可以拿到更新后的DOM元素 如果在mounted下不能准确拿到DOM元素,可以使用nextTick 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue ...

  2. vue的nextTick的实现

    vue的nextTick是用浏览器支持的方法模拟nodejs的process.nextTick 老版本的vue用如下方法来模拟 Promise.thenMutationObserver(Mutatio ...

  3. Vue中nextTick()解析

    最近,在开发的时候遇到一个问题,让我对vue中nextTick()的用法加深了了解- 下面是在组件中引用的一个拖拽的组件: <vue-draggable-resizable class=&quo ...

  4. Vue之nextTick()

    我们有时候操作 DOM,是想在 data 数据变更的时候进行操作. 那么,我们应该怎么做呢? index.html <!DOCTYPE html> <html lang=" ...

  5. Vue的nextTick是什么？

    公司做之前项目的时候,遇到了一些比较困惑的问题,后来研究明白了nextTick的用法. 我们先看两种情况: 第一种: export default { data () { return { msg: ...

  6. 【vue】nextTick源码解析

    1.整体入手 阅读代码和画画是一样的,忌讳一开始就从细节下手(比如一行一行读),我们先将细节代码折叠起来,整体观察nextTick源码的几大块. 折叠后代码如下图 整体观察代码结构 上图中,可以看到: ...

  7. Vue中$nextTick的理解

    Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...

  8. 基于源码分析Vue的nextTick

    摘要:本文通过结合官方文档.源码和其他文章整理后,对Vue的nextTick做深入解析.理解本文最好有浏览器事件循环的基础,建议先阅读上文<事件循环Event loop到底是什么>. 一. ...

  9. vue 2.0源码学习笔记—new Vue ( Vue 初始化过程 )

    new Vue(Vue 初始化) 一个vue实例化到底经历了什么?已下是博主自己的总结,不正确的地方请指出,谢谢~ 一.简述 从使用角度来看,挂载的顺序如下 1. $slots 2. $scopedS ...

  10. Javascript - Vue - vue对象

    vue提供了一整套前端解决方案,可以提升企业开发效率 vue的处理过程 app.js 项目入口,所有请求最先进入此模块进行处理 route.js 由app.js调用,处理路由的分发 controlle ...

随机推荐

  1. python 线程 进程 协程 学习

    转载自大神博客:http://www.cnblogs.com/aylin/p/5601969.html 仅供学习使用···· python 线程与进程简介 进程与线程的历史 我们都知道计算机是由硬件和 ...

  2. JAVA学习调查问卷——20145101

    1.你对自己的未来有什么规划?做了哪些准备? 我希望在未来不管自己是否从事机要工作,都要做一个有能力,对社会能有所贡献的人.所以在现阶段我应该努力学习基础知识,夯实基本功,具备成为合格机要人的素质. ...

  3. 20145105 《Java程序设计》第10周学习总结

    20145105 <Java程序设计>第10周学习总结 教材学习内容总结 JAVA网络编程 一.网络概述 (一)计算机网络概述 网络编程的实质就是两个(或多个)设备(例如计算机)之间的数据 ...

  4. 20145106 《Java程序设计》第10周学习总结

    教材学习内容总结 什么是计算机网络? 计算机网络,是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在网络操作系统,网络管理软件及网络通信协议的管理和协调下,实现资源共享 ...

  5. 20145206邹京儒MSF基础应用

    20145206邹京儒MSF基础应用 一.MS08_067漏洞渗透攻击实践 实验前准备 1.两台虚拟机,其中一台为kali,一台为windows xp sp3(英文版). 2.在VMware中设置两台 ...

  6. 文件IO和标准IO的区别【转】

    一.先来了解下什么是文件I/O和标准I/O: 文件I/O:文件I/O称之为不带缓存的IO(unbuffered I/O).不带缓存指的是每个read,write都调用内核中的一个系统调用.也就是一般所 ...

  7. MAC下BurpSuit社区版升级pro版

    环境OSX 步骤1. 官网下载社区版v1.7.32https://portswigger.net/burp/communitydownload 安装 2. 下载keygenhttps://down.5 ...

  8. 【SVN】Linux搭建SVN服务

    1.yum安装svn yum install -y subversion 日志打印 Loaded plugins: fastestmirror Determining fastest mirrors ...

  9. [Pytorch]Pytorch中图像的基本操作(TenCrop)

    转自:https://www.jianshu.com/p/73686691cf13 下面是几种常写的方式 第一种方式 normalize = transforms.Normalize([0.485, ...

  10. YOLOv1-darknet 内容解析

    目录 YOLOv1-darknet 内容解析 1. 核心思想 2. 特点 3. 缺点 4. 算法流程 5. 详细内容 6. 主要参考 YOLOv1-darknet 内容解析 1. 核心思想 目标检测分 ...