Vue实例声明详解

文章详细介绍了在Vue3.x中使用createApp方法创建Vue实例的过程,以及如何通过选项对象设置data、methods、template等。同时强调了CompositionAPI在组织代码方面的优势和应用实例。
摘要由CSDN通过智能技术生成

在 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 实例,并传入了一个选项对象,该对象包含了 datamethodstemplate 三个属性。在 data 中,我们定义了一个名为 message 的数据属性,并给它赋值为 'Hello Vue!'。在 methods 中,我们定义了一个名为 reverseMessage 的方法,用于反转 message 的值。在 template 中,我们定义了一个包含 message 和一个按钮的模板。最后,我们使用 mount 方法将这个 Vue 实例挂载到了一个具有 idapp 的 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 函数中,我们返回了一个包含 messagereverseMessage 两个属性的对象,这两个属性将被暴露给模板和其他选项。最后,我们使用 mount 方法将这个 Vue 实例挂载到了一个具有 idapp 的 DOM 元素上。

  • 10
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

five-five

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值