详解vue中$nextTick和$forceUpdate的用法


Posted in Javascript onDecember 11, 2019

1、$nextTick

vm.$nextTick( [callback] )

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行,在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

应用场景:

1、 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。
2、 因为在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将

DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。

在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。

<html>
  <head>
      <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <section>
        <div ref="hello">
         <h1>Hello World ~</h1>
        </div>
        <button type="danger" @click="get">点击</button>
       </section>
     </div>
  </body>
</html>
<script>
new Vue({
 el: '#app',
 methods: {
   get() {
    console.log(0);
   }
  },
  mounted() {
   console.log(333);
   console.log(this.$refs['hello']);
   this.$nextTick(() => {
    console.log(444);
    console.log(this.$refs['hello']);
   });
  },
  created() {
   console.log(111);
   console.log(this.$refs['hello']);
   this.$nextTick(() => {
    console.log(222);
    console.log(this.$refs['hello']);
   });
  }
})
</script>

详解vue中$nextTick和$forceUpdate的用法

可以根据打印的顺序看到,在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作并无作用,而在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象。

<html>
  <head>
      <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <section>
        <h1 ref="hello">{{ value }}</h1>
        <button type="danger" @click="get">点击</button>
       </section>
     </div>
  </body>
</html>
<script>
new Vue({
 el: '#app',
 data() {
   return {
    value: 'Hello World ~'
   };
  },
  methods: {
   get() {
    this.value = '你好啊';
    console.log(this.$refs['hello'].innerText);
    this.$nextTick(() => {
     console.log(this.$refs['hello'].innerText);
    });
   }
  },
  mounted() {
  },
  created() {
  }
})
</script>

详解vue中$nextTick和$forceUpdate的用法

this.$nextTick()在页面交互,尤其是从后台获取数据后重新生成dom对象之后的操作有很大的优势。

2、this.$forceUpdate()

迫使Vue实例重新(rander)渲染虚拟DOM,注意并不是重新加载组件。结合vue的生命周期,调用$forceUpdate后只会触发beforeUpdate和updated这两个钩子函数,不会触发其他的钩子函数。它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件;

应用场景: 当在data里没有显示的声明一个对象的属性,而是之后给该对象添加属性,这种情况vue是检测不到数据变化的,可以使用$forceUpdate()

html:
<span class="test">{{egData.value}}</span>
<el-button @click="changeData">改变</el-button>
 -------------------------------
js:
data(){
 return {
 egData: {}
}
 }
-------------------------------
 
 methods:{
changeData () {
  this.egData.value = 'oldValue'
  this.$forceUpdate() // dom会更新
}
}

但是这种做法并不推荐,官方说如果你现在的场景需要用forceUpdate方法 ,那么99%是你的操作有问题,如上data里不显示声明对象的属性,之后添加属性时正确的做法时用 vm.$set() 方法,所以forceUpdate请慎用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之四
Jul 05 Javascript
JavaScript中实现块作用域的方法
Apr 01 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
基于jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现可编辑的表格
Dec 11 #jQuery
vue element自定义表单验证请求后端接口验证
Dec 11 #Javascript
详解如何在JS代码中消灭for循环
Dec 11 #Javascript
Angular封装表单控件及思想总结
Dec 11 #Javascript
小程序接口的promise化的实现方法
Dec 11 #Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 #Javascript
You might like
php 购物车实例(申精)
2009/05/11 PHP
.htaccess文件保护实例讲解
2011/02/06 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
javascript 写类方式之二
2009/07/05 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python匿名函数用法实例分析
2019/08/03 Python
python实现车牌识别的示例代码
2019/08/05 Python
python读取mysql数据绘制条形图
2020/03/25 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
三年大学自我鉴定
2014/01/16 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
幼师求职自荐信
2015/03/26 职场文书
地道战观后感500字
2015/06/04 职场文书
歌舞青春观后感
2015/06/10 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python