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

目录
  • Vue渲染失败原因及解决
    • 一.假设template中
    • 二.因为Vue无法检测到属性的添加和移除
    • 三. 对于数组
  • Vue渲染错误问题
    • Vue 报错
    • 原因
    • 解决

Vue渲染失败原因及解决

在进行数据双向绑定中，常遇到当数据变了，页面却没有同步渲染的情况。

首先Vue 的数据双向绑定原理 是分为

  • 1.observe
  • 2.deps
  • 3.watcher

在observe中，会通过Object.keys()获取所有的属性push一个订阅器 到 deps中，

一.假设template中

我在created的钩子函数中定义了this.a = 1,在btn中添加了事件改变this.a,此时观察到页面未渲染。

<template>
    <div>{{a}}
    <button  @click="fnbtn">点击</button>
    </div>
</template>

原因：Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

解决：

在data中定义属性a,此时点击按钮页面会进行同步渲染。

data(){
    return{
      a:1
    }
},

二.因为Vue无法检测到属性的添加和移除

所以以下操作，页面也没办法同步渲染

<template>
    <div>
      <p v-for="(value,key) in obj">
        {{value}}
      </p>
    <button  @click="fnbtn">点击</button>
    </div>
</template>
data(){
    return{
      obj:{
        a:1,
        b:2
      }
    }
},
fnbtn(){
  this.obj.c = 3
},

解决：

1.在data中obj默认生成定义一个c, obj:{ a:1, b:2,c:' ' }直接渲染的话，会渲染出一个空的dom元素，所以最好在computed中进行下处理

computed:{
  objFilter(){
    let newObj = JSON.parse(JSON.stringify(this.obj))
    for(let key in newObj){
      if(!newObj[key]){
        delete newObj[key]
      }
    }
    return newObj
  }
},

2.上述方式比较麻烦，Vue提供了原生的方法处理 该方法可以向向嵌套对象添加响应式 property。

this.$set(this.obj,'c',3)

3.若是要删除属性b,采用直接 this.obj.b = ' '的方式，但是最好能结合下计算属性的方法避免生成无用的标签。除此之外，Vue采用了另一种方法也可以达到想要的效果

this.obj = Object.assign({}, { a: 1})

相当于重新为obj指向了新的对象，此时查看控制台也没有空的标签产生。

三. 对于数组

当你直接去改变arr[i]的某个值时，并不会触发响应渲染

<p v-for="i in arr">
  {{i}}
</p>
this.arr[0] = 8 //此时数组确实改变了，但是不会触发响应渲染。

原因：

Vue 不能检测以下数组的变动：

  • 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
  • 当你修改数组的长度时，例如：vm.items.length = newLength

解决：

1.采用上述this.$set方法

this.$set(this.arr, 0, 8) //因为数组也可以理解成key为索引的对象 {0:1,1:2,2:3,3:4}

2.采用splice

splice(indexOfItem, 1, newValue)

以下方法操作数组都可触发响应,直接给数组重新赋值也可以触发响应 （this.arr = newArr）

  • 1.push()
  • 2.pop()
  • 3.shift()
  • 4.unshift()
  • 5.splice() 拼接
  • 6.sort() 将…分类
  • 7.reverse() 颠倒 反转

以上就是容易导致渲染出错的几种情况和解决方法，当数据发生改变而页面没有渲染的时候，要分析是数据响应的哪一步出现了问题。

扩展：异步更新（就是当数据发生改变还没有渲染到dom的时候，此时去获取那个dom元素的值是旧的值）

可以用 this.$nextTick(fn(){})来获取新的值

this.$nextTick(fn(){})返回一个Promise对象,所以可以结合async await结合使用

Vue渲染错误问题

Vue 报错

[Vue warn]: Error in render: “TypeError: Cannot read property ‘1’ of undefined”

原因

组件中，使用异步加载数据渲染组件。在组件第一次渲染时，数据对象还没有被赋值，此时组件渲染会因为缺少数据报错。

解决

用v-if控制，在异步拿到数据之前，不渲染该组件。

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

赞 (0)

相关推荐

  • vue路由篇之router-view内容无法渲染出来问题

    vue路由篇之router-view内容无法渲染出来问题

    目录 router-view内容无法渲染出来 Bug记录router-view没有被渲染 起因 排查 错因 router-view内容无法渲染出来 最近在学习vue路由知识,在写到关于 <router-view></router-view>时,内容无法渲染出来,找了许久之后,才发现是一个神坑!!! 配置路由时注意,名字定义为routes 而不是routers 否则你的也内容渲染不出来. Bug记录router-view没有被渲染 起因 在浏览器控制台查看 router-link 的

  • Vue条件渲染与列表渲染

    Vue条件渲染与列表渲染

    目录 一.Vue条件渲染 v-show v-if v-else-if v-else v-if 与 template 小结 二.列表渲染 v-show key的作用 1.虚拟DOM中key的作用 2.对比规则 3.用index作为key可能会引发的问题 4.开发中如何选择key? react.vue中的key有什么作用?(key的内部原理) 一.Vue条件渲染 v-show <!--使用v-show做条件渲染--> <h1 v-show="false">{{nam

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

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

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

  • vue实现动态表单动态渲染组件的方式(2)

    本文实例为大家分享了vue实现动态表单动态渲染组件的方式,供大家参考,具体内容如下 思路 先把所有可能出现的表单/组件写在主页面 每个表单/组件的slot 属性值要与后端返回的表单/组件类型匹配 根据后端返回的数据,动态生成一个slot列表,slot的name属性要与数据的类型匹配,此列表放入一个子组件 在主页面引入子组件,把之前主页面写好的各个表单/组件放入子组件标签中,通过匹配slot插槽去渲染组件,没有匹配到插槽的则不会渲染 案例 //主页面 <template>     <el-

  • vue-cli3.0如何使用prerender-spa-plugin插件预渲染

    目录 如何使用prerender-spa-plugin插件预渲染 预渲染 prerender-spa-plugin尝试 先说一下效果吧 不好用的地方 使用 坑点 如何使用prerender-spa-plugin插件预渲染 vue-cli3.0版本 1.安装 cnpm install prerender-spa-plugin --save 2.vue-config.js中增加 const PrerenderSPAPlugin = require('prerender-spa-plugin'); c

  • vue脚手架配置预渲染及prerender-spa-plugin配置方式

    vue脚手架配置预渲染及prerender-spa-plugin配置方式

    目录 脚手架配置预渲染及prerender-spa-plugin配置 脚手架2.0:(自己的是2.0) 脚手架3.0 (未验证,应该行) 记录vue预渲染prerender-spa-plugin的坑 安装 找到build下的webpack.prod.conf.js 脚手架配置预渲染及prerender-spa-plugin配置 预渲染: 便于seo优化:既查看源码 是 html格式 用到插件: cnpm install prerender-spa-plugin --save 脚手架2.0:(自己

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

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

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

  • java.lang.NullPointerException出现的几种原因及解决方案

    java.lang.NullPointerException出现的几种原因: 1.字符串变量未初始化 2.接口类型的对象没有用具体的类初始化,比如: Map map // 会报错 Map map = new Map(); //则不会报错了 3.当一个对象的值为空时,你没有判断为空的情况. 4.字符串与文字的比较,文字可以是一个字符串或Enum的元素,如下会出现异常 String str = null; if(str.equals("Test")){ //这里的代码将不会被触发,因为会抛

  • 详解vue页面首次加载缓慢原因及解决方案

    第一次打包vue的项目部署到服务器下时,发现初次加载特别的缓慢,将近20s页面才加载出来,完全没有开发环境上的那么流畅.主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大,一次想要全部加载完成会特别的耗时.这里简单总结一下自己用到的一些优化的方案. 首先我们可以安装webpack-bundle-analyzer 插件,通过这个插件我们可以在打包的时候看到打包文件的大小,可以明显的看出哪些文件比较大. 解决方案一 1,去掉编译文件中map文件.在编译好后,我们会看到文件夹下有特别多的.

  • vue 强制组件重新渲染(重置)的两种方案

    数据通过异步操作后,对之前刚加载的数据进行变更后,发现数据不能生效 方案一 当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染.使用 v-if 可以解决这个问题 <template> <third-comp v-if="reFresh"/> </template> <script> export default{ data(){ return { reFresh:true, menuTree:[] } }, watch

  • 项目启动tomcat失败的几种可能原因和解决方法(小结)

    目录 1.java配置路径有问题 2.项目未添加tomcat驱动 3.项目中的web.xml中配置的servlet的名称写错,tomcat无法识别 4.端口被占用 1.java配置路径有问题 请配置好jdk路径,具体参考java路径的配置吧. 2.项目未添加tomcat驱动 (一般提示The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path属于这一类) 解决方法:保证已经装了

  • Vue渲染函数详解

    Vue渲染函数详解

    前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器.本文将详细介绍Vue渲染函数 引入 下面是一个例子,如果要实现类似下面的效果.其中,H标签可替换 <h1> <a name="hello-world" href="#hello-world" rel="external nofol

  • vue渲染时闪烁{{}}的问题及解决方法

    v-if和v-show可能是日常开发中最常用的两个指令,虽然看上去两者功能是类似的,但是两者还是存在很大区别的.  v-if与v-show区别: 在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件.v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做--在条件第一次变为真时才开始局部编译(编译会被缓存起来). 相比之下,

  • vue动态绑定class的几种常用方式小结

    本文实例讲述了vue动态绑定class的几种常用方式.分享给大家供大家参考,具体如下: 对象方法 最简单的绑定(这里的active加不加单引号都可以,以下也一样都能渲染) :class="{ 'active': isActive }" 判断是否绑定一个active :class="{'active':isActive==-1}" 或者 :class="{'active':isActive==index}" 绑定并判断多个 第一种(用逗号隔开) :

  • Vue 权限控制的两种方法(路由验证)

    下面介绍两种权限控制的方法: 路由元信息(meta) 动态加载菜单和路由(addRoutes) 路由元信息(meta) 如果一个网站有不同的角色,比如 管理员 和 普通用户 ,要求不同的角色能访问的页面是不一样的 这个时候我们就可以 把所有的页面都放在路由表里 ,只要 在访问的时候判断一下角色权限 .如果有权限就让访问,没有权限的话就拒绝访问,跳转到404页面 vue-router 在构建路由时提供了元信息 meta 配置接口,我们可以在元信息中添加路由对应的权限,然后在路由守卫中检查相关权限,

  • 解决Layui当中的导航条动态添加后渲染失败的问题

    今天在使用Layui导航条动态添加的时候,发现动态添加后没有办法再次渲染他的效果,原因未知,但是已经解决了,这里利用的方式是将它渲染出来的span.layui-nav-bar样式利用DOM先删除掉再重新渲染,直接贴图看结果 <ul class="layui-nav" id="nav" layui-filter="test"></ul> js代码 $(function () { $.ajax({ url: '/Main/Ge

随机推荐