vue3学习笔记——setup()

前言:

这是个人学习vue3的笔记，文章内容仅自己学习理解。如有错误或者不足地方强烈欢迎各位指正！

一、特性和作用
setup（） 函数是vue3一大特性函数。
setup 方法 代替了 vue2 的 data,method，watch数据和方法全部写到setup（）中。
setup 函数是 CompositionAPI（组合式API） 的入口函数。通过return来暴露我们需要使用的数据。

CompositionAPI(组合式API) ：以业务逻辑为中心,当业务比较多时,能使代码更加内聚，可以并置与同一逻辑问题相关的代码

简单例子

	// 使用函数前需要引入
import {ref} from "vue"
  setup(){      
      let her = "superman"     
      const girl = ref(["热巴","娜扎","叽里呱啦"])
      return{        // 定义了需要return 出来
        girl,her
      }
    }

还可以写成——直接返回对象

返回的所有内容都通过setup 暴露出去， （计算属性，方法，生命周期挂钩等）以及组件的模板。

   setup(props, { attrs, slots, emit }) {
      return {
        content: ' setup 中返回的数据',
        onLog: () => {
          console.log('调用 onLog')
        }
      }
    },
    template: `
      <div>
        {{content}}
        <button @click="onLog">log</button>  
      </div>
    `

跟vue2相比，在beforeCreate和created 之前就执行了。也可以理解为代替了这两个钩子函数setup（）执行的时候data，methods 都是未初始化的，不能够调用。所以this 替换成了 undefined

setup有两个参数

• props 接收数据(响应式)
• context 是一个普通的Javascript对象,渲染到上下文。可在模板使用

Props

setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。但是，因为 props 是响应式的，你不能使用 ES6
解构，因为它会消除 prop 的响应性。 toRefs来结构 props（需要先import 引入）

context

这个对象暴露了三个组件的属性，非响应式数据。可以通过解构方式获取

attrs： 它是绑定到组件中的 非 props 数据，并且是非响应式的。
slots： 是组件的插槽，同样也不是 响应式的。
emit：是一个方法，相当于 vue2 中的 this.$emit 方法。

// setup(props, context) { 
 setup(props, { attrs, slots, emit }) {
      // Attribute (非响应式对象) 非 props 数据
      console.log(attrs)
      // 插槽 (非响应式对象)
      console.log(slots);
      // 触发事件 (方法) === this.$emit
      console.log(emit);
    }

注意点：

1、在setup()使用的声明周期的钩子函数或者其他函数方法都需要使用import 引用之后才能使用
2、在setup（）函数中定义的数据或方法都需要return 暴露出去。否则在模板中无法使用
3、setup()函数只能够同步，不能够异步操作。
4、provide/inject 只能写在setUp
5、setup()内使用响应式数据时，需要通过.value获取。返回的对象property 可以在模板中被访问，自动展开。不需要value