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()引发的视图更新思考及注意事项，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 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.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文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.如下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue $set</title> <scri

  • 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中的$set的使用实例代码

    Vue -$set 在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 如下代码,给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } mounted () { // --钩子函数,实例挂载之后 this.studen

  • 从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中 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() this.$set()引发的视图更新思考及注意事项

    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中data改变后,如何让视图同步更新,搜索了一下,并没有发现解决问题的方法,只能从源码去找解决方法了. 原因 我们都知道,在vue中改变数据后,视图并不是同步更新的. 在vue实例初始化后,会将data设置为响应式对象,当我们执行this.xxx = 1时,会触发这个响应式对象的setter.在setter中,会触发更新,通知所有订阅了xxx的订阅者.但是这个触发更新并不是同步的,它会将所有的watcher都添加到一个队列,并在nextTick之后去更

  • vue shallowRef作用及引发问题详解

    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+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

随机推荐