vue中我改变了data中的一个值,但现在视图上没有实时更新,请问我怎么拿到更新后的值?

摘要:
另一种情况是,您可以直接对数组的下标进行操作,而无需dom更新。事实上,vue重新定义了数组的push、pop、unshift、shift、split、sort和reverse方法。如果使用这些方法对数组进行操作,则可以听到数据的变化。另一种方式是在装载dom之前更改数据。例如,数组需要放置在容器中进行渲染,但容器尚未装入。因此,无法找到dom。在这种情况下,您需要使用$nextTick。
  • Vue在数据初始化的时候会对data,computed,watcher中的属性进行依赖收集,如果支持proxy,则直接使用proxy进行拦截,好处是可以深层次的进行拦截,如果不支持proxy,则使用object.defineProperty来进行数据拦截依赖收集。但是object.defineProperty无法做到深层次的监听,所以对属性进行递归算法去实现依赖收集,如果在初始化没有将属性收集进去,则很有可能没有收集到依赖,这种情况则需要使用$set, 在$set中重新进行依赖收集。    
  • 还有一种情况是直接操作数组的下标,也不会发生dom更新,其实vue对数组的push, pop,unshift, shift,splice,sort,reverse这几个方法进行了重新定义,如果使用这几个方法对数组进行操作,是可以监听到数据变化的。    
  • 还有一种,就是你的数据变更在dom挂载之前,比如,数组要放到一个容器里渲染,可是容器还没有挂载出来。导致找不到dom,这种情况就需要使用$nextTick。

免责声明:文章转载自《vue中我改变了data中的一个值,但现在视图上没有实时更新,请问我怎么拿到更新后的值?》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇VBA常用快捷键京东阅读(web)体验优化下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vue项目微信端清理缓存问题解决

vue为单页面前端框架,清理缓存,常规的方式是添加html头部meta,如果逻辑里面是需要使用缓存的,这种方式不建议使用,代码片段如下: <html manifest="IGNORE.manifest"> <head> <meta charset="utf-8"> <meta name="vie...

vue:app.vue中添加监听beforeunload事件,即当浏览器窗口关闭或刷新时删除vuex中的数据

当打开页面时,添加事件监听,即监听beforeunload事件,beforeunload事件在关闭页面时触发。即当关闭页面时,手动删除localStorage中的数据。 app.vue中的代码如下: <template> <div id="app"> <router-view /> </div>...

vue进行代码排序

<template> <div> <div> <h3>排序 </h3> <button @click="orderByAge(0)">默认</button> <button @click="orderByAge(2)">...

vue 项目中 js命名规则

类型 规范 示例 常量 全字符大写,单词用 '_' 分隔 FETCH_USERS、GET_USERS 变量、函数 小写开头驼峰式 camelCase 类、特殊意义的命名空间 大写开头驼峰式 CamelCase 方法、函数 a. 动词 或 动词+名称 组合b. get 必须要有返回值 布尔值变量 is 或 has 前缀 私有...

Vue一些基本操作技巧

1.Vue删除data列表中的项 下为异步删除购物车,并清空当前条目 1 cartDel: function(item) { 2 let _this = this; 3 _this.confirm("确认删除吗?", function() { 4 _this.axios.post(cartD...

vue(js)点击目标div以外区域将目标div隐藏

今天开发新项目的时候,有个需求,点击一个div 展示出个弹出窗 弹出窗标题的颜色要跟点击的div图标颜色一致, 所以这就需要我遍历一下多个数据, 然后需要点击弹出div的外部其他区域,隐藏这个div。所以 有了以下操作! 这个点击事件@click.stop="isPop(item.event)" 加上.stop 起阻止冒泡的效果,这里很重要,具体原因就暂...