vue更新数据却不渲染页面的解决

目录
  • vue更新数据却不渲染页面
    • 1.Vue不能检测通过数组索引直接修改一个数组项
    • 2.选择功能选中时赋值了,但没渲染页面
    • 3.路由参数变化时
    • 4.在异步更新执行之前操作DOM数据不会变化
    • 5.获取后台返回的数组进行排序处理了,页面内容却不排序
  • vue页面的渲染过程
    • vue加载时文件的执行顺序
    • vue内部页面的执行顺序
    • vue中各选项及钩子函数执行顺序

vue更新数据却不渲染页面

1.Vue不能检测通过数组索引直接修改一个数组项

原因：由于JavaScript的限制，Vue不能检测数组和对象的变化

解决办法：

this.$set(arr,index,newVal)

2.选择功能选中时赋值了,但没渲染页面

场景：

 

点击这个没有显示“√”

解决办法：

checkClick (item) {
    item.check =! item.check;
    this.$forceUpdate()
},

听说循环数据更新的层级太深，导致数据不更新，从而导致视图不更新，用上面可以解决，但我没遇到过这种情况，请查看Vue.js官方

3.路由参数变化时

页面不更新，本质上就是数据没有更新

原因：路由视图组件引用了相同组件时，当路由参数变化时，会导致该组件无法更新。

解决办法：

通过watch监听$route的变化

watch: {
    '$route': function() {

     }
}

4.在异步更新执行之前操作DOM数据不会变化

原因：Vue在更新DOM时是异步执行。

只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一个事件循环中发生的所有数据变更。

如果同一个 watcher 被多次触发，只会被推入到队列中一次。

这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。

然后，在下一个的事件循环“nextTick”中，Vue 刷新队列并执行实际 (已去重的) 工作。

解决办法：

this.$nextTick(function(){ })

5.获取后台返回的数组进行排序处理了,页面内容却不排序

原因：显示的元素不会动

解决办法：

使用v-if先隐藏元素，更新的数组排序处理好了，才显示元素

vue页面的渲染过程

首先vue会找到webpack的打包配置文件。在build/webpack.base.conf.js下：在这里，定义了vue的程序入口文件

vue加载时文件的执行顺序

  • 执行index.html文件
  • 执行main.js文件
  • main.js挂载了app.vue文件，用app.vue的templete替换index.html中的
  • main.js中注入了路由文件，将对应的组件渲染到router-view中
  • router-view中加载Layout文件
  • Layout 加载Navbar, Sidebar, AppMain

vue内部页面的执行顺序

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。但是模板毕竟是模板，不是真实的dom节点。从模板到真实dom节点还需要经过一些步骤

  • 把模板编译为render函数
  • 实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom
  • 对比虚拟dom，渲染到真实dom

组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟dom, 返回到步骤3

一. 模板到render

// App.vue
<template>
    <div>
        hello word
    </div>
</template>
<script>
export default {
}
</script>
<style>
</style>

vue中各选项及钩子函数执行顺序

在页面首次加载执行顺序有如下：

  • beforeCreate //在实例初始化之后、创建之前执行
  • created //实例创建后执行
  • beforeMounted //在挂载开始之前调用
  • filters //挂载前加载过滤器
  • computed //计算属性
  • directives-bind //只调用一次，在指令第一次绑定到元素时调用
  • directives-inserted //被绑定元素插入父节点时调用
  • activated //keek-alive组件被激活时调用，则在keep-alive包裹的嵌套的子组件中触发
  • mounted //挂载完成后调用
  • {{}} //mustache表达式渲染页面

修改页面input时，被自动调用的选项顺序如下：

  • watch //首先先监听到了改变事件
  • filters //过滤器没有添加在该input元素上，但是也被调用了
  • beforeUpdate //数据更新时调用，发生在虚拟dom打补丁前
  • directived-update //指令所在的组件的vNode更新时调用，但可能发生在其子vNode更新前
  • directives-componentUpdated //指令所在的组件的vNode及其子组件的vNode全部更新后调用updated //组件dom已经更新

组件销毁时，执行顺序如下：

  • beforeDestroy //实例销毁之前调用
  • directives-unbind //指令与元素解绑时调用，只调用一次
  • deactivated //keep-alive组件停用时调用
  • destroyed //实例销毁之后调用

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

赞 (0)

相关推荐

  • Vue渲染失败的几种原因及解决方案

    Vue渲染失败的几种原因及解决方案

    目录 Vue渲染失败原因及解决 一.假设template中 二.因为Vue无法检测到属性的添加和移除 三. 对于数组 Vue渲染错误问题 Vue 报错 原因 解决 Vue渲染失败原因及解决 在进行数据双向绑定中,常遇到当数据变了,页面却没有同步渲染的情况. 首先Vue 的数据双向绑定原理 是分为 1.observe 2.deps 3.watcher 在observe中,会通过Object.keys()获取所有的属性push一个订阅器 到 deps中, 一.假设template中 我在create

  • vue 使用print-js 打印渲染不出来问题

    目录 使用print-js 打印渲染不出来 vue中printjs使用指南 使用攻略 参数 使用print-js 打印渲染不出来 vue 使用print-js  打印渲染不出来, 实际数据已经加载出来了. 遇到这问题,解决方向 1.是否是数据未赋值上 2.打印加载js是否渲染上 所以:在vue中可以使用id的形式和ref的形式进行绑定,如果id绑定渲染不成功的话可以尝试 <div id="printDiv"  ref="printDiv"/> this.

  • vue 获取到数据但却渲染不到页面上的解决方法

    能获取到数据 数据却渲染不到页面上 问题描述: 我数据全部拿到了,js 里面写 console.log( musics ) 数据打印出来都正确,但是页面里面就是不显示. 很多时候对数据进行处理了,但是页面上就是没变化,没效果,用 console.log 打印数据都没问题,特别是数组.对象容易出现这个问题: 1. this.$set( xxx ) 保存变量 2.this.$forceUpdate( xxx ) 强制更新,迫使 Vue 实例重新渲染.注意它仅仅影响实例本身和插入插槽内容的子组件,而不

  • vue更新数据却不渲染页面的解决

    目录 vue更新数据却不渲染页面 1.Vue不能检测通过数组索引直接修改一个数组项 2.选择功能选中时赋值了,但没渲染页面 3.路由参数变化时 4.在异步更新执行之前操作DOM数据不会变化 5.获取后台返回的数组进行排序处理了,页面内容却不排序 vue页面的渲染过程 vue加载时文件的执行顺序 vue内部页面的执行顺序 vue中各选项及钩子函数执行顺序 vue更新数据却不渲染页面 1.Vue不能检测通过数组索引直接修改一个数组项 原因:由于JavaScript的限制,Vue不能检测数组和对象的变

  • vue中数据不响应的问题及解决

    目录 vue数据不响应问题 vue数据响应不及时问题 vue数据不响应问题 将本来要新增的属性提前在data中定义好 我可以提前在userInfo里面定义好,这样就不是新增属性了,就像下面这样 data() {     return {       userInfo: {         name: '子君',         sex: '男',         // 我先提前定义好         officialAccount: ''       }     }   } 直接替换掉userI

  • Vue查询数据并通过bootstarp table渲染数据

    Vue查询数据并通过bootstarp table渲染数据

    需求 把页面进行改造把apptoken,appkey列隐藏,并且更改该列为企业秘钥,列下显示查看公司秘钥 如图: 点击按钮显示当前的企业秘钥: 1.需求分析和步骤: 1.首先改造JS代码: 首先把数据要渲染的visible设置为true需要的设置false, 主要的formatter: actionFormatter这个用于:格式化输出函数及其他 //操作栏的格式化 function actionFormatter(value, row, index) { console.log("列"

  • vue大数据表格卡顿问题的完美解决方案

    前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系统和浏览器,方便我后续优化,谢谢 先看一下效果,一共1000 X 100 = 10W个单元格基本感受不到卡顿,而且每个单元格点击可以编辑,支持固定头和固定列 项目源代码地址 Github (本地下载) 解决问题核心点:横向滚动加载,竖向滚动加载 项目背景 笔者最

  • Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法

    1. 引入jquery和vue.js <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"

  • 解决vue组件渲染没更新数据问题

    目录 问题: 现象: 原因 解决步骤 问题: 使用前端日期控件时 - 数据联动时数据绑定无效问题 现象: 选择A日期,想动态改变B日期数据,只有第一次选择时会动态改变B日期数据,第二次选择A日期时,B日期数据虽已改变,但是页面数据未改变 例如我要点击留样日期,销毁日期就得默认设置为留样日期之后的三个月,只有第一次点击,效果能正常显示,但是第二次点击,销毁日期就不会更新了… 原因 前端组件没有重新加载,一直保持旧数据 解决步骤 使用标志位让组件每次更改刷新一次 一.前端组件绑定点击事件 二.新增一

  • 浅谈vue异步数据影响页面渲染

    今天遇到一个问题,要保证页面渲染前请求的数据已经得到了 由于user是在异步请求之后保存在session中,而在页面渲染时session中还没有user,页面直接报错. 因此我希望能在所有请求都得到后再去做页面的渲染. 1.先把id为app的div用v-if="appShow",定义appShow为false进行隐藏,避免渲染 2.写计数器,每1ms进行一次查询,如果session中已经有user,删除过滤器,移除滤布,appShow为true,开始渲染页面,这样可以保证页面的正常渲染

  • vue 刷新之后 嵌套路由不变 重新渲染页面的方法

    解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1.在router-view中加上条件渲染 v-if 默认为true.让它显示出来 2.写写一个reload方法,在页面刷新只有,点击某个查询条件的时候调用这个重载的方法 这是条件渲染变化了为false 在修改数据之后使用 $nextTick, 条件渲染变化了为true 则可以在回调中获取更新后的 DOM 如果需要带有查询参数,可以用编程试导航,query来传参,但是这种方式可能刷新之后会有问题. 我的解决方法是在刷新之后点击页面

  • vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作

    vuex数据改变,组件中页面不渲染 相信许多vuex新手都会遇到这样的问题: vuex数据更新后,插件中使用数据的地方没有更新 这样的代码 data() { return { tableData: this.$store.state.AdminInfo }; } 然后在 template 中使用 tableData <el-table :data="tableData" class="tablePst"> <el-table-column labe

随机推荐