详解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 相关文章推荐
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
基于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超级全局变量数组小结
2012/10/04 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
微信小程序调用后台service教程详解
2020/11/06 Javascript
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
如何给Python代码进行加密
2020/01/10 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
教师自我鉴定范文
2013/11/10 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
Java字符串逆序方法详情
2022/03/21 Java/Android
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers