Vue3.x 全家桶 | 06 - Vue 的 Options API : data

一、Vue 的 Options API

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

Options API 的核心选项包括:

  • data:

    • 类型: ObjectFunction
    • 作用: 用于定义 Vue 实例的响应式数据。可以是一个对象(Vue2.x),也可以是一个返回对象的函数。
  • methods:

    • 类型: Object
    • 作用: 用于定义Vue实例的方法,这些方法可以在模板中调用或在生命周期钩子中使用。
  • computed:

    • 类型: Object
    • 作用: 用于定义计算属性,提供一种便捷的方式来监听和计算Vue实例中的属性。
  • watch:

    • 类型: Object
    • 作用: 用于监听Vue实例中数据的变化,并在数据变化时执行相应的操作。
  • props:

    • 类型: ArrayObject
    • 作用: 用于接收父组件传递过来的属性。在子组件中,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 实例的响应式数据。比如在文章中的 messagevehicles 等,可以是一个对象,也可以是一个返回对象的函数。

创建 HTML 页面,并创建一个 Vue 实例:

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>

  <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 关键字:

js 复制代码
const app = Vue.createApp({
  data(){}
})

app.mount('#app')

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

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

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

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">
      <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 选项传入一个函数:

js 复制代码
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 对象的值,实现响应式功能:

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">
      <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 的内容:

相关推荐
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
谢尔登8 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法
kk_stoper9 小时前
如何通过API查询实时能源期货价格
java·开发语言·javascript·数据结构·python·能源
晨枫阳9 小时前
前端VUE项目-day1
前端·javascript·vue.js
颜酱9 小时前
抽离ant-design后台的公共查询设置
前端·javascript·ant design
绅士玖9 小时前
JavaScript 设计模式之单例模式🚀
前端·javascript·设计模式
Dream耀9 小时前
useReducer:React界的"灭霸手套",一个dispatch搞定所有状态乱局
前端·javascript·react.js
余大侠在劈柴10 小时前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf
拾光拾趣录10 小时前
JavaScript屏幕切换检测方案
前端·javascript