这是我参与「第四届青训营 」笔记创作活动的第十五天

setup 函数

setup() 函数是 vue3 中，专门为组件提供的新属性。setup 函数会在 beforeCreate 、created 之前执行, vue3也是取消了这两个钩子，统一用setup代替, 该函数相当于一个生命周期函数，vue中过去的data，methods，watch等全部都用对应的新增api写在setup()函数中
基本用法

setup(){
    const a = 1
    return {
        a
    }
}

访问 props 函数中的第一个参数setup是props参数。

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

设置context 传递给setup函数的第二个参数是一个context对象。

export default {
  setup(props, context) {
    console.log(context.attrs)

    console.log(context.slots)

    console.log(context.emit)

    console.log(context.expose)
  }
}

setup还可以返回一个渲染函数，该函数可以直接使用在同一范围内声明的反应状态

import { h, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return () => h('div', count.value)
  }
}

Reactive

reactive() 函数接收一个普通对象，返回一个响应式的数据对象。响应式转换是“深层”的——它影响所有嵌套属性
例子

const count = ref(1)
const obj = reactive({ count })

console.log(obj.count === count.value) // true

count.value++
console.log(count.value) // 2
console.log(obj.count) // 2

obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3

shallowReactive

创建一个响应式代理，它跟踪其自身属性的响应性shallowReactive生成非递归响应数据，只监听第一层数据的变化，但不执行嵌套对象的深层响应式转换 (暴露原始值)。
例子

const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2
  }
})

// mutating state's own properties is reactive
state.foo++

// ...but does not convert nested objects
isReactive(state.nested) // false

// NOT reactive
state.nested.bar++

ref()

ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 value 属性, 只在setup函数内部访问ref函数需要加.value

例子

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

总结

本文主要介绍了Vue3中新增的几个属性的用法，并用了几个简单的例子来进行讲解。希望能对不了解的同学有一定的帮助。

参考

Vue官方文档