添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

2、正确写法( 页面刷新 ):

(1)方法1,调用列表操作函数更新数组数据 : this.hobby.splice(0,1,"学习");

(2)方法2,调用Vue的set方法更新数组数据: this.$set(this.hobby,0,"学习");

二、Vue监视数据的原理如下:

1 、Vue 会监视数据中 所有层次 的数据

2、如何检测对象中的数据?

答:通过setter实现监视,且要在new Vue时就传入要监测的数据。

(1)对象中追加的属性,Vue 默认不做响应式处理;

(2)如需给后添加的属性做响应式,请使用如下API:

Vue.set(target,propertyName/Index,value);或 this.$set(target,propertyName/Index);

3、如何监测数组中的数据?

答:通过包裹数组更新元素的方法实现,本质就是做了两件事:

(1)调用原生对应的方法数组进行更新;

(2)重新解析模板,进行更新页面。

4、在Vue 修改数组中的某个元素,一定要用如下方法:

(1)使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、rverse()

(2)Vue.set()或vm.$set()

push() :往数组最后添加一个元素;

pop():删除数组最后一个元素;

shift():删除数组第一个元素;

unshift():往数组最前面添加一个元素

splice() :操作某个元素,可修改数组中的元素

sort() :排序

reverse():数组反转

5、特别注意:Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性!

6、直接操作数组,页面不更新;直接操作对象,页面更新

(1)this.student.hobby[0]="学习";(操作数组,页面不刷新)

(2)this.student.friend[0].name="张三";(操作对象,页面刷新)

视频讲解 https://www.bilibili.com/video/BV1Zy4y1K7SH?p=37&vd_source=60a28e8364654bee938864b1d19905ec

35、36、37