vue2 视图层手动更新

已于 2022-12-11 19:47:06 修改
阅读量966 收藏
点赞数 1
分类专栏： vuejs 文章标签： vue.js javascript 前端
于 2022-11-29 20:33:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51666715/article/details/128104593
版权

视图层手动更新

大家众所周知大家都知道vue2实现双向数据绑定的原理吧

vue2实现双向数据绑定的原理

1.vue通过Object.definePropty来劫持各个属性的get和set值
2.然后再结合发布订阅者模式
（1）.定义一个监听器，监听各个属性的变化，如果有变化通知观察者
（2）定义一个观察者，接收到通知更新视图
（3）定义一个解析器,解析各个标签上的指令，当初发了该指令将会初始化该标签上的观察者和绑定的数据，然后实现数据和视图的更新

但是vue2双向数据绑定并不是实时更新视图，也有时候不会实时更新视图
这个时候就可以使用我们的手动实现视图层手动更新
在这里插入图片描述
在this的原型对象上我们可以看到_watcher.run()有这样一个函数属性，使得视图层实时更新

男孩12
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 实现手动刷新组件的方法
12-07
开发过程遇到了一个问题，就是我的 router-view 里面渲染出来的组件输入数据之后，我点击 路由视图外边的导航栏 router-link 按钮，可以实现清除 router-view 里面的数据，也就是使组件重新渲染。vm.$forceUpdate()这个方法可以使当前组件调用这个方法时，重新渲染组件。给 router-view 标签添加 key 属性将 key 绑定的值放在状态管理容器里面，通过 状态管理容器的 mutations 或者 actions 触发 key 值的变化，即可实现重新渲染组件的目的。相关实现代码如下 // store/view.js const state =
vue 触发视图更新
weixin_50196748的博客
03-22 5897
1. Vue.set 可以设置对象或者数组的值, 通过key或数组索引, 可以触发视图更新 语法: Vue.set(target,propertyName/index, value) 参数: {object | Array } target 修改的数组或者对象 {string | number } propertyName/index 修改的对象名或者对应的下标 ...
Vue2源码解析-更新视图
最新发布
weixin_63443072的博客
05-30 217
还是两个文件，一个html，一个js。
Vue 中强制更新视图的几种方式 （不用Vue变异数组情况下）
qq_48046110的博客
07-27 8181
当我们使用vue开发时经常会遇到当vue实例已经创建好了，有时候需要再次给数据赋值时，并不能在视图中改变 在vue文档中写着如果在实例创建之后添加新的属性到实例上，它不会触发视图更新 因此比如我们修改一个数组其中的一个值，或者添加一条数据时，不管用。 方法一：Vue.set() 方法（this.$set（）） Vue.set( target, key, value ) 中有三个参数 target：要更改的数据源(可以是对象或者数组) key：要更改的具体数据 如果是数组 就是索引值 value ：重新赋的值
VUE实现当前页面刷新的七种方法
热门推荐
weixin_40381947的博客
07-18 3万+
需要注意的是，使用该方法会刷新整个页面，包括Vue实例、组件以及其他的页面元素，可能会导致一些不必要的开销，不是最优的解决方案。需要注意的是，该方法会重新加载整个页面，如果想要对页面局部进行刷新，可以考虑使用 Vue 自身的一些特性，比如通过设置组件的 key 属性实现组件的更新，或者通过调用。具体来说，当某个组件的数据发生变化，但是该组件的视图没有及时更新，导致页面没有被正确渲染时，可以在需要刷新的组件中调用。方法可以简单地实现当前页面的刷新，这个方法会重新加载当前页面，类似于用户点击浏览器的刷新按钮。
为什么Vue2中出现data数据刷新但是视图不更新的问题，但是Vue3中没有
Clover ‘s Blog
03-13 1565
为什么Vue2中出现data数据刷新但是视图不更新的问题，但是Vue3中没有
vue开发中，数据更新，但视图不刷新
Quzq11的博客
04-12 2292
因为Vue修改数据是异步执行的,所以视图不会立即更新,会等到下一次dom更新循环结束后统一更新发生在这一次循环中修改的数据,然后同步视图更新,所以我们可以修改后自己手动强制更新视图。我们都知道Object.assign能拷贝合成一个新对象,所以我们只需要将要修改的值合并成一个新对象然后赋值给data中的对象或数组,这样栈的指向被修改了.触发视图更新。在修改值之后将元素销毁,然后在修改后的下一次DOM渲染完成时再显示出来,这样就会触发组件重新加载data的数据进行渲染,data中被修改的数据才是最新的。
VUE实现强制渲染,强制更新
10-16
然而，在某些特定情况下，我们可能需要手动强制Vue组件进行渲染或更新，以确保视图与数据同步。本文将详细讲解如何在Vue中实现强制渲染和强制更新，并探讨何时以及为什么需要这样做。 首先，Vue的响应式系统基于...
Vue2 D3.js demo
03-03
3. **响应式属性**：Vue2提供了响应式系统，当组件的数据发生变化时，视图会自动更新。D3.js的更新模式与Vue的响应式机制相辅相成，使得数据驱动的可视化更加简单。 4. **事件处理**：Vue2提供了一套丰富的事件处理...
vue实现数据控制视图的原理解析
10-15
- **Vue的响应式原理**：主要涉及数据劫持、依赖收集和订阅更新三个步骤，形成数据变化到视图更新的完整链路。 - **计算属性和watch的区别**：计算属性重在自动计算，而watch重在监听和响应变化。 - **Vue中给...
vue2 dev-tools
09-21
安装Vue2 Dev-Tools 扩展时，需要注意的是，它通常只能在Chrome的开发者模式下使用，因为CRX文件（如“nhdogjmejiglipccpnnnanhbledajbpd_6.2.1_chrome.zzzmh.cn.crx”）通常是未签名的，必须通过特定步骤手动添加到...
详解vue修改elementUI的分页组件视图没更新问题
01-22
今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果，结果发现分页组件视图并没有渲染，还是停留在原本的页码处。 然后想了想，想起了.sync这个语法糖，让数据进行双向绑定。 直接上修改的代码看看 &...
vue手动刷新视图以及其他小问题
weixin_43955724的博客
03-30 1929
最近把手头上一个使用angularJS+jquery各种七七八八组件写的页面拿vue+elementUI重写了一边, 真是极度丝滑, 记录一些vue和elementUI的小问题 1.如果vue中的数据结构比较庞大的话, 十分有可能会出现model更新而视图不更新/model和视图都不更新也不报错的情况, 此时需要手动刷新vue的数据, 在change或click事件中, 使用this.$force...
vue2对象和数组视图更新相关
weixin_44824290的博客
09-07 175
vue2对象和数组视图更新相关
Vue2: 数组使用forEach修改，视图不更新的思考
weixin_43932309的博客
12-12 3125
forEach和map方法，对视图更新情况一探究竟
vue 数据更新视图没有更新解决办法
weixin_45799605的博客
05-08 424
vue 数据更新视图没有更新解决办法
vue2视图不更新不渲染问题解决
weixin_44251670的博客
08-27 2309
vue/视图不渲染/vue响应式/坑
vue 数据更新 视图不刷新
CSDNLFF的博客
03-06 384
数据与视图的更新不一致 多层数据嵌套
vue 常见的数据与视图更新问题，this.$nextTick、this.$set
伯伯的博客
10-31 543
vue 常见的数据与视图更新问题，this.$nextTick、this.$set
vue3 视图未更新 如何强制刷新
09-09
在 Vue 3 中，你可以使用 `this.$forceUpdate()` 方法来强制刷新视图。但是需要注意的是，Vue 3 推荐的方式是使用响应式数据来更新视图，而不是手动强制刷新。 如果你发现视图未更新，可能是由于以下原因之一： 1. 数据没有正确地响应式更新：确保你的数据是通过 Vue 的响应式机制进行更新的，例如使用 `this.$set` 或者在 data 中初始化的数据。 2. 视图依赖没有被正确地追踪：Vue 3 引入了 Composition API，你需要在 `setup` 函数中使用 `reactive` 或者 `ref` 来定义响应式数据。同时，确保在模板中使用了正确的依赖关系，以便 Vue 可以追踪到数据的变化。 3. 异步更新导致的问题：有些情况下，Vue 的响应式更新可能会在下一个事件循环中执行，这可能导致视图未能立即更新。你可以尝试使用 `this.$nextTick()` 方法来在 DOM 更新后执行代码。 综上所述，推荐的做法是使用响应式数据和正确的依赖关系来更新视图，而不是直接强制刷新。只有在极少数特殊情况下才应该使用 `this.$forceUpdate()` 方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值