前言：
本文章是通过学习b站老杜的Vue 2+3 视频，所记录的心得笔记
正文：
1.前一节知识点：
Vue会给data中的所有属性做响应式处理，当然后期添加的属性可以选择添加响应式，也可以不添加响应式
2.问题1：
data中的数组通过下标的形式修改数组内的数据，是否也做了响应处理呢？
代码验证想法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通过下标修改数组，是否用于响应式处理</title>
<script src="../../js/vue.js">
</script>
</head>
<body>
<div id="mydiv">
<h1>{{msg}}</h1>
<ul>
<li v-for="(value,index) in arr">
{{value}}
</li>
</ul>
</div>
<script>
const vm =new Vue({
el: '#mydiv',
data:{
msg:"通过下标修改数组，是否用于响应式处理",
arr:["Jack","Tom","Jim"]
}
})
</script>
</body>
</html>
结果：如下
1.直接修改整个数组，发现页面展示内容也变了，说明data中的arr属性做了响应式处理
2.但是通过下标进行修改数组,结果如下：
结论：通过数组下标去修改数组中的元素，默认情况下没有添加响应式处理
3.处理问题1的方法
方法1:将数组的元素换为对象的形式，通过点 元素对象.属性的形式进行修改对象的属性值
4.处理问题1的方法2
使用Vuet提供的7个API：
push(): 把一个或多个元素添加到数组的末尾，并返回数组的新长度。
作用：用于向数组末尾添加元素。
用法示例：array.push(item1, item2, …)
pop(): 移除数组中的最后一个元素，并返回该元素的值。
作用：用于删除数组中的最后一个元素。
用法示例：array.pop()
reverse(): 颠倒数组中元素的顺序，原先的第一个变为最后一个，原先的最后一个变为第一个。
作用：用于颠倒数组中元素的顺序。
用法示例：array.reverse()
splice(): 在指定位置修改数组，可以删除、替换或添加元素，并返回被删除的元素组成的数组。
作用：用于修改数组中的元素。
用法示例：array.splice(start, deleteCount, item1, item2, …)
shift(): 移除数组中的第一个元素，并返回该元素的值。
作用：用于删除数组中的第一个元素。
用法示例：array.shift()
unshift(): 在数组的开头添加一个或多个元素，并返回数组的新长度。
作用：用于向数组开头添加元素。
用法示例：array.unshift(item1, item2, …)
sort(): 对数组的元素进行排序，可以指定排序方式。
作用：用于对数组中的元素进行排序。
用法示例：array.sort(compareFunction)
以上方法对数组进行需要的操作，都会有响应式处理
或者使用
实践出真理，以上知识点都需要动手敲代码才能，熟练掌握
扫一扫
259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
