用一个🌰梳理Vue更新流程

2023-11-10 02:53:21

Vue 是一个非常流行的前端框架，它使用 Object.defineProperty 对数据劫持以达到响应式处理，使用发布订阅模式进行事件处理，通过 key 确保元素状态复用。这些知识点对于理解 Vue 的工作原理非常重要。

这篇文章将通过一个🌰来梳理 Vue 更新流程，以便读者能够更加深入地理解 Vue 的工作原理。

响应式数据

Vue 通过 Object.defineProperty 对数据劫持，使数据具有响应性。当数据发生变化时，Vue 能够自动检测到变化并更新视图。

const data = {
  message: 'Hello, world!'
}

const vm = new Vue({
  data: data
})

vm.message = 'Hello, Vue!'

在这个例子中，当我们改变 data.message 的值时，Vue 会自动检测到变化并更新视图。这是因为 Vue 在数据对象上使用了 Object.defineProperty，它会在数据发生变化时触发一个事件，Vue 就会根据这个事件来更新视图。

发布订阅模式

Vue 使用发布订阅模式来处理事件。当一个事件发生时，Vue 会将这个事件发布出去，然后任何订阅了这个事件的组件都会收到这个事件并做出相应的处理。

const vm = new Vue({
  data: {
    message: 'Hello, world!'
  },
  methods: {
    handleClick() {
      this.message = 'Hello, Vue!'
    }
  }
})

vm.$on('click', this.handleClick)

在这个例子中，当我们点击按钮时，Vue 会触发一个 click 事件，然后 handleClick 方法就会被执行。这是因为我们在 vm.$on 中订阅了 click 事件，所以当这个事件发生时，handleClick 方法就会被执行。

组件复用

Vue 允许我们将组件进行复用，这可以使我们的代码更加简洁和易于维护。

const MyComponent = {
  template: '<p>{{ message }}</p>',
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}

const vm = new Vue({
  components: {
    MyComponent
  },
  template: '<div><my-component></my-component></div>'
})