Vue中$forceUpdate()的使用方式

目录
  • $forceUpdate()的使用
    • 有两种解决方法
      • 方法一
      • 方法二
  • 关于$forceUpdate的一些理解

$forceUpdate()的使用

在Vue官方文档中指出，$forceUpdate具有强制刷新的作用。

那在vue框架中，如果data中有一个变量:age，修改他，页面会自动更新。

但如果data中的变量为数组或对象，我们直接去给某个对象或数组添加属性，页面是识别不到的

<template>
  <p>{{userInfo.name}}</p>
  <button @click="updateName">修改userInfo</button>
</template>

<script>
  data(){
    return{
      userInfo:{name:'小明'}
    }
  },
  methods:{
    updateName(){
      this.userInfo.name='小红'
    }
  }
</script>

在updateName函数中，我们尝试给userInfo对象修改值，发现页面其实并没有变化

有两种解决方法

方法一

methods:{
  updateName(){
    this.userInfo.name='小红'//在此时，确实已经将userInfo对象修改完成
    console.log(this.userInfo.name);//输出结果: 小红
    this.$forceUpdate();//在这里，强制刷新之后，页面的结果变为'小红'
  }
}

方法二

methods:{
  updateName(){
    this.$set('userInfo',name,'小红');
  }
}

关于$forceUpdate的一些理解

在官方文档上仅仅有这一句话

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

我的理解是，所谓重新渲染，仅仅是指重新渲染DOM并与原有的DOM做code diff。对于有变更的，渲染到页面。结合官方解释，可以确认有两点不会发生：

  • 不会重新触发生命周期钩子函数，比如mounted
  • 不会渲染子组件的更新，即使子组件的props发生改变了。

既然如此，什么场景下会需要使用呢？

我们知道，在Vue中，响应数据发生改变后，会自动触发更新，但有一些条件，不会触发更新，比如数组的一些方法，或者添加data中并未提前定义的响应式数据。

举个例子：

假设有一个列表需要渲染，我们在data中初始化了这个列表，并在mounted函数中通过fill去填充这个数组。fill这个api是不会触发自动更新的。

<template>
  <div class="hello">
    <div>
      <span v-for="(item, index) in arr" :key="index">{{ item }}</span>
    </div>
    <hello-world ref="hello" :list="arr" />
  </div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "About",
  components: {
    HelloWorld,
  },
  data() {
    return {
      arr: Array(4),
    };
  },
  mounted() {
    this.arr.fill(0);
    setTimeout(() => {
      this.$forceUpdate();
    }, 3000);
    setTimeout(() => {
      this.$refs.hello.$forceUpdate();;
    }, 5000);
  },

在上面的示例中，页面会在3秒后才看到更新，子组件会在5秒后看到更新。这也就解释了forceUpdate的含义。

即强制更新因某些原因并未渲染到页面的，已经改变的，应该被渲染到页面的数据。

他所影响的仅仅是【触发render函数生成DOM -> 与原DOM 进行diff -> 更新视图】这个过程。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

    1.$nextTick vm.$nextTick( [callback] ) this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行,在修改数据之后立即使用它,然后等待 DOM 更新.它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上. 应用场景: 1. 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中. 2. 因为在created()钩子函数执行的时候DOM 其实并未

  • 解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）

    问题描述: 在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值: 解决: 运用 this.$forceUpdate()强制刷新 代码案例 <Select v-model="carSafeLine.insuranceName" placeholder="请选择" class="mulisel option-h" filterable clearable :disabled=&quo

  • vue 里面的 $forceUpdate() 强制实例重新渲染操作

    迫使 Vue 实例重新渲染.注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件. 比如v-for里面数据层次太多, 修改过数据变了,页面没有重新渲染,需手动强制刷新. for(...){ ... } this.$forceUpdate(); 补充知识:VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题 页面展示: 实现效果:点击实现列表内容的展开.折叠. 代码: <div class="invoice-lis

  • Vue中$forceUpdate()的使用方式

    Vue中$forceUpdate()的使用方式

    目录 $forceUpdate()的使用 有两种解决方法 方法一 方法二 关于$forceUpdate的一些理解 $forceUpdate()的使用 在Vue官方文档中指出,$forceUpdate具有强制刷新的作用. 那在vue框架中,如果data中有一个变量:age,修改他,页面会自动更新. 但如果data中的变量为数组或对象,我们直接去给某个对象或数组添加属性,页面是识别不到的 <template> <p>{{userInfo.name}}</p> <but

  • vue中 $forceUpdate的使用解析

    目录 方案分析 forceUpdate 本质 实现原理 分析 刷新页面 使用v-if标记 key-changing 在vue的开发过程中,数据的绑定通常来说都不用我们操心,例如在​​data​​中有一个​​msg​​的变量,只要修改它,那么在页面上,​​msg​​的内容就会自动发生变化.但是如果对于一个复杂的对象,例如一个对象数组,直接去给数组上某一个元素增加属性,或者直接把数组的​​length​​变成0,vue可能就无法知道发生了改变.这个其实就是考验对于双向绑定的更进一步的理解应用了.在V

  • jquery在vue脚手架中的使用方式示例

    本文介绍了jquery在vue脚手架中的使用方式示例,分享给大家,具体如下: 1:在各个vue文件中使用 <script> import '../assets/js/jquery-1.10.2.min.js' export default { data() { return { }, watch: { }, created: function() { }, methods: { list() { this.$router.push({ path: 'list' }); }, }, } $(do

  • vue组件间通信六种方式（总结篇）

    前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props. $emit / $on .vuex. $parent / $children . $attrs

  • vue组件传值的实现方式小结【三种方式】

    vue组件传值的实现方式小结【三种方式】

    本文实例讲述了vue组件传值的实现方式.分享给大家供大家参考,具体如下: 前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值 引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示: 下面我们就开始用代码(一言不合就上代码)详细的介绍vue组件传值的三种方式 1.父传子 子组件的代码: <template> <div id="container"&

  • vue prop传值类型检验方式

    prop 传值检验规则 如果是 prop 是静态传值,则必须是 String 类型 如果是 prop 是动态传值,则可以验证任意类型 示例,如果必须要传一个Number,就必须使用 bind //声明 Vue.component("blog-post", { props: { postTitle: { type: Number, default: 10000 } }, template: "<h3>{{ postTitle }}</h3>"

  • 详解Vue的七种传值方式

    1,父传子 子组件中定义props字段,类型为数组(如果需要限制字段值类型,也可以定义为对象的形式).如下图的例子,父组件挂载子组件HelloWorld,在组件标签上给title赋值,子组件HelloWorld定义props,里面有一个值是title,这样子组件就可以使用父组件的值了. 父组件 <template> <div> <HelloWorld :title="msg" /> </div> </template> <

  • 浅谈vue中所有的封装方式总结

    浅谈vue中所有的封装方式总结

    目录 1.封装API 2.注册全局工具组件 3.封装全局函数 4. 为了减少页面代码量的封装 如何确定我需要封装呢? 1.复用,如果觉得以后还会用到 2.你觉得方便,别的地方可能也需要用 3.如果不封装,页面代码臃肿的时候 1.封装API 使用场景:业务中最常见最普通的封装 步骤一: 步骤二:  步骤三:  2.注册全局工具组件 使用场景:想让组件全局可用,尤其是第三方插件使用时 步骤一:   步骤二: 3.封装全局函数 使用场景:有些逻辑处理函数代码量很大,且具有独特功能(如日期处理函数,数组

  • 基于Vue实现自定义组件的方式引入图标

    前言 在项目开发中,使用图标的方式有很多种,可以在iconfont上面找到合适的图标,通过http或者直接下载使用,这里我分享一种通过实现自定义组件的方式引入图标. 搭建环境 这里通过@vue/cli 4.5.13新建项目,并且需要安装依赖svg-sprite-loader,用来处理对应的svg图标,方便我们使用. 安装: npm install --save-dev svg-sprite-loader 配置vue.config.js 在安装svg-sprite-loader后,新建vue.co

随机推荐