vue数组（vue数组转字符串）

本篇文章给大家谈谈vue数组，以及vue数组转字符串对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue中实现变异数组和非变异数组的方法
• 2、vue数组响应式原理
• 3、vue中操作数组，页面不响应的情况以及解决方式
• 4、vue，数组如何传参？

vue中实现变异数组和非变异数组的方法

在阅读vue官网的时候，偶然间看到了一个观察数组变异的方法，变异方法？Are you kidding me? ...什么东西？guide就给了这么一堆东西：

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

*

1.push( )

*

2.pop( )

*

3.unshift( )

*

4.shift( )

*

5.splice()

*

6.sort()

*

7.reverse()

看完这里才恍然大悟，其实数组变异方法都是JavaScript操作数组的方法，那么接下来就一一闹纯销解释这些方法是干嘛用的

push（）往数组最后面添加一个元素，成功返回当前数组的长度

pop（）删除数组的最后一个元素，成功返回删除元素的值

shift（）删除数组的第一个元素，返回该元素。

unshift（）在数组的开头添加一个或者多个元素，返回原数组的长度，改变原来的数组

splice（）有三个参数，第一个是删除index位置的元素（必选），第二个是想要删除的个数（必选），第三个是删除后想要在原位置替换的值（可选）

splice(index，num，5)表示从index下标位置开始向后截取num个元素，截取的这些元素组成一个新数组返回，并且从index位置开始，插入后面的所有参数。（插入到原数组里去）

sort（）使数组按照字符编码默认从小到大排序,成功返回排序后的数组

reverse（） 将数组倒序，成功返回倒序后的数组

既然有变异液游方法那么也自然有非变异方法（操作数组不改变原数组的）

filter（）、concat（）和 slice（）

他们不会改变原始数组，他们只会生成一个新的数组

slice（）将原数组copy

slice（startindex，endindex）从startindex下标开始向后截取到endindex位置（不包含）的元素，截取的这些裤唯元素组成新的数组返回，原数组不变

concat（）将一个或多个数组组合到原数组中，组成新的数组返回

与push的区别

filter（）可以对数组元素进行过滤

逆战

vue数组响应式原理

vue2中Object.defineProperty响应式只对对象有效，对数组无效，所以对数组做额外处理。我们知道，会改变数组本身的方法只有7个：sort, push, pop, slice, splice, shift, unshift,所以可以通过重写这些方法来达到数组响应式

解决方案：

1. 找到数组原型

2. 覆盖那些能够修改数组的更新方法，让他们在修改数组同时，还可以通知更新

3. 将得到的新的原型设置到数组实例原型上

4. 对数组内部元素实现响应式

// 实现数组响应式// 1. 替换数组原型中7个方法constoriginalProto=Array.prototype// 克隆体原数组原型constarrayProto=Object.create(originalProto)// 可修改数组的7个方法 , 'sort'constchangeMethods=['push','pop','shift','unshift','slice','splice','sort']//  2. 在克隆的原型上，覆盖那些能够修改数组的更新方法，让他们在修改数组同时，还可以通知更新changeMethods.forEach(method={arrayProto[method]=function(){// 进行原始操作originalProto[method].apply(this,arguments)// 覆盖操作：增加更新通知console.log(`数组正在执行${method}方法`);}})// 对象响应化functiondefineReactive(obj,key,value){Object.defineProperty(obj,key,{get(){console.log('获取'+key);returnvalue},set(newVal){if(newVal!==value){// console.log(newVal);// console.log(JSON.stringify(obj[key]));console.log(`正在改变${key}值:从${obj[key]}变为${newVal}`)value=newVal}}})}functionobserver(obj){// 不是对象或者为null，不做响应式，结束if(typeofobj!=='object'||obj===null)return;// 如果是数组，修改其实例的原型if(Array.isArray(obj)){// 3. 将得到的新的原型设置到数组实例原型上obj.__proto__=arrayProto// 4. 对数组内的元素，同样进行响应化for(leti=0;iobj.length;i++){// console.log(obj[i]);observer(obj[i])}// 如果是对象裂裤}else{Object.keys(obj).forEach(key={console.log(obj,key,obj[key]);defineReactive(obj,key,obj[key])})}}obj=[{a:1},2,7,5,3]observer(obj)obj.push(4)// 数组正在执行push方法obj.pop()// 数组正在执行肆尺简pop方法obj[0].a=2// 获取a    // 正在改变a值:从1变为2obj.sort()// 数组正在执行sort方法console.log(obj);// [ 2, 3, 5, 7, { a: [Getter/Setter] } ]console.log(obj[4].a);// 获取a  // 2

链困纳接：

[img]

vue中操作数组，页面不响应的情况以及解决方式

不生效的情况

数据：data:['a,','b','c','d']

方法：

changeData(){

data[0]='666' // 控制台显示数据已经更改['666','b','c','d']，但笑茄是页面上数组依然显示['a,','b','c','d']

}

解决方法：

1、通过splice() 方法

changeData(){

data.splice(0,1,'666') // splice方法删除下标为0的这个元素，并且在这里插入孝轿‘666’这个元素

}

2、通过巧升肆vue的 set(data[0]='666')

vue，数组如何传参？

方法/步骤

新建一个html代码页面，然后创建一个div，然后给这个div设置id为app

请点击输入图片描述

引入vue.js文件。引入已经下载好的vue.js文件。

请点击输入图片描述

创建vue实悔槐敬例。在引入的vue.js文件后新建一个script，然后只用new Vue()创建vue设置挂载点。

代码：

script

var app =  new Vue({

el:"#app"

})

/script

请点击输入图片描述

添加数组。在Vue里添加一个items的数组。

代碧慎码：

data:{

items:["张三","李四","王五"]

}

请点击输入图片描述

创建vue组件，使用v-for把items数组遍历，然后把遍历好的数据转给子组件，子组件通过props获取父组件传递的参数。

html代码：

todo-item v-for="item in items" :item="item"/todo-item

vue组件代码：

Vue.component("todo-item",{

props:['item'],

template:"div{{item}}/div"

})

请点击输入图片描述

保存html文件后使用浏览器打开，即可看到浏览器上打印出items数组数明烂据。

请点击输入图片描述

关于vue数组和vue数组转字符串的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。