vue实例与数据绑定

dmr

1.实例

在vue3.0中，创建应用实例：Vue.createApp(App)

createApp()是一个全局的API，它接受一个根组件选项对象作为参数。
选项对象中包括：数据，方法，生命周期钩子函数等选项。创建实例后，可以调用实例的mount()函数方法，将应用实例的根组件挂摘到指定的Dom元素上，Dom元素上的数据的变化都会被Vue监控，从而实现双向绑定。

1.1 数据 data()

<script type="text/javascript">
//创建实例
const vm = Vue.createApp({
     //返回数据对象
     data(){
       return{
         text:"你好！"
}
}
}).mount("#app");
</script>

1.2 方法

通过methods选项定义方法。


<script type="text/javascript">
//创建实例
const vm = Vue.createApp({
     //返回数据对象
     data(){
       return{
         text:"你好！",
         name:"Tom"
},
methods:{
showInfo(){
  return this.text + this.name;
}
}
}
}).mount("#app");
</script>


1.3 生命周期

Vue 的生命周期钩子是指在 Vue 实例从创建到销毁的整个过程中，会在特定阶段自动调用的函数。这些钩子函数允许开发者在组件的不同生命周期阶段执行自定义逻辑，例如数据初始化、DOM 操作、资源清理等。

以下是 Vue 生命周期中常用的钩子函数及其执行时机：

1. ‌beforeCreate‌

在实例初始化之后、数据观测（data observer）和 event/watcher 事件配置之前被调用。此时数据和方法都还没有被初始化，无法访问 data 和 methods 中的内容。

2. ‌created‌

在实例创建完成后被立即调用。此时数据观测、属性和方法的运算、watch/event 事件回调都已经完成，但模板还未编译成 DOM 节点，实例也尚未挂载到 DOM 上。

3. ‌beforeMount‌

在实例被挂载到 DOM 之前调用。此时模板已经编译完成，但还未渲染成 DOM 节点。

4. ‌mounted‌

在实例被挂载到 DOM 之后调用。此时实例已经成功渲染成 DOM 节点，可以进行 DOM 操作。常用于发起请求、绑定事件等。

5. ‌beforeUpdate‌

在响应式数据发生变化，DOM 重新渲染之前调用。此时数据已更新，但 DOM 还未重新渲染。

6. ‌updated‌

在响应式数据更新后，DOM 重新渲染完成后调用。此时数据和 DOM 都已更新。可用于执行依赖于 DOM 更新的操作。

7. ‌beforeDestroy‌

在实例销毁之前调用。此时实例仍然存在，可以进行最后的操作，如清除定时器、解绑事件监听器等。

8. ‌destroyed‌

在实例销毁之后调用。此时实例的所有东西都会被解绑定，所有的事件监听器会被移除，子实例也会被销毁。