VUE中定义的变量的生命期(个人测试, 如表述有误,欢迎指正)

分类：HBuilderX

我做了三个单元
common/myUtils.js

pages/index/index.vue (默认)

pages/page2/page2.vue

以下例子是为了证明:
这个例子,主要是证明:
1>.一个vue页面中,在script第一级中(非export),定义的变量,对自身是有效的
2>.即便这个vue页面关闭后,再打开,这个变量值仍是上次的值,
3>.如果你要避免这种情况, 你就要在onload或onshow中,初始化了一下

4>.第2个vue页面是无法访问到第1个vue页面的值(即使你已在第1页中已export了这个变量)
5>.但是,如果你在目录common中的js文件中定义了一个变量,则在vue中import一下,就可以访问\
6>.但也仅限于读取, 无法写入更改这个变量的值,
7>.如果你实在想搞个全局变量,可以用uni.setStorageSync,uni.getStorageSync来实现

common/myUtils.js

var kkkk='hello';  

export{  
  kkkk  

}

0 赞关注分享

3 个评论

要回复文章请先登录或注册

1***@qq.com (作者)

分享的目的:
1>.希望有其它仁兄指点一下, 以便指正我有哪些地方理解错误
2>.加强自已的理解.
3>.分享大家.
谢谢!

2022-12-06 12:31

1***@qq.com (作者)

pages/page2/page2.vue

```javascript
<template>
<view class="content">
<view>
<button type="primary" @tap="myClick1()">显示page2.vue变量的localText1值</button>
<button type="primary" @tap="myClick2()">显示index.vue变量的localText1值</button>
<button type="primary" @tap="myClick3()">显示common/myUtils.js变量的kkkk值</button>
<button type="primary" @tap="myClick4()">尝试赋值common/myUtils.js变量的kkkk</button>
<button type="primary" @tap="myRedirectTo()">关闭当前页面,跳转到index(uni.redirectTo)</button>
</view>

<view class="text-box" scroll-y="true">
<text>{{myText}}</text>
</view>
</view>
</template>

<script>
import * as index from '/pages/index/index.vue'
import * as myUtils from '/common/myUtils.js'

var localText1 = '';

export default {
data() {
return {
title: 'Hello',
myText: ''

}
},
onLoad() {
//localText1=''; //你可以考虑在onload或onshow中,初始化
},
methods: {
myClick1() {
localText1 = localText1 + '1';
this.myText = '当前页面变量localText1=' + localText1;
},

myClick2() {
this.myText = 'index.vue页面变量localText1=' + index.localText1;
},

myClick3() {
this.myText = 'common/myUtils.js页面中,kkkk=' + myUtils.kkkk;
},

myClick4(){

try{
myUtils.kkkk=myUtils.kkkk+'!';
}catch(e){
uni.showModal({
showCancel: false,
content: e.message
})
}

},

myRedirectTo() {
uni.redirectTo({
url: '/pages/index/index'
});
}

}
}
</script>

export {
localText1
}

```

2022-12-06 12:29

1***@qq.com (作者)

pages/page2/page2.vue

```javascript
<template>
<view class="content">
<view>
<button type="primary" @tap="myClick1()">显示index.vue变量的localText1值</button>
<button type="primary" @tap="myClick2()">显示page2.vue变量的localText1值</button>
<button type="primary" @tap="myClick3()">显示common/myUtils.js变量的kkkk值</button>
<button type="primary" @tap="myClick4()">尝试赋值common/myUtils.js变量的kkkk</button>
<button type="primary" @tap="myRedirectTo()">关闭当前页面,跳转到page2(uni.redirectTo)</button>
</view>

<view class="text-box" scroll-y="true">
<text>{{myText}}</text>
</view>
</view>
</template>

<script>
import * as page2 from '/pages/page2/page2.vue'

var localText1 = '';

export default {
data() {
return {
title: 'Hello',
myText: '这个例子,主要是证明:\n' +
'1>.一个vue页面中,在script第一级中(非export),定义的变量,对自身是有效的\n' +
'2>.即便这个vue页面关闭后,再打开,这个变量值仍是上次的值,\n' +
'3>.如果你要避免这种情况, 你就要在onload或onshow中,初始化了一下\n\n' +

'4>.第2个vue页面是无法访问到第1个vue页面的值(即使你已在第1页中已export了这个变量)\n' +
'5>.但是,如果你在目录common中的js文件中定义了一个变量,则在vue中import一下,就可以访问\n' +
'6>.但也仅限于读取, 无法写入更改这个变量的值,\n' +
'7>.如果你实在想搞个全局变量,可以用uni.setStorageSync,uni.getStorageSync来实现'
}
},
onLoad() {
//localText1=''; //你可以考虑在onload或onshow中,初始化
},
methods: {
myClick1() {
localText1 = localText1 + '0';
this.myText = '当前页面变量localText1=' + localText1;
},

myClick2() {
this.myText = 'page2页面中,localText1=' + page2.localText1;
},

myClick3() {
this.myText = 'common/myUtils.js页面中,kkkk=' + myUtils.kkkk;
},

myClick4() {

try {
myUtils.kkkk = myUtils.kkkk + '!';
} catch (e) {
uni.showModal({
showCancel: false,
content: e.message
})
}

},

myRedirectTo() {
uni.redirectTo({
url: '/pages/page2/page2'
});
}

}
}
</script>

export {
localText1
}

```

2022-12-06 12:28

VUE中定义的变量的生命期(个人测试, 如表述有误,欢迎指正)

3 个评论

目录

公告

相关问题