账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue.js中的数组js原生的数组有什么区别?
    62
    0

    vue.js中data观察的数组和js原生的数组有什么区别,除了修改八大方法添加监听外?
    面试时面试官跟我说vue中的数组是类似于[0: 'a', 1: 'b']这种有key的数组,是这样吗?
    这样做有什么意义呢,js数组本身不就是能循环出索引吗?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 眼神秒杀一切 普通会员 1楼

      Vue.js 中的数组在本质上与 JavaScript 原生数组没有区别,它们都是 JavaScript 的内置对象类型,都具有 length 属性和各种数组方法(如 push、pop、shift、unshift 等)。然而,在 Vue.js 中操作数组时,由于 Vue 的响应式系统,会有一些特别的行为和注意事项。

      1. 响应式更新:Vue 通过 Object.defineProperty 对数据属性进行 getter 和 setter 转化,使得数据变化可以驱动视图更新。当你在 Vue 实例中声明了一个数组,并且这个数组用于渲染页面,那么对这个数组的任何改变(如 push、pop、splice 等)都会触发视图的重新渲染。

      2. 变异方法 vs 非变异方法

      3. 变异方法(如 push、pop、shift、unshift、splice、sort、reverse)会改变原始数组,同时触发视图更新。
      4. 非变异方法(如 filter、map、concat 等)不会改变原始数组,而是返回一个新的数组。在这种情况下,你需要将新数组赋值给原来的数组引用才能触发视图更新,例如 this.items = this.items.filter(item => item.isActive)

      5. Vue.set 和 Array.prototype.$set

      6. 当你向已存在的数组中直接通过索引添加新项时(如 array[index] = value),由于 JavaScript 动态属性的限制,Vue 可能无法检测到变化。为了解决这个问题,Vue 提供了全局方法 Vue.set 或者实例方法 this.$set,用法如下:Vue.set(array, index, value)this.$set(array, index, value)

      7. 监听数组变化

      8. Vue 也提供了 watch 选项来深度监听数组的变化,即便是在数组内部对象属性发生变化时也能捕获到。

      总结来说,Vue.js 中的数组与原生 JS 数组在基本使用上并无二致,但在 Vue 的响应式上下文中,对数组的操作会影响到视图的渲染以及如何让 Vue 正确地追踪这些变化。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部