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>