Vue2 与 Vue3 中数据定义在不同位置的区别

阿贾克斯的黎明

于 2024-10-04 21:42:03 发布

阅读量174

点赞数 6

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/m0_57836225/article/details/142707816

版权

前端专栏收录该内容

82 篇文章 0 订阅

订阅专栏

Vue2 与 Vue3 中数据定义在不同位置的区别

在 Vue 开发中，数据的定义位置对于其响应式特性有着重要的影响。本文将首先介绍 Vue2 中数据定义在data的return内外的区别，然后结合 Vue3 的情况进行分析，并给出相应的代码示例。

一、Vue2 中的情况

在 Vue2 中，定义数据通常在组件的data函数中。在data函数中，数据定义在return内部和外部有着不同的表现。

1. 定义在`return`内部的数据

这些数据会经过 Vue 的响应式处理，被Object.defineProperty进行劫持拦截。这意味着当这些数据发生变化时，Vue 能够自动检测到变化并更新视图。
例如以下代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>Vue2 Data in Return</title>
</head>

<body>
  <div id="app">
    {{str}}
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data() {
        return {
          str: '1'
        }
      }
    });
  </script>
</body>

</html>

在这个例子中，str定义在data函数的return内部，它是响应式数据。当str的值发生变化时，页面上的显示会自动更新。

2. 定义在`return`外部的数据

直接赋值给当前组件的大对象，不会被Object.defineProperty劫持。这意味着这些数据的变化不会自动触发视图的更新。
例如以下代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>Vue2 Data Outside Return</title>
</head>

<body>
  <div id="app">
    {{str}}
    {{nom}}
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data() {
        return {
          str: '1'
        }
      },
      created() {
        this.nom = '222';
      }
    });
  </script>
</body>

</html>

在这个例子中，nom定义在组件的created钩子函数中，它不是响应式数据。当nom的值发生变化时，页面上的显示不会自动更新。

二、Vue3 中的情况

在 Vue3 中，响应式数据的处理方式发生了一些变化。Vue3 使用了Proxy来实现响应式，而不是Object.defineProperty。

1. 定义在`setup`函数内部的数据

在 Vue3 的组合式 API 中，数据通常在setup函数内部定义。使用reactive或ref函数来创建响应式数据。
例如以下代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <title>Vue3 Data in Setup</title>
</head>

<body>
  <div id="app">
    {{str}}
  </div>
  <script>
    const App = {
      setup() {
        const str = ref('1');
        return {
          str
        }
      }
    };
    const app = Vue.createApp(App);
    app.mount('#app');
  </script>
</body>

</html>

在这个例子中，str使用ref函数创建，定义在setup函数内部，它是响应式数据。当str的值发生变化时，页面上的显示会自动更新。

2. 定义在`setup`函数外部的数据

与 Vue2 类似，定义在setup函数外部的数据不是响应式的。
例如以下代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <title>Vue3 Data Outside Setup</title>
</head>

<body>
  <div id="app">
    {{str}}
    {{nom}}
  </div>
  <script>
    let nom = '222';
    const App = {
      setup() {
        const str = ref('1');
        return {
          str
        }
      }
    };
    const app = Vue.createApp(App);
    app.mount('#app');
  </script>
</body>

</html>

在这个例子中，nom定义在setup函数外部，它不是响应式数据。当nom的值发生变化时，页面上的显示不会自动更新。

综上所述，无论是在 Vue2 还是 Vue3 中，数据定义的位置对于其响应式特性有着重要的影响。在开发过程中，我们应该根据实际需求合理地定义数据，以确保应用的性能和可维护性。