Vue3关于setup、ref、reactive属性

前言: 

• vue2 的问题: 自动无偏差的把所有数据项都改为监听器 -- 消耗资源
• vue3: 把自动改手动 -- 人为判断 给哪些属性加监听器

1. ref: 给单个值添加监听
2. reactive: 利用 proxy 给对象类型加监听
3. toRefs: 把 proxy 转为 多个 ref 组成的对象

vue2 : 属于选项式编程 - vue对象本身携带着所有的功能, 用户只需要通过选项来开启功能即可;

vue3: 兼容vue2的所有语法 -- 为了用户过渡方便

        -- 额外增加 组合式语法 composition, 把功能模块化, 用户需要什么功能, 就临时单独引入什么功 能

setup

setup:安装,设置 -- 数据

vue3中一个新的配置项, 值为一个函数

vue2中的 data watch methods computed 都放在这里生成

setup函数的两种返回值:

1. 若返回一个对象, 则对象中的属性与方法, 在模板中均可直接使用
2. 若返回一个渲染函数: 则可以自定义渲染内容

ref

在vue3中ref函数的作用是定义一个响应式的数据

语法: let xx = ref(initValue)

需要用到响应式的数据要用ref包裹了(前提是要提前引入ref), 在JS中操作数据: xxx.value

在模板中读取数据的时候: 不需要.value, 直接:

{{xxx}}

注意:

1. 接收的数据可以是: 基本类型, 也可以是对象类型
2. 基本类型的数据: 响应式依然是靠Object.defineProperty()中的get与set完成的
3. 对象类型的数据: 内部"求助"了Vue3中的一个新函数 ------ reactive函数

reactive函数

作用: 定义一个对象类型的响应式数据(基本类型不要用它, 要用ref函数)

使用方法: let 代理对象 = reactive(源对象)接收一个对象(或数组), 返回一个代理对象(proxy对象)

reactive定义的响应式数据是"深层次的"

内部基于ES6的Proxy实现, 通过代理对象操作源对象内部数据进行操作

使用reactive函数是不需要.value来读取的

下一节介绍一下Vue3中的响应式原理