在uniapp中初始化的项目碰到了这么一个用法。

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

在之前的项目中也有用到这样的用法,但是没有理解透这个...的实际作用是什么。

三点是es6中出现的扩展运算符。作用是遍历当前使用的对象能够访问到的所有属性,并将属性放入当前对象中。结合上面的代码来看就是Vue中能访问到所有名为App的属性都放入Vue中。那么此时就存在一个问题,重名了怎么办,当重名的时候将会选取后者。

扩展运算符的用法还有其他值得注意的地方,下面的例子可以很好的演示:

var a = {"a":"a","b":"b"}
var b = {...a} //{"a":"a","b":"b"}
var c = {...a,"b":"b1"} //{"a":"a","b":"b1"}
var d = {...a,...{"a":"a1","b":"b1"}} //{"a":"a1","b":"b1"}

这个放入当前对象的操作是会影响到被复制的对象的,因为...这个操作是一种引用,并不是直接将数据放入当前的对象里,用下面的例子去描述:

var a = {1:1,2:2}
var b = {...a} //此时b为{1:1,2:2}
b.2=3
console.log(a) //{1:1,2:3}
console.log(b) //{1:1,2:3}

这个时候的a已经被影响到了,因为改变的是引用的对象,所以本质上更改的是a的属性。

 

更详细的数组赋值等,可以参考下面的链接:

https://blog.csdn.net/astonishqft/article/details/82899965

Logo

前往低代码交流专区

更多推荐