当data中的某个属性改变的时候，这个值并不是立即渲染到页面上，而是先放到watcher队列上（异步），只有当前任务空闲的时候才会去执行watcher队列上的任务。所以导致，改变的数据挂载到dom上会有一定的延迟，这也就导致了，当我们在改变属性值的时候，立即通过dom去拿改变的值时发现拿到的值并不是改变的值，而是之前的值。

this.$nextTick作用：在下次dom更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获得更新后的dom

this.$nextTick()作用的更多相关文章

  1. Vue-----this.$nextTick()

    Vue-----this.$nextTick() $nextTick Vue.nextTick()是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中 ...

  2. Vue.js 面试题整理

    Vue项目结构介绍 build 文件夹:用于存放 webpack 相关配置和脚本. config 文件夹:主要存放配置文件,比如配置开发环境的端口号.开启热加载或开启gzip压缩等. dist 文件夹 ...

  3. Vue.js面试整理

    Vue项目结构介绍 build 文件夹:用于存放 webpack 相关配置和脚本. config 文件夹:主要存放配置文件,比如配置开发环境的端口号.开启热加载或开启gzip压缩等. dist 文件夹 ...

  4. 整理Vue.js 面试题

    Vue.js 面试题整理   Vue项目结构介绍 build 文件夹:用于存放 webpack 相关配置和脚本. config 文件夹:主要存放配置文件,比如配置开发环境的端口号.开启热加载或开启gz ...

  5. better-scroll 的使用

    1.安装 cnpm install better-scroll --save 2.引入 import BScroll from "better-scroll"; 3.初始化 dat ...

  6. 三本毕业（非科班），四次阿里巴巴面试，终拿 offer（大厂面经）

    作者:gauseen 原文:https://github.com/gauseen/blog 公众号:「学前端」,只搞技术不搞广告文,欢迎关注~ 第一次 20:00 电话一面 - 自我介绍 - 对公司工 ...

  7. 前端经典面试题vue面试题

    1.什么是MVVM? MVVM是一种设计思想. Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑: View 代表UI 组件,它负责将数据模型转化成UI 展现出来,View ...

  8. 理解 $nextTick 的作用

    有同学在看 Vue 官方文档时,对 API 文档中的 Vue.nextTick 和 vm.$nextTick 的作用不太理解. 其实如果看一下深入响应式原理 - vue.js中的有关内容,可能会有所理 ...

  9. $nextTick 的作用

    文档:深入响应式原理 Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新. $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据 ...

随机推荐

  1. Mysql 更新时间（加上或者减去一段时间）

    Mysql时间加减函数为date_add().date_sub() 定义和用法 DATE_ADD() 函数向日期添加指定的时间间隔. DATE_SUB() 函数向日期减少指定的时间间隔. 语法 DAT ...

  2. mysql将查询结果导出

    一.首先确认当前数据库设置导出是允许的 show variables like '%secure%'; 如果是null则代表不允许,这时可以用命令修改,或者直接修改数据库配置文件my.ini,在其中添 ...

  3. C# 抽象类和接口的差别

    抽象类和接口最终目的:抽象类实现多态化,接口实现功能化.比如汽车:接口就是轮子,发动机,车身等零部件,抽象类则是颜色,款式,型号等参数性东西. 抽象类(abstract): (1) 抽象方法只作声明, ...

  4. line-height:150%与line-height:1.5的区别

    今天看到一篇文章,说的是CSS学习中的瓶颈,我最近也发现自己css很薄弱,写的样式总是有兼容性问题,要写很久,发现了一个问题,我从来没有用过line-height:150和line-height:1. ...

  5. 小程序getLocation出现的各种问题汇总

    1.小程序无法弹出授权位置的弹框: 需要在app.json中增加相关配置文件: "permission": { "scope.userLocation": { ...

  6. 浙江省住房和城乡建设厅 http://www.zjjs.com.cn/ 漏洞提示

    http://220.189.211.52/zjjsgbxx/FileAttach/96dcdf11-c45e-4455-a443-f6dea8a44e23.html 可以下载,浏览 改修,

  7. C++ DWORD 转byte char 数组、指针

    C++ DWORD 转byte char 数组.指针 byte byteData[1024]; // byte数组,示例 DWORD dwData = dwReadBytes; // dword数据, ...

  8. AngularJs在ng-click函数中获取代表当前元素的DOM对象

    html代码 <div ng-click="test($event)">111</div> Controllers.js $scope.test= func ...

  9. 【转】依赖注入的威力，.NET Core的魅力：解决MVC视图中的中文被html编码的问题

    有园友在博问中提了这样一个问题 —— .NET Core 中文等非英文文字html编码输出问题,到我们的 ASP.NET Core 项目中一看,也是同样的问题. 比如下面的Razor视图代码: @{ ...

  10. Monkey 生成报告方法

    Monkey 命令简介 Monkey 是 SDK 中附带的一个小工具,用来进行压力测试.进行压力测试之前,首先要进行安装 SDK ,并配置环境变量: 1.安装 Java JDK 并配置环境变量(计算机 ...