Vue3系列文章 —（2）响应式基础
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>