一、拉开序幕的setup
理解: Vue3.0中的一个新的配置项,值为一个函数
setup是所有Composition API(组合API)'表演的的舞台'
组件中所用到的: 数据、方法等等,均要配置在setup中
setup函数的两种返回值:
a,若返回一个对象.则对象中的属性、方法,在模板中均可以直接使用(重点)
b,若返回一个渲染函数,则可以自定义渲染内容
注意点:
a,尽量不要与Vue2.x配置混用(包括: Vue2.配置[data、methods、computed....]中可以访问 到setup中的属性、方法; 但在setup中不能访问 到Vue2.x配置[data、methods、computed]; 如果有重名,setup优先)
b,setup不能是一个async函数,因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性(后期也可以返回一个Promise实例, 但需要Suspense和异步组件的配合)
二、ref函数
作用: 定义一个响应式的数据
语法: const test = ref(initValue)
创建一个包含响应式数据的引用对象(reference对象)
JS中操作数据: test.value
模板中读取数据,不需要.value, 直接<div>{{test}}</div>
备注:
接收的数据可以是: 基本类型、也可以是对象类型
基本类型的数据: 响应式依然是靠Object.defineProperty()的get和set完成的
对象类型的数据: 内部'求助'了Vue3.0中的一个新函数------reactive函数(对Proxy函数的实现)
三、reactive函数
作用: 定义一个对象类型的响应式数据(基本类型不需要用到,要用ref函数)
语法:
const state = reactive({
a: 'a',
b: 'b'
...
});
利用const 代理对象 = reactive(源对象)接收一个对象/数组,返回一个 代理对象(proxy的实例对象,简称proxy对象)
reactive定义的响应式数据是'深层次的'
内部基于ES6的proxy实现,通过代理对象操作源对象内部数据进行操作
四、Vue3.0中的响应式原理
4.1、vue2.x的响应式
实现原理:
对象类型: 通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)
数组类型: 通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行了包裹)
存在问题:
新增属性、删除属性,界面不会更新
直接通过下标修改数组,界面不会自动更新
4.2、Vue3.0的响应式
实现原理:
通过Proxy(代理):拦截对象中任意属性的变化,包括:属性值的读写,属性的添加、属性的删除等
通过Reflect(反射): 对被代理对象的属性进行操作
MDN中描写的Proxy和Reflect
Proxy(代理):https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
Reflect:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
五、reactive对比ref
从定义数据角度对比
ref用来定义: 基本类型数据
reactive用来定义: 对象(或数组)类型数据
备注: ref可以用来定义对象(或数组)类型数据,它内部会自动通过reactive转为代理对象
从原理角度来看
ref通过Object.defineProperty()的get与set来实现响应式(数据劫持)
reactive通过使用Proxy来实现响应式(数据劫持),并通过Reflect操作原对象内部的数据
从使用角度来看
ref定义的数据: 操作数据需要.value,读取数据时模板中直接读取不需要.value
reactive定义的数据,: 操作数据与读取数据均不需要.value
