【Vue3】vue3——setup，ref函数，reactive函数-阿里云开发者社区

【Vue3】vue3——setup，ref函数，reactive函数

2023-09-06 89

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3】vue3——setup，ref函数，reactive函数

💻 博主主页： 👉🏻 👉🏻 👉🏻 糖－O－

👍👍👍 希望各位博主多多支持！！！

1.setup

组件中所用到的：数据、方法等等，均要配置在setup中

setup函数的两种返回值：

若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点注意）
若返回一个渲染函数：则可以自定义渲染内容。

注意：

vue2可以读取vue3里面的数据

如果 vue2和vue3冲突,会用vue3的,所以

尽量不要与Vue2.x配置混用

Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法
但在setup中不能访问到Vue2.x配置（data、methods、computed…）
如果有重名, setup优先

setup不能是一个async函数，因为返回值不再是return的对象, promise,
模板看不到return对象中的属性

2.ref函数

可以定义一个响应式的数据

语法:const xxx = ref(initValue)

JS中操作时： xxx.value
模板中读取数据: 不需要.value，直接：{{xxx}}

注：

接收的数据可以是：基本类型、也可以是对象类型
基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的

3.reactive函数

一个对象类型的响应式数据（基本类型不要用它，要用ref函数）

const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）

4.Vue3.0中的响应式原理

vue2.x的响应式

对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）
数组类型：通过重写更新数组的一系列方法来实现拦截

Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})

但是存在一些问题：新增属性、删除属性, 界面不会更新；直接通过下标修改数组, 界面不会自动更新。

Vue3.0的响应式

通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等
通过Reflect（反射）: 对源对象的属性进行操作

new Proxy(data, {
  // 拦截读取属性值
    get (target, prop) {
      return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
      return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
      return Reflect.deleteProperty(target, prop)
    }
})
proxy.name = 'tom'