vue.set原理

小案例

这边把sex注释掉,但是它读取的是student里面的sex不会报错,但是不显示 

这样写就报错,因为vm上没有sex

但如果用户后续添加属性无法进行响应式

解决：

可以使用vue给你的api来实现后添加的属性响应式

 

vue.set 

vue.set(,,) 第一个填写对应位置,第二个填写添加属性名,第三个填写属性值

用vm.$set(,,)与vue.set用法一样效果一样

这边还能简单写 把vm._data.student换成vm.student

因为它们两相同

 

所以可以实现一个功能“点我追加一个属性”

加一个methods:{

        addSex(){

                vue.set(this.student,'sex','男')

                this.$set(this.student,'sex',''男)

             

        }

}

 

但是它有局限

小案例

加一个校长属性但是它是直接在data上面的

但是报错所以可以知道vue.set只能给属性对象中添加属性但是不能直接给data添加属性

vm也不行

所以vue.set的第一个参数空，即target不允许为vm后者vm的data

 

所以要这样写：