vue 数据改变视图没有刷新

marek 发布于2019-08-22 15:02 / 1504人阅读

摘要：最近在用做项目的时候，经常遇到一个问题，当数据改变之后，视图却没有刷新，下面我就总结一下我在开发过程中遇到的几种视图无法刷新的情况，不一定全面为了方便演示，我们来创建一个最最简单的。

最近在用Vue做项目的时候，经常遇到一个问题，当数据改变之后，视图却没有刷新，下面我就总结一下我在开发过程中遇到的几种视图无法刷新的情况，不一定全面~！为了方便演示，我们来创建一个最最简单的demo。

//html


//js
var app = new Vue({
     el:"#test",
     data:{
          msg:"Vue大法好！"
     }
});

一、直接用索引值改变数组的某个值，或者直接改变数组的长度

问题描述：有关于数组的改变而引发的视图刷新应该是最常见的问题了，在Vue官方文档中提到，由于 JavaScript 的限制，当你利用索引直接设置一个项，或者直接改变数组的长度时，Vue将不会检测到数据的变化。

像上图的两种写法，将无法刷新视图，只有使用文档中列出来的数组方法，才能实现数据的改变，包括push()、pop()、shift()、unshift()、splice()、reverse()、sort()。其实这些列出来的数组的方都是能改变原数组的，所以能够被watcher监测到，从而引发视图的重新渲染，原理相同，这边就不一一的测试啦~列出下面一个作为参考:

那么如果只想要改变数组中某一个数据的值，可以使用的方法有两种：
1、使用splice()方法，删除并替换原数组中的值
2、使用Vue提供的set方法

云服务器 GPU云服务器 js 保存数据刷新不改变刷新视图 html5无刷新改变url 查询视图数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93103.html

vue改变数据视图刷新问题

摘要：视图不更新有几个原因根属性不存在，而想要直接给根属性赋值导致的视图不更新。只有通过以下几个方法更新数组才能检测到数组更新。如果想直接通过下标修改数组的话，就需要使用方法来通知你更新了这个数组。视图不更新有几个原因： 1、根属性不存在，而想要直接给根属性赋值导致的视图不更新。此时初始化属性的时候给根属性初始化一个空值就可以了。 2、只有通过以下几个方法更新数组 push()pop()s...

SimpleTriangle 2019-08-23 13:47 评论0 收藏0
vue 起步

摘要：的二大核心响应式数据变化当视图发生改变，数据自动更新。组合的视图组件页面映射为组件树划分组件可复用利于维护。正在不断的学习中希望各位指点错误，一起讨论，一起进步，后续更新中 Vue是一套用于构建用户界面的渐进式框架，Vue的核心库只关注视图层，不仅容易上手，还便于与第三方库既有项目整合，相互独立而又可以任意整合。 showImg(https://segmentfault.com/img...

hyuan 2019-08-26 11:49 评论0 收藏0
学习MVVM及框架的双向绑定笔记

摘要：的数据劫持版本内部使用了来实现数据与视图的双向绑定，体现在对数据的读写处理过程中。这样就形成了数据的双向绑定。 MVVM由以下三个内容组成 View：视图模板 Model：数据模型 ViewModel：作为桥梁负责沟通View和Model，自动渲染模板在JQuery时期，如果需要刷新UI时，需要先取到对应的DOM再更新UI，这样数据和业务的逻辑就和页面有强耦合。在MVVM中，U...

VioletJack 2019-08-23 15:04 评论0 收藏0
利用 JavaScript 数据绑定实现一个简单的 MVVM 库

摘要：和刷新函数是一对多的关系，即一个可以有任意多个处理它的回调函数刷新函数，比如和两个指令共用一个数据模型字段。添加数据订阅实现方式为建立缓存回调函数的数组缓存回调函数当数据模型的字段发生改变时，就会触发缓存数组中订阅了的所有回调。 MVVM 是 Web 前端一种非常流行的开发模式，利用 MVVM 可以使我们的代码更专注于处理业务逻辑而不是去关心 DOM 操作。目前著名的 MVVM 框架有...

hzx 2019-08-19 18:00 评论0 收藏0
Vue全局API总结

摘要：带图原文链接地址用于创建一个子类用来挂载在下次更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的。而则是在引入组件之后，则是将组件内部的内容如等方法等属性与父组件相应内容进行合并。只在独立构建时有效带图原文链接地址：http://www.cnblogs.com/douyae...1.extend用于创建一个子类Vue,用$mount来挂载 con...

lemon 2019-08-01 17:46 评论0 收藏0