JavaScript数据存取


数据存储的位置关系到代码执行过程中数据的检索速度。JavaScript中有四种存储方式。

  • 字面量:只代表自身:string、number、boolean、object、array、function、regex、null、undefined(就是不适用new创建的实例)
  • 本地变量:使用var定义的数据存储单元
  • 数组元素
  • 对象元素

每一种数据存储的位置都有不同的读写消耗,对于消耗性能的影响排序:字面量、局部变量 < 数组、对象成员。

为了性能的考虑,可以通过以下方法来定位和规避问题,以及优化代码

管理作用域

作用域链和标识符解析

每一个函数拥有可以编程访问的属性和一系列不能通过代码访问而仅供JavaScript引擎存取的内部属性。其中一个内部属性就是[[Scope]]。
[[Scope]]包含了一个函数被创建的作用域中的几何,这个几何被称函数的作用域链,它取决于那些数据能被函数访问。

函数的作用域在函数创建后就会存在,它的作用域链就插入了一些对象,例如:

function add(num1,num2){
    var sum = num1 + num2;
    return sum;
}

在创建的时候,就在作用域链插入了一个全局对象,这个对象包含window、navigator和document等。

当函数执行的时候,都会创建一个一个执行环境,每个执行环境都有自己的作用域链,函数执行完毕之后执行环境对应的作用域链会连同

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue.js的应用程序中,Vuex是一个用于管理应用程序状态的库。它允许您在应用程序中定义一个全局状态,并提供了一种机制来更新和访问它。 下面是如何在Vuex中存取数据的步骤: 1. 定义State 首先,您需要定义一个状态对象。这是您将存储所有应用程序数据的地方。在Vuex中,您可以使用State对象来存储应用程序的数据。 例如,您可以定义一个包含用户信息的状态对象: ```javascript const state = { user: { name: 'John Doe', email: 'john.doe@example.com' } } ``` 2. 定义Getter 接下来,您可以定义一个Getter函数来从State对象中获取数据。Getter函数允许您在应用程序中访问状态对象,而不必直接访问它。 例如,您可以定义一个Getter函数来获取用户名称: ```javascript const getters = { userName: state => state.user.name } ``` 3. 定义Mutation Mutation函数用于更新State对象中的数据。Mutation函数的唯一目的是更新State对象中的数据。Vuex要求Mutation函数是同步的。 例如,您可以定义一个Mutation函数来更新用户邮箱: ```javascript const mutations = { updateUserEmail(state, newEmail) { state.user.email = newEmail } } ``` 4. 定义Action Action函数用于处理异步操作,并在完成后调用Mutation函数来更新State对象中的数据。 例如,您可以定义一个Action函数来异步更新用户信息: ```javascript const actions = { updateUserInformation(context, payload) { return new Promise((resolve, reject) => { // 异步操作 setTimeout(() => { context.commit('updateUserEmail', payload.email) resolve() }, 1000) }) } } ``` 5. 注册Vuex Store 最后,您需要将状态对象、Getter函数、Mutation函数和Action函数组合在一起,并将它们注册到Vuex Store中。 ```javascript import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state, getters, mutations, actions }) ``` 6. 在Vue组件中使用State、Getter、Mutation和Action 一旦您将State、Getter、Mutation和Action注册到Vuex Store中,您可以在Vue组件中使用它们。使用Vuex提供的辅助函数,您可以轻松地从State对象中获取数据、调用Mutation函数来更新数据、调用Action函数来处理异步操作。 例如,您可以在Vue组件中获取用户名称: ```javascript computed: { userName() { return this.$store.getters.userName } } ``` 或者,您可以在Vue组件中调用Mutation函数来更新用户邮箱: ```javascript methods: { updateUserEmail(newEmail) { this.$store.commit('updateUserEmail', newEmail) } } ``` 或者,您可以在Vue组件中调用Action函数来异步更新用户信息: ```javascript methods: { updateUserInformation(payload) { this.$store.dispatch('updateUserInformation', payload) .then(() => { console.log('User information updated successfully') }) } } ``` 这就是如何在Vuex中存取数据的步骤。通过使用Vuex,您可以轻松地管理应用程序状态,并在Vue组件中访问和更新数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值