1、组件内部,属性值地址空间内引用地址改变,DOM不能渲染。

问题举例:this.items = [[],[],[],[]]

1、在items 中,修改任意一项数组中的值,DOM是不会更新的,
2、解决方案: this.items = [...this.items]。通过解构赋值,重新给items赋值。
2、组件之间传值,父组件传data改变,子组件未更新。

1、子组件中在mounted中对父组件传的值,进行了判断等相关处理,通过改变子组件自身定义的状态实现效果。

此时,父组件值更新,子组件不重新渲染,是因为,父组件值改变子组件不会走mounted的生命周期。

处理方案:
使用watch监听父组件传的值,当值改变的时候,进行对应操作。
2、推荐使用:
子组件中直接使用父组件传的值,如需类型转换或者简单判断,直接通过三目运算符判断使用,就省去了对 父组件传值的监听步骤。

vue(数据改变,DOM不渲染问题)的更多相关文章

  1. vue 数据改变但是视图没更新

    在使用过程中会出现数据改变但是视图没有更新的情况(类型数组或者对象),这里我们就需要用到 $set 如果是对象类型: this.$set(this.userInfo, 'name', 'gionlee ...

  2. vuetify.js框架 下拉框数据改变DOM原数据未清除

    今天遇到一个奇怪的bug 需求很简单,就是将“引擎能力”下拉框选中的值作为筛选条件传入到“样本类型”下拉框中,默认“样本类型”下拉框显示所有样本类型 看图: 如图所示,功能很简单. 其实还是对vuet ...

  3. vue数据修改 但未渲染页面

    1. 普通的 `1.1 this.$set('obj',key,value); 1.2 this.splice(); 2.数据层次太多,没有触发render函数进行自动更新,需手动调用: this.$ ...

  4. vue中的dom基本渲染

    一.输出动态标签请只对可信内容使用HTML插值,绝不要对用户提供的内容使用插值,容易导致xss攻击. <div id="J_app"> <div v-html=& ...

  5. problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题

    问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...

  6. vue中改变数组或对象,页面没做出对应的渲染

    原文链接 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sor ...

  7. Vue源码探究-虚拟DOM的渲染

    Vue源码探究-虚拟DOM的渲染 在虚拟节点的实现一篇中,除了知道了 VNode 类的实现之外,还简要地整理了一下DOM渲染的路径.在这一篇中,主要来分析一下两条路径的具体实现代码. 按照创建 Vue ...

  8. vue父组件数据改变,子组件数据并未发生改变(那是因为你没写监听)附带子组件的写法

    下面的代码有 父组件有三个按钮,年.月.日 点击之后父组件的数据发生改变,子组件却没改变,打印接受的数据,除了第一次其他都没打印,那是因为你没有写监听 <template> <div ...

  9. Vue中 等待DOM或者数据完成 在执行 --this.$nextTick()

    虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 Vue 完成更新 DO ...

随机推荐

  1. [DLX反复覆盖] poj 1084 Square Destroyer

    题意: n*n的矩形阵(n<=5),由2*n*(n+1)根火柴构成,那么当中会有非常多诸如边长为1,为2...为n的正方形,如今能够拿走一些火柴,那么就会有一些正方形被破坏掉. 求在已经拿走一些 ...

  2. Android学习笔记-保存数据的实现方法1

    Android开发中,有时候我们需要对信息进行保存,那么今天就来介绍一下,保存文件到内存,以及SD卡的一些操作,及方法,供参考. 第一种,保存数据到内存中: //java开发中的保存数据的方式 pub ...

  3. HDU 5979 Convex【计算几何】 (2016ACM/ICPC亚洲区大连站)

    Convex Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Subm ...

  4. rabbitmq最大连接数(Socket Descriptors)

    RabbitMQ自带了显示能够接受的最大连接数,有2种比较直观的方式:1. rabbitmqctl命令. 1 2 3 4 5 6 7 8 9 10 11 12 <span style=" ...

  5. Linux Centos 下安装软件 三种方式

    1)一种是软件的源代码,您需要自己动手编译它.这种软件安装包通常是用gzip压缩过的tar包(后缀为.tar.gz). 2)另一种是软件的可执行程序,你只要安装它就可以了.这种软件安装包通常被是一个R ...

  6. 利用 BASE64Encoder 对字符串进行加密 BASE64Decoder进行解密

    转自:https://blog.csdn.net/chenyongtu110/article/details/51694323

  7. E20170528-ts

    partial   adj. 部分的; 偏爱的; 偏袒的; 钟爱的; form   n. 表格; 方式; 形状,形式; 外形 annotate   vt. 注解,注释; n. 注释者; annotat ...

  8. Linux 用户管理(2)

    Linux 用户管理2 添加修改和删除用户,必须是超级管理员root账号才可以进行的操作,所以当当前账号不是超级管理员root账号时,首先要先切换为root账号. 如图,ylq为普通用户,执行添加用户 ...

  9. Akka源码分析-Akka-Streams-GraphStage

    上一篇博客中我们介绍了ActorMaterializer的一小部分源码,其实分析的还是非常简单的,只是初窥了Materializer最基本的初始化过程及其涉及的基本概念.我们知道在materializ ...

  10. Linux学习笔记之Linux shell脚本运行出现问题:bash: ./test: bin/sh: bad interpreter: No such file or directory

    问题: 在Linux系统中使用“vi test.sh”命令创建.sh文件,保存文件(:wq)并赋予权限(chmod +x test.sh)后,执行(./test.sh),出现问题:“bash: ./t ...