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)!