vue 关于vue.set的学习笔记

Z时代
2024-01-10
分类：综合

vue

vue新手小白，在看vue文档的时候发现vue关于数组，对象值改变的与 ng有那么点不同。

官方表示

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

但是对于曾经使用ng的我来说，是不一样的。

比如：

vue 不能检测你直接根据数组的索引对数组的某个值修改。

Vue 不能检测对象属性的添加或删除。

但是它提供了另外的方法vue.set ,可以修改数组的值喝对象新增删除属性。

<script>  
export default {
      data(){
            return {
                list:[1,2,3,4,5,6],
                userProfile: {
                    name: 'Anika'
                }
                user: {
                   name: "hea",
                   age: 12
                }
            }
     }, 
     mounted() { 
           this.$set(this.list, 1, 27) 
           this.$set(this.userProfile, 'age', 27)
           this.user = Object.assign({}, this.user, {
                                     age: 22,
                                     name: "huangenai"
           });
     } 
   } 
</script>