vue3 入门学习 第一篇

认识Composition Api

vue2是选项式api options api 它将不同的东西放到不用的选项中 比如
数据放入data 函数放入 methods 等等

弊端

1. 当我们实现某一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中；
2. 当我们组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分散；
3. 尤其对于那些一开始没有编写这些组件的人来说，这个组件的代码是难以阅读和理解的（阅读组件的其他人）
   

Setup函数的基本使用

之前在选项中写的内容都可以写到setup函数中
setup( props , context ){

}
setup 函数中有二个参数
1 props
2 context
props 非常好理解，它其实就是父组件传递过来的属性会被放到props对象中，我们在setup中如果需要使用，那么就可以直接通过props参数获取

1. 对于定义props的类型，我们还是和之前的规则是一样的，在props选项中定义；
2. 并且在template中依然是可以正常去使用props中的属性，比如message；
3. 如果我们在setup函数中想要使用props，那么不可以通过 this 去获取
4. 因为props有直接作为参数传递到setup函数中，所以我们可以直接通过参数来使用即可

另外一个参数是context ，我们也称之为是一个SetupContext，它里面包含三个属性：
attrs：所有的非prop的attribute；
slots：父组件传递过来的插槽（这个在以渲染函数返回时会有作用，后面会讲到）；
emit：当我们组件内部需要发出事件时会用到emit（因为我们不能访问this，所以不可以通过 this.$emit发出事件）；

setup函数的返回值

1. setup的返回值可以在模板template中被使用；
2. 也就是说我们可以通过setup的返回值来替代data选项；

	<template>
	{{name}}
	</template>

	setup{
	 const name = 'zc'
	 return {
	   name
	 }
	}

Setup中数据的响应式

Reactive

reactive 用来定义复杂数据类型
什么时候用reactive呢
一般本地的静态复杂数据类型用reactive 通过请求后台数据得到的复杂数据用ref来接受

const obj = reactive({
     name:'zc',
     age:18
 })

Ref

ref可以用来接受简单数据类型
获取值的时候 需要用 .value
但是在模版中已经自动解包 不需要使用 .value来获取值

const name = ref('zc')
console.log( name.value )

toRefs

如果我们使用ES6的解构语法，对reactive返回的对象进行解构获取值，那么之后无论是修改结构后的变量，还是修改reactive返回的state对象，数据都不再是响应式的

const state = reactive({
  name:'why',
  age:18
})
const {name,age} = state

那么有没有办法让我们解构出来的属性是响应式的呢？
Vue为我们提供了一个toRefs的函数，可以将reactive返回的对象中的属性都转成ref；
那么我们再次进行结构出来的 name 和 age 本身都是 ref的；

const { name , age } = toRefs(state)

toRef

如果我们只希望转换一个reactive对象中的属性为ref, 那么可以使用toRef的方法
const name = toRef( state,‘name’ )

setup中禁止使用this

官方关于this有这样一段描述

表达的含义是this并没有指向当前组件实例；
并且在setup被调用之前，data、computed、methods等都没有被解析；
所以无法在setup中获取this；