上一节我们已经创建好了一个简单的 Vue 项目，并通过 npm run dev 命令来启动这个项目。本节我们来学习如何创建 Vue 的实例，渲染数据到浏览器等。

创建Vue实例

在 Vue2 中我们是通过 Vue 函数来创建 Vue 实例的，例如：

var vm = new Vue({
  // 选项
})

而在 Vue3 中，我们可以通过 createApp() 函数来创建实例，如下所示：

Vue.createApp(/* 选项 */)

创建 Vue 实例后，我们可以挂载它，将容器传递给 mount 方法。例如如果我们想在 <div id="app"></div> 上装载 Vue 应用程序，则应传递 #app ：

Vue.createApp(/* 选项 */).mount('#app')

尽管不严格与 MVVM 模式相关联，但 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

Vue 应用程序由使用 CreateAppe 创建的根 Vue 实例组成，可以选择地组织成嵌套的、可重用组件的树。例如，todo 应用的组件树可能如下所示：

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

数据与方法

当一个 Vue 实例被创建时，它将在其数据中找到的所有属性添加到 Vue 的反应性系统中。当这些属性的值发生变化时，视图将“响应”，更新以匹配新值。

示例：

const data = { a: 1 }
const vm = Vue.createApp({
  data() {
    return data  
  }
}).mount('#app')

console.log(vm.a === data.a) // 输出： true

vm.a = 2
console.log(data.a) // 输出：2

当此数据更改时，视图将重新渲染。应该注意的是，数据中的属性只有在创建实例时存在时才是反应性的。这意味着如果添加新属性，例如：

vm.b = 'hi'

那么对 b 的更改将不会触发任何视图更新。如果您知道以后需要一个属性，但它开始时为空或不存在，则需要设置一些初始值。例如：

data() {
  return {
    newTodoText: '',
    visitCount: 0,
    hideCompletedTodos: false,
    todos: [],
    error: null
  }
}

唯一的例外是 Object.freeze()，它阻止了现有性质的改变，这也意味着反应性系统无法跟踪变化。

const obj = {
  name: 'xkd'
}

Object.freeze(obj)

const vm = Vue.createApp({
  data() {
    return obj
  }
}).mount('#app')

<div id="app">
  <p>{{ name }}</p>
  <button v-on:click="name = 'xkd'">改变它</button>
</div>

除了数据属性之外，Vue 实例还公开了许多有用的实例属性和方法。它们以 $ 作为前缀，以区别于用户定义的属性。

示例：

例如下面这个例子：

const vm = Vue.createApp({
  data() {
    return {
      a: 1
    }
  }
}).mount('#app')

console.log(vm.$data.a)  // 输出： 1

实例

上一节我们已经出创建好了一个 my_vue 的项目，并且通过命令启动了这个项目。假设现在我们需要浏览器显示内容 “你好，侠课岛！”，需要怎么做呢？

首先我们先通过 createApp() 函数在 main.js 中创建一个 Vue 实例，并将这个实例挂载到 id 为 app 的节点上，

const HelloVueApp = {
    data() {
      return {
        message: '你好，侠课岛!'
      }
    }
  }
Vue.createApp(HelloVueApp).mount('#hello-vue')

然后 HTML 中定义了 id 为 app 的 DOM 元素，修改后的 index.html 文件内容为：

<div id="hello-xkd">
    {{ message }}
</div>

刷新浏览器，可以看到页面如下内容：

可以看到 id 为 app 的节点内 {{ message }} 被替换成了 “你好，侠课岛!”。