vue3新增特性setup()用法＜与vue2对比＞

setup()

setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的Composition API 新特性提供了统一的入口。

执行时机

setup 函数会在beforeCreate 之后、created 之前执行

setup()的第一个形参props

父组件

<set-up p1="aaaa"></set-up>

子组件set-up

// 在props中定义当前组件允许外界传递过来的参数名称：props:{p1: String}，// 通过setup函数的第一个形参，接收props数据：setup(props){
    console.log(props.p1)}

在vue2中子组件是这样写

props:{p1: String}// 为了让p1不仅可读，还可写，赋值给datadata(){return{p1:this.p1}}

区别就是vue3将data和props的数据都写在了一起

setup()的第二个形参context

setup 函数的第二个形参是一个上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在vue 2.x 中需要通过this 才能访问到，在vue 3.x 中，它们的访问方式如下：

const MyComponent={setup(props, context){
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs}}

注意：在setup() 函数中无法访问到this

reactive()

reactive() 函数接收一个普通对象，返回一个响应式的数据对象。

基本语法

等价于vue 2.x 中的Vue.observable() 函数，vue 3.x 中提供了reactive() 函数，用来创建响应式的数据对象，基本代码示例如下：

import{ reactive}from'@vue/composition-api'// 创建响应式数据对象，得到的 state 类似于 vue 2.x 中 data() 返回的响应式对象const state=reactive({count:0})

定义响应式数据供 template 使用

1. 按需导入reactive 函数：

   import{ reactive}from'vue'

2. 在setup() 函数中调用reactive() 函数，创建响应式数据对象：

   setup(){// 创建响应式数据对象const state=reactive({count:0})// setup 函数中将响应式数据对象 return 出去，供 template 使用return state}

   注意：必须return才能在界面上用，reactive()里面必须是对象

3. 在template 中访问响应式数据：

   <p>当前的 count 值为：{{count}}</p>

vue2的响应式则相对简单，直接在data中定义即可

ref()

基本语法

ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个.value 属性：

import{ ref}from'vue'// 创建响应式数据对象 count，初始值为 0const count=ref(0)// 如果要访问 ref() 创建出来的响应式数据对象的值，必须通过 .value 属性才可以
console.log(count.value)// 输出 0// 让 count 的值 +1
count.value++// 再次打印 count 的值
console.log(count.value)// 输出 1

在 template 中访问 ref 创建的响应式数据

1. 在setup() 中创建响应式数据：

   import{ ref}from'vue'setup(){const count=ref(0)return{
            count,name:ref('zs')}}

2. 在template 中访问响应式数据：

   <template><p>{{count}} --- {{name}}</p></template>

在 reactive 对象中访问 ref 创建的响应式数据

当把ref() 创建出来的响应式数据对象，挂载到reactive() 上时，会自动把响应式数据对象展开为原始的值，不需通过.value 就可以直接被访问，例如：

const count=ref(0)const state=reactive({
  count})

console.log(state.count)// 输出 0
state.count++// 此处不需要通过 .value 就能直接访问原始值
console.log(count)// 输出 1

注意：新的 ref 会覆盖旧的 ref，示例代码如下：

// 创建 ref 并挂载到 reactive 中const c1=ref(0)const state=reactive({
  c1})// 再次创建 ref，命名为 c2const c2=ref(9)// 将 旧 ref c1 替换为 新 ref c2
state.c1= c2
state.c1++

console.log(state.c1)// 输出 10
console.log(c2.value)// 输出 10
console.log(c1.value)// 输出 0

isRef()

isRef() 用来判断某个值是否为ref() 创建出来的对象；应用场景：当需要展开某个可能为ref() 创建出来的值的时候，例如：

import{ isRef}from'@vue/composition-api'const unwrapped=isRef(foo)? foo.value: foo

toRefs()

toRefs() 函数可以将reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是ref() 类型的响应式数据，最常见的应用场景如下：

import{ toRefs}from'vue'setup(){// 定义响应式数据对象const state=reactive({count:0})// 定义页面上可用的事件处理函数constincrement=()=>{
      state.count++}// 在 setup 中返回一个对象供页面使用// 这个对象中可以包含响应式的数据，也可以包含事件处理函数return{// 将state上的每个属性，都转化为ref形式的响应式数据// ...是展开运算符...toRefs(state),// 自增的事件处理函数
      increment}}

页面上可以直接访问setup() 中 return 出来的响应式数据：

<template><div><p>当前的count值为：{{count}}</p><button@click="increment">+1</button></div></template>

总结：

• setup(props,context)，props用来接收组件传来的内容，context用来代替setup()里的this
• reactive()用来接收一个对象，用于创建响应式数据对象，必须要return出去；（不建议使用）
  • 使用的是接收对象里的属性
• ref()用来接收一个值，用于创建响应式数据对象，返回的是一个对象，必须要return出去。
  • 在setup()内需通过.value 就可以直接被访问；
  • 但是在template中会自动解析，不需要.value ;
  • reactive对象中访问ref创建的响应式数据，也不需要.value；ref的对象会直接变成reactive的属性
  • 新的 ref 会覆盖旧的 ref