Menyelam dalam prinsip responsif

Baris gilir kemas kini tak segerak

• . Object.defineProperty Tukar semua sifat ini kepada getter/setter

  . Object.defineProperty ialah ciri dalam ES5 yang tidak boleh dipamerkan, itulah sebabnya Vue tidak menyokong IE8 dan penyemak imbas yang lebih rendah. Penetap/penetap ini tidak kelihatan kepada pengguna, tetapi secara dalaman ia membenarkan Vue menjejak kebergantungan dan memberitahu perubahan apabila sifat diakses dan diubah suai. Apa yang perlu diperhatikan di sini ialah pelayar berbeza memformat getter/setters secara berbeza apabila mencetak objek data pada konsol, jadi disyorkan untuk memasang vue-devtools

  untuk mendapatkan antara muka yang lebih mesra pengguna untuk memeriksa data.
• Setiap tika komponen sepadan dengan tika

  pemerhati, yang merekodkan atribut data "disentuh" ​​sebagai kebergantungan semasa proses pemaparan komponen. Kemudian, apabila penetap kebergantungan menyala, pemerhati dimaklumkan, menyebabkan komponen yang berkaitannya dipaparkan semula.

  

• Nota pengesanan perubahan

• Dihadkan oleh JavaScript moden (dan Object.observe juga telah ditamatkan), Vue tidak dapat mengesan sifat objek Tambah atau alih keluar

  . Memandangkan Vue melakukan penukaran getter/setter pada sifat apabila memulakan tika, sifat itu mesti wujud pada objek data untuk Vue menukarnya kepada reaktif. Contohnya:

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

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

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

Vue tidak membenarkan menambahkan sifat reaktif peringkat akar secara dinamik pada kejadian yang telah dibuat. Walau bagaimanapun, anda boleh menambah sifat reaktif pada objek bersarang menggunakan kaedah Vue.set(object, propertyName, value). Contohnya, untuk:

Vue.set(vm.someObject, 'b', 2)

this.$set(this.someObject,'b',2)

Kadangkala anda mungkin perlu menetapkan berbilang sifat baharu pada objek sedia ada, seperti menggunakan Object.assign() atau _.extend(). Walau bagaimanapun, sifat baharu yang ditambahkan pada objek dengan cara ini tidak akan mencetuskan kemas kini. Dalam kes ini, anda harus mencipta objek baharu daripada objek asal bersama-sama dengan sifat objek yang anda ingin gabungkan. Object.assign() 或 _.extend()。但是，这样添加到对象上的新属性不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的属性一起创建一个新的对象。

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

也有一些数组相关的注意事项，之前已经在列表渲染中讲过。

声明响应式属性

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

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

如果你未在 data 选项中声明 message，Vue 将警告你渲染函数正在试图访问不存在的属性。

这样的限制在背后是有其技术原因的，它消除了在依赖项跟踪系统中的一类边界情况，也使 Vue 实例能更好地配合类型检查系统工作。但与此同时在代码可维护性方面也有一点重要的考虑：data 对象就像组件状态的结构 (schema)。提前声明所有的响应式属性，可以让组件代码在未来修改或给其他开发人员阅读时更易于理解。

异步更新队列

可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

例如，当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)

<div id="example">{{message}}</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '未更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '已更新'
      console.log(this.$el.textContent) // => '未更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '已更新'
      })
    }
  }
})

methods: {
  updateMessage: async function () {
    this.message = '已更新'
    console.log(this.$el.textContent) // => '未更新'
    await this.$nextTick()
    console.log(this.$el.textContent) // => '已更新'
  }
}