Vue3.x 全家桶 | 03 - Vue 的 Options API

最新推荐文章于 2024-07-21 19:49:56 发布

Riemann Hypothesis

最新推荐文章于 2024-07-21 19:49:56 发布

阅读量1.3k

点赞数 26

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/JingnanJia/article/details/136413256

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

iShot_2023-12-21_18.33.21.png

一、Vue 实例的 template

在前面的文章中，我们都是把 HTML 结构放在 template 属性中；在 Vue 的语法中 template 就是用于定义组件模板的选项，描述组件的结构和布局。

我们可以像前面的文章一样把 HTML 代码放在 createApp 方法的参数对象的 template 属性中，作为 template 的属性值：

const app = Vue.createApp({
  template: `
    <h2>计数器 {{counter}}</h2>
    <button v-on:click="increment">+1</button>
    <button v-on:click="decrement">-1</button>
  `,
  data: function(){
    return {
      counter: 0
    }
  },
  methods: {
    increment: function(){
      this.counter++
    },
    decrement: function(){
      this.counter--
    }
  },
})

app.mount('#app')

template 选项声明的 HTML 结构会完全替换掉 div#app 中的内容，我们可以来给 div#app 中增加一些内容，创建一个 HTML 页面，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>div#app中原本的内容</div>
  </div>

  <script src="../lib/vue.js"></script>
</body>
</html>

使用 LiverServer 打开 HTML 页面：

在 HTML 中增加上述的 JS 代码，再次刷新页面

可以看到 div#app 中原有的内容全部被 template 选项声明的 HTML 结构替换掉了。

但是如果 HTML 结构比较庞大，会造成大量的 HTML 代码堆积在 script 标签的 JS 代码中，不好维护，通常我们会把 template 声明的 HTML 结构放在 body 标签，可以将上述代码改成如下形式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>计数器 {{counter}}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>

  <script src="../lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      data: function(){
        return {
          counter: 0
        }
      },
      methods: {
        increment: function(){
          this.counter++
        },
        decrement: function(){
          this.counter--
        }
      },
    })

    app.mount('#app')
  </script>
</body>
</html>

Dec-21-2023 15-30-59.gif

createApp 方法传入的对象参数中没有 template 属性，默认就会渲染 div#app 里面的内容。

Vue 语法中，template 是 Vue 实例的一个配置选项，其类型可以是字符串、函数或者返回字符串的函数，在 template 中我们可以使用包含插值表达、指令如 v-for、v-model 等以及其他 Vue 模板语法。

在之后的 Vue 组件化开发中 template 有着非常重要的作用：

定义组件的结构： template 用于描述组件的HTML结构，包括元素、样式、布局等。这允许开发者以一种更模块化、可复用的方式构建用户界面。
```
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>
```
支持动态数据绑定： 在template中可以使用插值表达式({{ expression }})、指令（如v-bind、v-for、v-if等）等Vue模板语法，从而实现对数据的动态绑定。
```
<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</template>
```
提高代码可读性： 通过将模板从 JavaScript 代码中分离出来，使得代码更加清晰、易读。template允许开发者专注于组件的外观和结构，而不必在 JavaScript 中嵌入大段的 HTML 代码。
```
<template>
  <div>
    
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>
```

提供单文件组件支持： 在实际项目中，通常使用单文件组件（.vue文件），该文件中包含了模板、脚本和样式。template 是其中的一部分，用于定义组件的 HTML 结构。

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue Component',
      content: 'This is a Vue component.'
    };
  }
};
</script>

<style scoped>
/* 样式定义 */
</style>

template 在Vue的组件化开发中扮演着定义组件外观的重要角色，使得我们可以更加灵活地构建用户界面，并且提高了代码的可维护性和可读性。

template 是 Vue 语法中 Options API 中的 Options: Rendering 模块的语法，类似的还有插槽 slot 等。

Options:Rendering 是指 Vue 实例的一系列选项，用于配置渲染相关的行为。这些选项影响Vue组件的渲染过程，包括模板的编译、虚拟DOM的生成和更新、渲染函数的执行等。

二、Vue 的 Options API

Vue 的 Options API 是指在创建 Vue 实例时可以传递的一组选项，用于配置实例的行为、数据、方法等。通过这些选项，你可以定义 Vue 实例的各个方面，使其符合你的需求。Options API 是 Vue.js 最早引入的 API，它提供了一种基于对象的配置方式。

Options API 的核心选项包括：

data:
- 类型： Object 或 Function
- 作用： 用于定义 Vue 实例的响应式数据。可以是一个对象（Vue2.x），也可以是一个返回对象的函数。
methods:
- 类型： Object
- 作用： 用于定义Vue实例的方法，这些方法可以在模板中调用或在生命周期钩子中使用。
computed:
- 类型： Object
- 作用： 用于定义计算属性，提供一种便捷的方式来监听和计算Vue实例中的属性。
watch:
- 类型： Object
- 作用： 用于监听Vue实例中数据的变化，并在数据变化时执行相应的操作。
props:
- 类型： Array 或 Object
- 作用： 用于接收父组件传递过来的属性。在子组件中，props可以用来接收父组件传递的数据。
computed:
- 类型： Object
- 作用： 用于定义计算属性，提供一种便捷的方式来监听和计算Vue实例中的属性。
watch:
- 类型： Object
- 作用： 用于监听Vue实例中数据的变化，并在数据变化时执行相应的操作。
created, mounted, updated, destroyed:
- 类型： Function
- 作用： 分别对应 Vue 实例的生命周期钩子，可以在不同的生命周期阶段执行相应的操作。

Options API 是 Vue2 中就已经提供的一种基本的配置方式，在 Vue3 还提供了 Composition API，这是一种基于函数的 API，Composition API 的灵活性和可组合性更高，可以更好地处理复杂的逻辑和状态管理。

三、Options API `data` 选项

data 选项用于定义 Vue 实例的响应式数据。比如在文章中的 message、vehicles 等，可以是一个对象，也可以是一个返回对象的函数。

创建 HTML 页面，并创建一个 Vue 实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
  </div>

  <script src="../lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      template: ``,
      data: function() {},
      methods: {}
    })

    app.mount('#app')
  </script>
</body>
</html>

在绑定了具体的元素后，template 选项可以省略，methods 选项只有在绑定函数时才需要书写，data 选项也可以使用简写的形式，省略 function 关键字：

const app = Vue.createApp({
  data(){}
})

app.mount('#app')

这种写法是 ES6 的写法，即对象增强部分的写法。

data 选项（有时也称为属性）是传入一个函数，并且该函数需要返回一个对象；在 Vue2.x 的时候，可以传入一个对象，虽然官方推荐是传入一个函数；但是在 Vue3.x 中必须传入一个函数，否则会在浏览器中报错。

创建一个新的 HTML 页面，并给 data 选项一个对象，使用插值语法在也页面中渲染该对象，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="app">
      <h1>{{vehicle}}</h1>
    </div>

  <script src="../lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      data: {
        vehicle: "Model 3"
      },
    })
 
    app.mount('#app')
  </script>
</body>
</html>

使用 LiverServer 打开 HTML 页面：

可以看到控制台中有明显的报错 “data 选项必须是一个函数”！

接下来我们可以给 data 选项传入一个函数：

const app = Vue.createApp({
  data() {
    console.log("data选项中传入的函数执行了！")
    return {
      vehicle: "Model #"
    }
  }
})

app.mount('#app')

刷新 HTML 页面：

data 选项中返回的对象会被 Vue 的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理；所以我们在 template 或者 app 中通过 {{vehicle}} 访问 vehicle，可以从对象中获取数据，当我们在修改 vehicle 时，app 中的 {{vehicle}} 也会改变。

在 Vue2.x 中，Vue 使用了 Object.defineProperty() 来劫持对象的属性。每个组件实例都有一个“观察者”（Watcher）对象，该对象会在数据变化时收到通知并触发视图更新。当一个组件的数据被访问时，Vue 会将这个属性添加一个依赖，当该属性被修改时，会通知所有依赖进行更新。

Vue3.x 使用了 Proxy 对象来替代 Object.defineProperty()。Proxy 提供了更灵活和强大的拦截器，可以拦截对象的各种操作，包括 get 和 set。这使得 Vue3.x 在性能和功能上都有一些优势。

在上述 HTML 页面中增加按钮来修改 vehicle 对象的值，实现响应式功能：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="app">
      <h1>{{vehicle}}</h1>
      <button v-on:click="changeVehicle">Change Vehicle</button>
    </div>

  <script src="../lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        console.log("data选项中传入的函数执行了！")
        return {
          vehicle: "Model 3"
        }
      },
      methods: {
        changeVehicle(){
          console.log("methods 选中的 changeVehicle 函数执行了！")
          this.vehicle = "Model S"
        }
      },
    })
 
    app.mount('#app')
  </script>
</body>
</html>

刷新 HTML 页面，点击按钮修改 Vehicle 的内容：

Dec-22-2023 01-08-29.gif

Riemann Hypothesis

关注

26
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
Vue3.x 全家桶 | 03 - Vue 的 Options API

在前面的文章中，我们都是把 HTML 结构放在属性中；在 Vue 的语法中就是用于定义组件模板的选项，描述组件的结构和布局。我们可以像前面的文章一样把 HTML 代码放在方法的参数对象的属性中，作为的属性值：选项声明的 HTML 结构会完全替换掉中的内容，我们可以来给中增加一些内容，创建一个 HTML 页面，内容如下：使用 LiverServer 打开 HTML 页面：在 HTML 中增加上述的 JS 代码，再次刷新页面可以看到中原有的内容全部被选项声明的 HTML
复制链接

扫一扫