vue新添加属性的双向绑定问题(动态添加的属性导致checkbox不起作用)

作者: dreamfly 分类: javascript 发布时间: 2020-06-12 14:14

双向绑定

数据和视图数据互相绑定,对数据操作的时候,会影响到视图,对视图操作的时候,也会反过来影响数据。

vue数据变更

Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

深入响应式原理

Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同,所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。

每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。

声明响应式 property

由于 Vue 不允许动态添加根级响应式 property,所以你必须在初始化实例前声明所有根级响应式 property,哪怕只是一个空值:


var vm = new Vue({
  data: {
    // 声明 message 为一个空值字符串
    message: ''
  },
  template: '<div>{{ message }}</div>'
})
// 之后设置 `message`
vm.message = 'Hello!'

由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

新添加的属性不起作用,我们需要使用下面的方法。

Vue.set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)

通过set方法和splice方法就可以解决数组对象变化不起作用的问题。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

7条评论
  • Accedge

    2022年9月2日 15:06

    It is produced by Sunrise Remedies pharma-company best place to buy generic cialis online Yearbooks, in particular, I think were more common searches than show up here

  • sconfourn

    2022年9月4日 21:56

    They want it to look home-grown cheap priligy

  • unconia

    2022年9月6日 20:54

    cialis generic best price Tadalafil is a selective, long-acting PDEI that was released in 2003

  • Tandaxami

    2022年9月9日 05:44

    More confirmatory studies that are prospective, crossover, randomized, placebo-controlled, and double-blind are clearly required to determine the effects and the optimal regimen of tadalafil in ED patients after RALP comprare cialis online Going to the hospital, you will get full range of necessary examinations, consultations, diagnosis, treatment, and if necessary, inpatient treatment will be organized treated in hospitals with support and control by our doctors, post-operative observation and treatment

  • ancelay

    2022年9月11日 17:59

    Michele Hedge x. buy clomid online safely Introduction The testosterone to estradiol ratio T E2 ratio reportedly exerts a stronger effect on semen quality and sexual desire than does testosterone alone.

  • sterulp

    2022年9月14日 22:22

    common side effects tamoxifen Broadening settings to include views of different ethnic groups would be desirable as this issue is a weakness of much infertility research, with the exception of Culley s work with UK minority ethnic communities Culley et al.

  • Lerlore

    2022年9月18日 13:20

    Origin of acinar cell regeneration after atrophy of the rat parotid induced by duct obstruction. buy doxycycline 100 mg online rx

发表评论

您的电子邮箱地址不会被公开。