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. LeetCode_Mysql_Second Highest Salary

    176. Second Highest Salary 1. 问题描写叙述: 写一个sql语句从 Employee 表里获取第二高位的工资. 2. 解决思路: 这道题非常easy,就当热身了.首先用ma ...

  2. Delphi中SendMessage使用说明(所有消息说明) good

    Delphi中SendMessage使用说明 SendMessage基础知识 函数功能:该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,直到窗口程序处理完消息再返回.而函数Po ...

  3. Ajax 之 DWR

    DWR是开源框架,类似于hibernate.借助于DWR,开发人员无需具备专业的JavaScript知识就可以轻松实现Ajax,是Ajax更平民化. 添加jar包   dwr.jar   common ...

  4. ‘CONFIG_ENV_SIZE’未声明(不在函数内【转】

    本文转载自: http://bbs.csdn.net/topics/390678466 见论坛讨论.可以临时修复.

  5. hdnoip2017

    T1: 小喵喵有 n 个小鱼干排成一列,其中第 i个小鱼干有两种属性,美味度 ai 和特殊度 bi 现在小喵喵要吃掉一些小鱼干,出于一些原因,小喵喵会吃掉连续的一段区间中的所有小鱼干. 如果吃掉了 [ ...

  6. mysql将查询结果导出csv文件的方法into outfile

    例句: select * from table_name into outfile '/tmp/tmp.csv' fields terminated by ',';   详解: ① into outf ...

  7. Python Matplotlib模块--pyplot

    #-*- coding: utf- -*- ''' numpy.linspace(start, stop, num=50, endpoint=True, retstep=False, dtype=No ...

  8. js中setInterval() 和 setTimeout()

    setInterval() 方法 定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearI ...

  9. PCB 漏加阻抗条的臆想(转)

    阻抗条,我对你是有感情的,这你一定要相信我! 否则,不会在之前的每一次拼板,都不忘拥你入Panel之怀. 自做CAM开始,已记不清我们曾有多少次不期而遇, 我们一同迎接朝阳,送走晚霞,凝望窗外如洗的月 ...

  10. E20171121-sl

    contrast  n. 对比,对照; 差异; 对照物,对立面; [摄] 反差;