【原】vue3学习笔记

初始化项目

 https://www./yingyuying/ymxmox/bwg0mz

一、setup

1. 1.setup是vue3.0新的配置项，值为函数

2. 2.组件中所有的数据、方法等等，必须配置在setup中

3. 3.重点：劲量不要与vue2.0配置混用，vue2.0配置的data、method、computed可以访问到setup中属性、方法，但是setup不能访问vue2.0配置(data、methods、computed)，如果有重名setup优先

4. 4.setup不能async函数，返回值只是promise，不是return的对象。后期也可以返回promise实例，需要Suspense和异步组件配合

二、ref函数

● 作用: 定义一个响应式的数据 

● 语法: const xxx = ref(initValue) 

○ 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。 

○ JS中操作数据： xxx.value 

○ 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>

● 备注： 

○ 接收的数据可以是：基本类型、也可以是对象类型。

○ 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。 

○ 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

三、reactive函数

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

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

● reactive定义的响应式数据是“深层次的”。 

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

ref对比reactive函数 

○ ref用来定义：基本类型数据。 

○ reactive用来定义：对象（或数组）类型数据 使用角度 ref需要.value操作数据，而reactive不需要。

父子组件传值

作用：重用组件，需要父组件传值子组件。父组件，通过provide(key,val)函数发送，子组件通过inject(key)接收对象

setup语法糖 

参考教程：https://www.cnblogs.com/icey-Tang/p/17009944.html