Vue实例声明详解

在 Vue 3.x 中，使用 createApp 方法创建一个 Vue 实例，代码如下：

import { createApp } from 'vue';

const app = createApp({
  // 选项
});

在创建 Vue 实例时，可以传入一个选项对象，该对象可以包含以下属性：

• data：一个返回数据对象的函数。
• methods：一个包含方法的对象。
• computed：一个包含计算属性的对象。
• watch：一个包含侦听器的对象。
• props：一个包含 props 定义的对象。
• components：一个包含子组件的对象。
• template：一个字符串模板或一个渲染函数。
• render：一个渲染函数。
• beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
• created：在实例创建完成后被立即调用。
• beforeMount：在挂载开始之前被调用。
• mounted：在实例挂载到 DOM 之后被调用。
• beforeUpdate：在数据更新之前调用。
• updated：在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
• beforeUnmount：在卸载开始之前被调用。
• unmounted：在实例卸载完成后调用。
• errorCaptured：当捕获一个来自后代组件的错误时被调用。

例如，一个标准的 Vue 实例声明方式如下：

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <button @click="reverseMessage">Reverse Message</button>
    </div>
  `
});

app.mount('#app');

在这个例子中，我们创建了一个 Vue 实例，并传入了一个选项对象，该对象包含了 data、methods 和 template 三个属性。在 data 中，我们定义了一个名为 message 的数据属性，并给它赋值为 'Hello Vue!'。在 methods 中，我们定义了一个名为 reverseMessage 的方法，用于反转 message 的值。在 template 中，我们定义了一个包含 message 和一个按钮的模板。最后，我们使用 mount 方法将这个 Vue 实例挂载到了一个具有 id 为 app 的 DOM 元素上。

需要注意的是，在 Vue 3.x 中，推荐使用新的 Composition API 来组织代码，而不是传统的选项 API。Composition API 提供了一种更灵活、更强大的方式来组织代码，可以更好地复用和管理代码。例如，使用 Composition API 创建一个 Vue 实例的代码如下：

import { createApp, ref } from 'vue';

const app = createApp({
  setup() {
    const message = ref('Hello Vue!');

    const reverseMessage = () => {
      message.value = message.value.split('').reverse().join('');
    };

    return {
      message,
      reverseMessage
    };
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <button @click="reverseMessage">Reverse Message</button>
    </div>
  `
});

app.mount('#app');

在这个例子中，我们使用 ref 函数创建了一个名为 message 的响应式数据，并定义了一个名为 reverseMessage 的函数，用于反转 message 的值。在 setup 函数中，我们返回了一个包含 message 和 reverseMessage 两个属性的对象，这两个属性将被暴露给模板和其他选项。最后，我们使用 mount 方法将这个 Vue 实例挂载到了一个具有 id 为 app 的 DOM 元素上。

原文地址：https://blog.csdn.net/qq_45074341/article/details/136538731

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！