【vue3】基础知识点系列 - 创建应用常见方法

本篇文章简单讲讲Vue应用程序中常用的一些方法和选项的解释

1、Vue.createApp()

这是Vue 3中用于创建Vue实例的方法。它接受一个根组件对象作为参数，并返回一个应用程序实例。例如：

const app = Vue.createApp({
  // 根组件选项
})

2、const vm = app.mount()

这段代码用于将Vue应用程序挂载到一个DOM元素上。它接受一个选择器或DOM元素作为参数，并返回一个Vue实例。例如：

const vm = app.mount('#app')

3、vm.$data

这是Vue实例的数据对象，包含了Vue应用程序中定义的所有响应式数据。您可以通过vm.$data来访问这些数据。例如：

console.log(vm.$data)

4、data(){}

这是Vue组件选项之一，用于定义组件的数据。它返回一个对象，其中包含组件的初始数据。例如：

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
})

5、methods:{}

这是Vue组件选项之一，用于定义组件的方法。它是一个包含多个方法的对象，这些方法可供组件内的其他方法或模板中的事件调用。例如：

const app = Vue.createApp({
  methods: {
    greet() {
      console.log('Hello!')
    }
  }
})

6.、computed:{}

这是Vue组件选项之一，用于定义计算属性。计算属性是根据响应式数据动态计算而来的属性，它会根据数据的变化自动更新。例如：

const app = Vue.createApp({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
})

7watch:{}

这是Vue组件选项之一，用于观察响应式数据的变化并执行相应的操作。它是一个包含多个观察者的对象，每个观察者都定义了一个属性（要观察的数据）和一个处理函数（数据变化时执行的操作）。例如：

const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log('Count changed from', oldValue, 'to', newValue)
    }
  }
})

这些方法和选项是Vue应用程序开发中常用的一些工具和功能。通过使用它们，您可以控制和管理Vue应用程序的状态和行为。