Vue.set() this.$set()引发的视图更新思考及注意事项
引文
vue文档列表渲染中有条注意事项:
这里提到的两种情况实际改变了数据但是没有触发视图更新。
由此引出Vue.set(),先上文档API:
this.$set()
和Vue.set()
本质方法一样,前者可以用在methods中使用。
set方法调用时,可以触发页面全部重新渲染。
比如在vue中有个data数组arr:
//arr=[1,2,3] arr[1]='b' console.log(arr) // [1,2,3] Vue.set(arr,2,'c') console.log(arr) // [1,b,c]
可以看出set触发了整个页面的重新渲染,连arr[1]='b'的效果也被重新渲染了。
使用set添加数据
Vue.set()不光能修改数据,还能添加数据,弥补了Vue数组变异方法的不足。
可以使用set添加数据这一特性,解决一些常见问题。
例如循环出的元素点击应用选中样式,再点击取消选中样式。
<section v-for="item in list"> <div :class="['xxclass',item.checked?'checked':'']"></div> </section> <!--这里通过判断item的**本身不存在的checked属性**来决定是否增加checked样式类-->
点击方法如下:
clickHandle: function(item){ if(typeof item.checked === 'undefined'){ this.$set(item, 'checked', true) } else { item.checked = !item.checked } } // 如果item没有checked属性就用set方法添加,有则取反
这就利用set使用了对象中本身不存在的checked属性来实现想要的功能。
深入响应式原理
至于视图更新时机可以看文档深入响应式原理
总结
以上所述是小编给大家介绍的Vue.set() this.$set()引发的视图更新思考及注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
vue中 this.$set的用法详解
当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. <template> <div id="app"> <p v-for="item in items" :key="item.id">{{item.message}}</p> <button class="btn" @click=&qu
-
vue中$set的使用(结合在实际应用中遇到的坑)
最近在开发过程中遇到一个问题.在节点上面写点击事件时,点击事件不执行.代码如下: <!-- 操作 --> <el-table-column label="操作"> <template slot-scope="scope"> <span class="poi icon-hover f16 mr20" @click='scope.row.edit=!scope.row.edit'> <svg-ic
-
从vue源码解析Vue.set()和this.$set()
前言 最近死磕了一段时间vue源码,想想觉得还是要输出点东西,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的. Vue.set()和this.$set()应用的场景 平时做项目的时候难免不会对 数组或者对象 进行这样的骚操作操作,结果发现,咦~~,他喵的,怎么页面没有重新渲染. const vueInstance = new Vue({ data: { arr: [1, 2], obj1: { a: 3 } } }); vueInstance.
-
vue $set 给数据赋值的实例
如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 业务介绍:模拟后台数据向DOM树上遍历数据,再向数据里添加状态属性,根据状态改变显示图片,默认nochecked.png,点击时改变状态.显示checked.png DOM树 <div class="cartContent" :class="{'bg' : status == 2}" v-for="(val,key) in imgListData" :id="key&q
-
深入理解vue中的$set
在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.如下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue $set</title> <scri
-
vue.js中$set与数组更新方法
由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当利用索引直接设置数组的某一项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength,不会更新数组. 当然vue中给了解决方法,就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice,caoncat等修改数组,同时也将触发状态更新: ex: 所以如果在实例创建后添加新的属性到实例上,则不会触
-
Vue中的$set的使用实例代码
Vue -$set 在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 如下代码,给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } mounted () { // --钩子函数,实例挂载之后 this.studen
-
Vue.set() this.$set()引发的视图更新思考及注意事项
引文 vue文档列表渲染中有条注意事项: 这里提到的两种情况实际改变了数据但是没有触发视图更新. 由此引出Vue.set(),先上文档API: this.$set()和Vue.set()本质方法一样,前者可以用在methods中使用. set方法调用时,可以触发页面全部重新渲染. 比如在vue中有个data数组arr: //arr=[1,2,3] arr[1]='b' console.log(arr) // [1,2,3] Vue.set(arr,2,'c') console.log(arr
-
vue动态路由:路由参数改变,视图不更新问题的解决
问题描述: 使用vue动态路由("/route/:id" 形式) 传参的时候,修改页面参数,但是视图仍旧是之前的内容,没有进行刷新,示例如下: 原因分析: 具体原因在vue官方文档:响应路由参数的变化一节中有讲过: 当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用.因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效.不过,这也意味着组件的生命周期钩子不会再被调用. 复用组件时,想对路由参数的变化作出响应的话,你可以简单地 wa
-
Vue.set()动态的新增与修改数据,触发视图更新的方法
参数: target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据(可以是字符串和数字) value :重新赋的值 用法:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新. 例: data:{ namelist:[ {message:"叶落森",id:"1"}, {message:"姜艳霞",id:"2"}, {message:"姜小帅",id:"3&q
-
解决vue中修改了数据但视图无法更新的情况
我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个
-
VUE 实现动态给对象增加属性,并触发视图更新操作示例
本文实例讲述了VUE 实现动态给对象增加属性,并触发视图更新操作.分享给大家供大家参考,具体如下: 在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property).然而它可以使用
-
详解vue修改elementUI的分页组件视图没更新问题
今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页. 今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果,结果发现分页组件视图并没有渲染,还是停留在原本的页码处. 然后想了想,想起了.sync这个语法糖,让数据进行双向绑定. 直接上修改的代码看看 <el-pagination :current-page.sync="currentPage" :page-sizes="[10, 30, 50]&
-
vue中data改变后让视图同步更新的方法
前言 不久前天看到一个比较有趣的问题,vue中data改变后,如何让视图同步更新,搜索了一下,并没有发现解决问题的方法,只能从源码去找解决方法了. 原因 我们都知道,在vue中改变数据后,视图并不是同步更新的. 在vue实例初始化后,会将data设置为响应式对象,当我们执行this.xxx = 1时,会触发这个响应式对象的setter.在setter中,会触发更新,通知所有订阅了xxx的订阅者.但是这个触发更新并不是同步的,它会将所有的watcher都添加到一个队列,并在nextTick之后去更
-
vue shallowRef作用及引发问题详解
目录 shallowRef是什么 发现问题 triggerRefValue与triggerRef 解决问题 end shallowRef是什么 最近在开发遇到一个问题,使用shallowRef居然导致视图更新了,这一看把我也给搞懵了,后来便仔细看了看文档,现在来总结一下. ref是一个定义响应式的API,可以通过访问.value属性修改并更新到视图上. 但是shallowRef并不会被深层递归成响应式,也就是说使用.value.属性是不会更新到试图上的.只能是替换整个.value才会更新. 那么
-
Vue中通过vue-router实现命名视图的问题
在用vue-router路由处理一些需求的时候 例如 有时需要同时同级展示多个组件 而不是嵌套展示 例如:创建一个布局 有侧导航和主内容两个视图 此时命名视图就派上用场了 在路由对象中 使用components属性 以使一个路径下可挂载多个子组件: 之后即可为每个要展示的组件指定一个名字 默认name为default 即 不设置名字 <script> var header={ template:"<h1>头部</h1>" } var leftBox=
-
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
本文介绍了vue+vuex+axios+echarts画一个动态更新的中国地图的方法,分享给大家,具体如下: 一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm install axios --save
随机推荐
- js/jQuery对象互转(快速操作dom元素)
- 用JSON做数据传输格式中的一些问题总结
- 如何编写高质量JS代码
- Win2008 蓝屏漏洞揭秘
- IIS 配置过程及解决方案 学习小结
- jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
- JavaScript实现cookie的写入、读取、删除功能
- Laravel 5框架学习之Blade 简介
- RegExp 随笔 JavaScript RegExp 对象
- 如何在datatable中使用groupby进行分组统计
- C#中const用法详解
- CodeIgniter辅助之第三方类库third_party用法分析
- java 基础教程之多线程详解及简单实例
- 基于jQuery的消息提示插件之旅 DivAlert(三)
- vbs,hta中选择文件夹对话框实现代码
- 浅析C/C++中的可变参数与默认参数
- jQuery实现平滑滚动页面到指定锚点链接的方法
- 基于ios中的流状态的定义分析
- JavaScript 克隆双重输入文字
- java按字节截取带有汉字的字符串的解法(推荐)