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. PAT Rational Arithmetic (20)

    题目描写叙述 For two rational numbers, your task is to implement the basic arithmetics, that is, to calcul ...

  2. 开发,从需求出发 &#183; 之二 造飞机的工厂

    CD镇楼~~! 如今.让我们切换到后端开发者的角度看问题.我们须要做的是实现一下这个类,让它返回真实的业务数据. package cn.com.sitefromscrath.service; impo ...

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

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

  4. ZOJ 3964 Yet Another Game of Stones Nim游戏变种

    ZOJ3964 解题思路 此题的题意比较容易理解,可以简单的看着 Nim 博弈的变种.但问题在于 Alice 对第 i 堆石子的取法必须根据 bi 确定.所以如果这个问题能够归结到正常的 Nim 博弈 ...

  5. linux下的C语言开发(静态库/动态库)

    动态链接库不是Linux独有的特性,在windows下面也存在这样的特性.一般来说,windows下面的动态连接库是以*.dll作为结尾的,而linux下面的动态连接库是以*.so结尾的.和静态链接库 ...

  6. nginx开发(四)调用ffmpeg,搭建rtmp直播流。

    1: 修改conf文件,配置rtmp直播 打开usr/local/nginx/conf/nginx.conf,添加红色内容: rtmp {#rtmp点播配置    server {        li ...

  7. vs code 快速生成vue 模板

    vs code 快速生成vue 模板 1.使用快捷Ctrl + Shift + P唤出控制台,然后输入snippets并选择.(或 文件>首选项>用户代码片断里面,输入 vue.json ...

  8. 利用XStream实现对象XML话

    使用Java原生的序列化的方式来表示一个对象.总结一下这种对象表示方式的优缺点: 1.纯粹的Java环境下这种方式可以很好地工作,因为它是Java自带的,也不需要第三方的Jar包的支持 2.多语言环境 ...

  9. 【Java】3到5年开发常见的Java面试题

    一.Java基础和高级 String类为什么是final的. HashMap的源码,实现原理,底层结构. 反射中,Class.forName和classloader的区别 session和cookie ...

  10. vux修改css样式的2种办法

      最近手上有个移动端的项目.前端UI框架是选择的VUX.但是在使用的时候经常会发现框架自带的组件样式和我们要求的不一致.经常需要手动覆盖样式.这里记录下我们使用的2种方法. 我们以XHeader组件 ...