js监听数组的变化

js监听数组的变化

  • 最近在造轮子的时候遇到了这么一个问题,那就是数组在调用内部方法的时候怎么才可以监听到数组发生了变化,举个例子:假设一个数组调用了一个push方法,如果才可以知道数组调用了push方法,怎么去监听呢???
  • 如果是直接调用数组内部的方法,那么不会监听到数组的变动,为此可以进行改造,代码如下:
// 获取Array的原型,并创建一个新的对象指向这个原型
const arrayMethods = Object.create(Array.prototype)
// 创建一个新的原型,这就是改造之后的数组原型
const ArrayProto = []
/
  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue 中,可以使用 `watch` 监听数组变化。但是由于 JavaScript 的限制,使用 `watch` 监听数组变化时只能监听数组的长度变化数组内部元素的引用变化,而不能监听数组内部元素的属性变化。 如果需要监听数组内部元素的属性变化,可以使用 Vue 提供的 `$set` 或者 `splice` 方法来修改数组,并且在修改后使用 `watch` 监听数组变化。 示例代码如下: ```html <template> <div> <ul> <li v-for="(item, index) in list" :key="index">{{ item.title }}</li> </ul> </div> </template> <script> export default { data() { return { list: [ { title: "Vue.js 实战教程" }, { title: "JavaScript 高级编程" }, { title: "Python 基础教程" }, ], }; }, mounted() { // 监听数组变化 this.$watch("list", (newVal, oldVal) => { console.log("list changed:", newVal, oldVal); }, { deep: true }); // 使用 deep 选项可以监听数组内部元素的属性变化 }, methods: { changeTitle(index, newTitle) { // 修改数组内部元素的属性 this.$set(this.list[index], "title", newTitle); }, addBook(title) { // 使用 splice 方法添加新元素 this.list.splice(this.list.length, 0, { title }); }, }, }; </script> ``` 在上面的示例中,我们使用 `$set` 方法来修改了数组内部元素的属性,并使用 `splice` 方法来添加了新元素,然后在 `mounted` 钩子中使用 `watch` 监听数组变化。注意,为了监听数组内部元素的属性变化,我们需要将 `deep` 选项设置为 `true`。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值