应用和组件实例

创建一个应用实例

每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的：

1
const app = Vue.createApp({ /* 选项 */ })

应用实例暴露的大多数方法都会返回该同一实例，允许链式：

1
2
3
4
Vue.createApp({})
  .component('SearchInput', SearchInputComponent)
  .directive('focus', FocusDirective)
  .use(LocalePlugin)

传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。
注意：一个应用需要被挂载到一个 DOM 元素中。
例如：如果我们想把一个 Vue 应用挂载到<div id="app"></div>，我们应该传递#app：

1
2
3
const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

组件实例 property

在data中定义的property是通过组件实例暴露的：

1
2
3
4
5
6
7
const app = Vue.createApp({
  data () {
    count: 1
  }
})
const vm = app.mount('#app')
console.log(vm.count) // => 1

可以将用户定义的property添加到组件实例中，例如methods，props，computed，inject和setup。
Vue还通过组件实例暴露了一些内置property，如$attrs和$emit。这些property都有一个$前缀，以避免与用户定义的property名冲突。

生命周期钩子

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeUnmount
  • unmounted
    vue3.0生命周期钩子

常用指令

指令 (Directives) 是带有v-前缀的特殊 attribute。

v-once

不需要表达式，只渲染元素和组件一次。即：只要给元素或者组件添加了v-once指令，那么元素或者组件只会渲染一次，无论组件实例中property的值怎么改变，元素或者组件都不会被重新渲染。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
  <p>插值：{{ msg }}</p>
  <p>v-once插值：<span v-once>{{ msg }}</span></p>
  <button @click="changeMsg">改值</button>
</div>
<script>
  const app = Vue.createApp({
    data () {
      return {
        msg: '插值'
      }
    },
    methods: {
      changeMsg () {
        this.msg = '哈哈哈哈'
      }
    },
  })
  const vm = app.mount('#app')
</script>

v-html

更新元素的 innerHTML。
注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
  <p v-html="rawHtml"></p>
</div>
<script>
  const app = Vue.createApp({
    data () {
      return {
        rawHtml: '<strong>哇哈哈哈</strong>'
      }
    }
  })
  const vm = app.mount('#app')
</script>

v-bind

动态地绑定一个或多个attribute，或一个组件prop到表达式。可以直接缩写:
在绑定class或styleattribute 时，支持其它类型的值，如数组或对象。

1
2
3
4
5
6
<img v-bind:src="imageSrc" />
<!-- 缩写 -->
<img :src="imageSrc" />
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>

v-if

根据表达式的真假值来有条件地渲染元素。
当和v-if一起使用时，v-for的优先级比v-if更高。

1
<div v-if="flag">你看见我了</div>

v-else

前一兄弟元素必须有 v-if 或 v-else-if。

1
2
3
4
5
6
<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-if

前一兄弟元素必须有 v-if 或 v-else-if。

1
2
3
4
5
6
7
8
9
10
11
12
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show

根据表达式的真假值，切换元素的display CSS property。
当条件变化时该指令触发过渡效果。

1
<div v-show>看见我了</div>

与v-if的区别:

  • v-if是通过控制dom节点的存在与否来控制元素的显隐,对元素进行销毁和重建;
  • v-show是通过设置DOM元素的display样式，block为显示，none为隐藏,简单地 CSS 对元素进行切换;
  • v-if会使得页面重绘,v-show则只是是页面重排;
    一般来说v-if有更高的切换开销,而v-show有较高的初始渲染开销,因此,如果需要非常频繁的切换,则试用v-show较好,如果在运行时条件很少改变,则使用用v-show较好