Vue3系列文章 —（2）响应式基础

神在细节之中
233 阅读2分钟

本文已参与[新人创作礼]活动，一起开展掘金创作之路。

note: 当使用组合式API风格编码时，默认采用SFC + 组合式API + setup

1. 什么是响应式？

响应式 : 指当数据改变之后，用到这些数据的视图和依赖这些数据的数据会自动更新，以便正确展示改变之后的数据

例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。

响应式数据 ： 就是上面提到的数据，这种数据的改变会导致用到他们的视图的自动更新

2. 为什么我们需要响应式？

  1. 不需要开发者自己去操作DOM来更新页面

3. 怎么定义响应式数据？

选项式API 怎么定义？

这里需要介绍一个配置项 —— data 函数，该函数用来定义响应式数据

  • data函数返回一个对象，该对象中的数据会被Vue做成响应式数据
  • 写法
<script>
  //语法糖 : 用配置对象来创建组件并暴露出去
  const { createApp } = Vue
  //步骤三: 创建Vue实例
  const config = {
    // data() 返回的属性将会成为响应式的状态
    // 并且暴露在 `this` 上
    data() {
      return {
         num : 1
      }
    },
  }  
  const app1 = createApp(config)
  //步骤四 : 指定实例app1为id为app的这个容器服务
  app1.mount('#app')  
</script>
  • data函数在Vue实例创建的时候调用，然后Vue把该函数返回的对象中声明的数据做成响应式的

组合式API 怎么定义？

  1. ref函数
  • 作用 ： 用来定义响应式数据(适合用来定义基本类型)

ref也可以用来定义对象（或数组）类型数据。但它内部会调用reactive函数来处理

  • 语法 : const xxx = ref（value）
  • 参数 ： 接受一个参数，类型任意(但建议只用于声明普通类型的数据)
  • 返回值 ： 返回一个包含参数的引用对象
  • JS中操作数据 : xxx.value
  • 模板中读取数据 : 不用.value,直接<div>{{xxx}}<div>
  • 原理 ： 通过Object.defineProperty()来实现响应式
  1. reactive函数
  • 作用 ：用来定义一个响应式对象或数组
  • 语法 : const objsever = reactive(obj)
  • 参数 ：接受一个参数，该参数是个数组或对象
  • 返回值 ： 返回一个代理对象
  • 操作读取数据 ： 不用.value
  • 原理 ：使用Proxy来实现响应式
  1. 案例
<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })
console.log(state.count)
const num = ref(0)
console.log(num.value)  

</script>

4. 怎么使用响应式数据？

这里我们介绍一下模板语法，Vue3通过模板语法来使用响应式数据

  1. 模板语法 ： {{}}

模板语法只能在Vue实例服务的容器或者组件中的模板标签中使用（这样才会被Vue正确的渲染）

{{ state.count }}

选项式API

完整案例

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">

  </head>
  <body>
    <!--步骤一: 声明一个id为app的容器-->
    <div id="app">
      {{state.count}}
    </div>
  </body>
</html>

<!--步骤二: 引入Vue.js-->
<script type="text/javascript" src="https://unpkg.com/vue@3/dist/vue.global.js"></script>


<script>
const { createApp } = Vue
//步骤三: 创建Vue实例  
const config = {
  data() {
      return {
        state : {
          count :1
        }
      }
    },
}  
const app1 = createApp(config)
//步骤四 : 指定实例app1为id为app的这个容器服务
app1.mount('#app')
</script>

组合式API

  1. 要想使用这些定义的响应式数据，必须在 <script setup>标签中定义他们
  2. <script setup> 中的顶层的导入和变量声明可在同一组件的模板中直接使用
  • 完整案例
<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })
const num = ref(0)
</script>

<template>
  {{ state.count }}
</template>
avatar
文章
阅读
粉丝