本文已参与「新人创作礼」活动，一起开启掘金创作之路。

vue3的正式版本到了vue3.2，下面我们介绍下，vue2与vue3的主要区别，让大家比较清晰了解vue3做了哪些的改变。vue3官方文档[ ](API | Vue.js (vuejs.org))

1. setup

setup是vue3最大的改变，也是vue3 composition API最主要的方法。

vue2中，方法要写在 methods 里面，计算属性写在 computed 中，父子组件通讯使用 props，生命周期 created、mounted等，vue3把这些都放到了 setup() 里面，让他们更方便的操作，那setup()到底是什么呢

理解
- Vue3.0中一个新的配置项，值为一个函数，setup是所有Composition API（组合API）的开始，学习vue3必须要好好理解setup
刚说过，组件中所用到的：数据、方法、生命周期等等，均要配置在setup中
返回值
- 返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用
- 返回一个渲染函数，则可以自定义渲染内容
注意点
- 不要和vue2配置混搭使用
  - Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
  - 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
  - 如果有重名, setup优先。
- setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性

使用

基本使用

export default {
    setup() {
        const count = ref(0)

        return {
          count
        }
    }
}

访问 Prop

export default {
    setup(props) {
        const { title } = toRefs(props)
        console.log(title.value)
        const title = toRef(props, 'title')
      }
}

setup() 两个注意点
- setup执行的时机
  - 在beforeCreate之前执行一次，this是undefined。
- setup的参数
  - props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
  - context：上下文对象
    - attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
    - slots: 收到的插槽内容, 相当于 this.$slots。
    - emit: 分发自定义事件的函数, 相当于 this.$emit。

2. ref

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

3. reactive

作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：
- const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
reactive定义的响应式数据是“深层次的”
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作

reactive对比ref

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

vue3.0 的改变（1） - 05

1. setup

2. ref

3. reactive