广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~
本篇文章带大家聊聊Vue中的Vue.set和this.$set，介绍一下Vue.set和this.$set用法与使用场景，希望对大家有所帮助！
一、为什么有Vue.set由于JavaScript的限制，Vue无法检测到data中数组和对象的变化，因此也不会触发视图更新。Vuejs视频教程
二、解决方法数组1.使用Vue提供的变异方法Vue对这些JS数组方法进行了封装，通过这些方法是可以检测到数组更新的。
2.将原数组整个替换如下例中，是要实现vm.items[1] = 'excess'
<body><div id="app"> <ul> <li v-for="(item, index) in items"> {{ index }} : {{ item }} </li> </ul></div><script>let vm = new Vue({ el: '#app', data: { items: ['a', 'b', 'c'] }, created() { this.items = ['a', 'test', 'c'] }})</script></body>登录后复制3.使用Vue.set（见后文）对象1.将原对象整个替换
如下例中，是要实现给object新增一个键值对{test: 'newthing'}
<body><div id="app"> <ul> <li v-for="(value, name) in object"> {{ name }} : {{ value }} </li> </ul></div><script>let vm = new Vue({ el: '#app', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } }, created() { this.object = { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10', test: 'newthing' } }})</script></body>登录后复制2.使用Vue.set（见后文）三、Vue.set对于数组
Vue不能检测以下数组的变动:
利用索引值直接设置一个数组项时，例如vm.list[0]=newValue修改数组长度时，例如vm.list.length=newLength举个栗子
var vm = new Vue({ data: { items: ['a', 'b', 'c'] }})vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的登录后复制这时可以使用Vue.set或者this.$set
使用方法Vue.set(target,index,newValue)
// Vue.setVue.set(vm.items, indexOfItem, newValue)登录后复制
// this.$setvm.$set(vm.items, indexOfItem, newValue)登录后复制对于对象
Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
举个栗子
var vm = new Vue({ data:{ a:1 }})// `vm.a` 是响应式的vm.b = 2// `vm.b` 是非响应式的登录后复制使用方法Vue.set(target,key,value)
Vue.set(vm.someObject, 'b', 2)登录后复制
this.$set(this.someObject,'b',2)登录后复制注意
Vue不允许动态添加根级响应式属性
const app = new Vue({ data: { a: 1 } // render: h => h(Suduko)}).$mount('#app1')Vue.set(app.data, 'b', 2)登录后复制只可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性
var vm=new Vue({ el:'#test', data:{ //data中已经存在info根属性 info:{ name:'小明'; } }});//给info添加一个性别属性Vue.set(vm.info,'sex','男');登录后复制四、使用场景当我们对data中的数组或对象进行修改时，有些操作方式是非响应式的，Vue检测不到数据更新，因此也不会触发视图更新。此时需要使用Vue.set()进行响应式的数据更新。
（学习视频分享：vuejs教程、web前端）
以上就是浅析Vue中的Vue.set和this.$set，看看使用场景！的详细内容，更多请关注9543建站博客其它相关文章！
发表评论