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

柳衣白卿

已于 2022-09-20 10:08:28 修改

阅读量374

点赞数 1

分类专栏： Vue 文章标签： vue

于 2022-09-19 15:49:12 首次发布

本文链接：https://blog.csdn.net/qq_50864152/article/details/126935165

版权

Vue 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

✅作者简介：大三学生，专注分享所学知识
✨个人主页：个人主页
🔥系列专栏：Vue3

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

1. 什么是响应式？

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

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

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

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

不需要开发者自己去操作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` 怎么定义？

ref函数

作用：用来定义响应式数据(适合用来定义基本类型)
ref也可以用来定义对象（或数组）类型数据。但它内部会调用reactive函数来处理
语法 : const xxx = ref（value）
参数：接受一个参数，类型任意(但建议只用于声明普通类型的数据)
返回值：返回一个包含参数的引用对象
JS中操作数据 : xxx.value
模板中读取数据 : 不用.value,直接<div>{{xxx}}<div>
原理：通过Object.defineProperty()来实现响应式

reactive函数

作用：用来定义一个响应式对象或数组
语法 : const objsever = reactive(obj)
参数：接受一个参数，该参数是个数组或对象
返回值：返回一个代理对象
操作读取数据：不用.value
原理：使用Proxy来实现响应式

案例

<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通过模板语法来使用响应式数据

模板语法： {{}}

模板语法只能在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

要想使用这些定义的响应式数据，必须在 <script setup>标签中定义他们
<script setup> 中的顶层的导入和变量声明可在同一组件的模板中直接使用

完整案例

<script setup>
import { reactive } from 'vue'

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

<template>
  {{ state.count }}
</template>