前言:
- vue2 的问题: 自动无偏差的把所有数据项都改为监听器 -- 消耗资源
- vue3: 把自动改手动 -- 人为判断 给哪些属性加监听器
- ref: 给单个值添加监听
- reactive: 利用 proxy 给对象类型加监听
- toRefs: 把 proxy 转为 多个 ref 组成的对象
vue2 : 属于选项式编程 - vue对象本身携带着所有的功能, 用户只需要通过选项来开启功能即可;
vue3: 兼容vue2的所有语法 -- 为了用户过渡方便
-- 额外增加 组合式语法 composition, 把功能模块化, 用户需要什么功能, 就临时单独引入什么功 能
setup
setup:安装,设置 -- 数据
vue3中一个新的配置项, 值为一个函数
vue2中的 data watch methods computed 都放在这里生成
setup函数的两种返回值:
- 若返回一个对象, 则对象中的属性与方法, 在模板中均可直接使用
- 若返回一个渲染函数: 则可以自定义渲染内容
<script lang="ts">
export default defineComponent({
setup() {
let xx = xxx
function xxx(){}
},
})
</script>
ref
在vue3中ref函数的作用是定义一个响应式的数据
语法: let xx = ref(initValue)
<script>
import {ref} from 'vue'
export default {
name: 'App',
setup(){
let name = ref('张三')
let age = ref(18)
function changeInfo(){
name.value = '李四'
age.value = 20
}
// 返回一个对象(常用)
return {
name,
age,
changeInfo,
}
}
}
</script>
需要用到响应式的数据要用ref包裹了(前提是要提前引入ref), 在JS中操作数据: xxx.value
在模板中读取数据的时候: 不需要.value, 直接: <h1>{ {xxx}}</h1>
注意:
- 接收的数据可以是: 基本类型, 也可以是对象类型
- 基本类型的数据: 响应式依然是靠Object.defineProperty()中的get与set完成的
- 对象类型的数据: 内部"求助"了Vue3中的一个新函数 ------ reactive函数
reactive函数
作用: 定义一个对象类型的响应式数据(基本类型不要用它, 要用ref函数)
使用方法: let 代理对象 = reactive(源对象)接收一个对象(或数组), 返回一个代理对象(proxy对象)
reactive定义的响应式数据是"深层次的"
内部基于ES6的Proxy实现, 通过代理对象操作源对象内部数据进行操作
使用reactive函数是不需要.value来读取的
<template>
<h1>一个人的信息</h1>
<h2>姓名:{
{data.name}}</h2>
<h2>年龄:{
{data.age}}</h2>
<h3>工作种类:{
{data.job.type}}</h3>
<h3>工作薪水:{
{data.job.salary}}</h3>
<h3>爱好:{
{data.hobby}}</h3>
<h3>测试的数据:{
{data.job.a.b.c}}</h3>
<button @click="changeInfo">修改人的信息</button>
</template>
<script>
import {ref,reactive} from 'vue'
export default {
name: 'App',
setup(){
let data = reactive({
name:'张三',
age:18,
job:{
type:'前端工程师',
salary:'30k',
a:{
b:{
c:666
}
}
},
hobby:['抽烟','喝酒','烫头']
})
function changeInfo(){
// name = '李四'
// age = 20
data.name = '李四'
data.age = 20
data.job.type = 'Java工程师'
data.job.salary = '60k'
data.job.a.b.c = 999
data.hobby[0] = '学习'
}
// 返回一个对象(常用)
return {
data,
changeInfo
}
}
}
</script>
下一节介绍一下Vue3中的响应式原理