vue3入门

一、setup
1、setup是所有Composition API"表演的舞台"
2、组件中所用到的：数据、方法等等，均要配置在setup中
3、setup函数的两种返回值：

• 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用
• 若返回一个渲染函数，则可以自定义渲染内容

4、注意点：

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

  • Vue2.x配置（data、methods、computed…）中可以访问到setup中的属性、方法。

  • 但在setup中不能访问到Vue2.x配置（data、methods、computed…）。

  • 如果有重名，setup优先

• setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。
• setup函数会在beforeCreate、created之前执行，vue3也是取消了这两个钩子，统一用setup代替，该函数相当于一个生命周期函数，vue中过去的data、method、watch等全部都用对应的新增api写在setup()函数中。

二、ref()

• 作用：定义一个响应式的数据
• 语法：const xxx = ref(initValue)
  • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）
  • JS中操作数据：xxx.value
  • 模板中读取数据：不需要value，直接：
    {{xxx}}
• 备注：
  • 接收的数据可以是：基本类型，也可以是对象类型
  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的
  • 对象类型的数据：内部“求助”了Vue3.0中的一个新函数-----reactive函数

三、reactive

• 作用：定义一个对影响类型的响应式数据
• 语法：const代理对象 = reactive（源对象）接收一个对象（或数组），返回一个代理对象（proxy的实例对象，简称proxy对象）
• reactive定义的响应式数据是“深层次的”
• 内部基于ES6的proxy实现，通过代理对象操作源对象内部数据进行操作。reactive()函数接收一个普通对象，返回一个响应式的数据对象，相当于vue2.x中的vue.observable()API,响应式转换时“深层”的-它影响所有嵌套属性。基于proxy来实现，想要使用创建的响应式数据也很简单，创建出来hi后，在setup中return出去，直接在template中调用即可。

四、reactive对比ref

• 从定义数据角度对比
  • ref用来定义：基本类型数据
  • reactive用来定义：对象（或数组）类型数据
  • 备注：ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象
• 从原理角度对比
  • ref通过objectdefineProperty()的get与set来实现响应式。
  • reactive通过proxy来实现响应式，并通过reflect操作源对象内部的数据
• 从使用角度对比
  • ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value
  • reactive定义的数据：操作数据与读取数据均不需要.value