Vue 3 开发指南

# options API

TIP

options API 和 Vue 2 版本的几乎完全相同，这里只写一些不是很常用的

# 1. 案例

在 Vue 3 中，同样可以使用options api去定义一个应用，例如：

// index.js
import { createApp } from 'vue'

const app = {
  data() {
    return {
      counter: 0,
    }
  },
  methods: {
    incrementCounter() {
      this.counter++
    },
  },
}

createApp(app).mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- index.html -->
<div id="app">
  <button @click="incrementCounter">点击自增 counter 的值</button>
  <div>
    counter's value is {{counter}}
  </div>
</div>
1
2
3
4
5
6
7

代码对应 CodeSandbox (opens new window)

# 2. computed/watch

对应文档地址 (opens new window)

  • computed
    • 接收 getter 函数，并返回一个不可变的 ref 响应式对象
    • 或者接收 getter/setter，返回可读可写的 ref 响应式对象
  • watch：监听某个属性的值改变
    • deep：深度监听，如监听一个对象，添加 deep 属性时该对象的属性值发生变化也会触发监听
    • immediate：即时，即立刻触发一次回调
    • flush：控制回调时间，可选值pre|post|sync
      • pre 默认值，在模板渲染前调用回调
      • post 将回调延迟到模板渲染后调用，如果在回调中需要获取 DOM，那么就选择此值
      • sync 值改变就同步调用回调

# 例子：

// index.js
import { createApp } from 'vue'

const app = {
  data() {
    return {
      firstName: 'alex',
      lastName: 'zhang',
      obj: {
        name: 'alex',
        age: 18,
      },
    }
  },
  methods: {
    changeObj() {
      this.obj.age = 19
    },
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName
      },
      set(val) {
        console.log('更改了 fullName 的值，而且值是 ' + val)
        ;[this.firstName, this.lastName] = val.split(' ')
      },
    },
  },
  watch: {
    obj: {
      deep: true, // 不加 deep 不会监听引用对象的值的改变
      immediate: true,
      handler(val) {
        console.log('obj has changed', val)
      },
    },
  },
}

createApp(app).mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!-- index.html -->
<div id="app">
  <div>firstName：<input placeholder="firstName" v-model="firstName" /></div>
  <div>lastName：<input placeholder="lastName" v-model="lastName" /></div>
  <div>fullName：<input placeholder="fullName" v-model="fullName" /></div>
  fullName is {{fullName}}
  <div>
    <button @click="changeObj">更改 obj 的值</button>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10

CodeSandbox 链接 (opens new window)

# 区别：

  • computed具有缓存
  • watch无，一般用于监听某个属性发生变化，能使用computed写的尽量使用computed写
    • watch 一般用于 fetch api，或执行某些异步操作，例如搜索时，根据搜索条件name的变化来请求 api，此时就可以使用watch

# 事件处理

# 1. 多事件处理

（通过,分割不同的处理函数）：

<div @click="handler01($event), handler02($event)"></div>
1

# 2. 事件描述符

文档地址 (opens new window)

  • .stop：event.stopPropagation()，阻止冒泡
  • .prevent：event.preventDefault() 阻止默认行为
  • .capture：事件捕获
  • .self：仅本元素可处理该事件，如果@click.self则阻止除了该元素外的所有元素的点击事件
  • .once：事件仅可触发一次
  • .passive：事件的原生操作会在绑定回调的方法前执行，这个描述符是为了防止回调中有event.preventDefault()

多个描述符可以串联@click.stop.prevent，但是注意串联的顺序

# 生命周期钩子变化

Vue 3 中，生命周期函数更新为：

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUnmount
  • unmounted

# 全局 API 更改

# globalProperties

之前想要在全局上挂载某个属性

Vue.prototype.foo = 'bar'

在 Vue 3 中，请使用globalProperties

const app = createApp({})

app.config.globalProperties.foo = 'bar'
1
2
3

← composition API →