首页常见问题正文

vue2和vue3的响应式原理都有什么区别呢?

更新时间:2023年05月23日09时17分来源:传智教育浏览次数:

好口碑IT培训

　　Vue.js是一个流行的JavaScript框架，用于构建用户界面。Vue2.x版本使用了一种称为「基于对象的观察者模式」的响应式原理，而Vue3.x版本则采用了名为「基于 Proxy 的观察者模式」的新的响应式原理。这两种原理在实现上有一些区别。

　　接下来笔者将用具体的代码分别展示下Vue 2.x和Vue 3.x中响应式原理的区别。

　　Vue2.x示例：

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      methods: {
        updateMessage: function() {
          this.message = 'Updated Message';
        }
      }
    });
  </script>
</body>

</html>

　　在上面的示例中，我们创建了一个Vue实例，其中有一个message属性，它被绑定到HTML模板中的一个

　　元素上。当点击按钮时，updateMessage方法会更新message的值，从而触发视图的重新渲染。

　　Vue3.x示例：

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      methods: {
        updateMessage() {
          this.message = 'Updated Message';
        }
      }
    });

    app.mount('#app');
  </script>
</body>

</html>