Vue3.0初体验(2) | 小册免费学

前言

上篇我们说到了Vue3.0的组合Api，现在我们来了解下setup。

什么是setup

setup是Vue3.0新增的方法,而在Vue2.0中的watch等都变成hooks从Vue中解析出来

import {watch} from 'vue'

export default {
    setup() {
       watch(() => {
        }
    }
}
复制代码

setup是用来定义变量和方法的，并且需要return模板才能使用。
从生命周期上来看，setup处于created之前，所以不能使用this,在Vue3.0中为了避免使用错误在setup中this为undefined
steup中接收两个参数context和props

    setup(props,context) {
        console.log(props)
        console.log(context)
    }
复制代码

在控制台可以看到

props是被包在proxy中的，所以其内的数据是响应式的，用法上与Vue2.0是一致的。
context中则是包含了attrs，emit，slot三个属性

• attrs和在2.0中一样，拿到未在props中定义的属性
• slots对应的是组件的插槽，与Vue2.0的this.$slots是对应的。
• emit对应的就是2.0中的this.$emit

返回值

如果setup 放回的是个对象，则会合并到render context中并且可以在template中使用

setup(props,context) {
   const  count = 0
    return{
       count
    }
}
复制代码

返回渲染函数，则需要引入h

import {ref ,reactive,h} from 'vue'
setup(props,context) {
           const  count = 0
            return()=>h('h1','这是一个由模板函数创建的节点')
        }
复制代码

本文内容可能存在不足或者有问题的地方，欢迎各位大佬提出意见，积极响应掘金活动，本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情