vue3的setup
这个函数应该是vue3最关键的api了，用官方的说法是"我们的应用在可维护性和灵活性方面走得相当远"，但是作为使用者感觉灵活性比之前是强了些，但是可维护性并没发现有根本的提升，为什么这样讲呢，请允许我先吐槽一下
- 没有降低代码量，该写的方法和逻辑一个没拉下，只不过是集中在一个地方了
- 所有的初始逻辑都要在一个setup函数里面写，而且不能把里面的其他函数拆出来放外面写，代码多了就是一坨...， 反而可维护性有所降低
- 里面的定义的方法等并不能全局分享和复用，只能服务于本页面的组件，跟之前也是一样的，并没实质性差别
不过在使用过程中还是发现了一些便利的地方
- 可以把页面和模块的初始逻辑放在里面，和其他的代码分开维护
- 里面有完整的vue那些方法生命周期和方法钩子，可以完整实现vue的功能
- 作为子组件接受props传值可以在初始化的时候进行数据操作，不需要之前要用内部的computed再去处理了
setup常用方法汇总
ref
这是最常用的方法，如果你想把定义的变量，让dom绑定，或者method里的方法调用，那么就必须用这个方法，否则这个变量就不是响应式的
import { ref} from 'vue'
<template>
<div>
{{name_1}} /* 我变了 */
{{name_2[0]}} /* 我变了 */
</div>
</template>
setup() {
const name_1 = ref('')
const name_2 = ref([])
const name_3 = ref({}) // 错误 对象不能使用此方法做响应式
name_1.value = '我变了' // 内部改变变量的值
name_2.value[0] = '我变了'
return{
name_1,
name_2
}
}
toRef,toRefs
这个方法是对对象进行结构，并返回一个可响应式的变量
import { toRef,toRefs} from 'vue'
<template>
<div>
{{newName_1}} /* name_1 */
{{newName_1}} /* name_2 */
</div>
</template>
setup() {
const obj = reactive({ // 创建响应式对象
name_1:'name_1',
name_2:'name_2'
})
const newName_1 = toRef(obj,'name_1')
const {name_2:newName_2} = toRefs(obj)
console.log(newName_1.value) // name_1
console.log(newName_2.value) // name_2
return {
newName_1,
newName_2
}
}
getCurrentInstance方法
虽然官方不建议在里面调用this，防止方法使用混淆，但是你有需要调用this的方法，比如有跳转路由，获取路由参数，获取vuex的方法... 这个确实很头疼，这个时候就可以使用他提供的getCurrentInstance方法，具体使用方法如下
import { getCurrentInstance} from 'vue'
<template>
<div>
</div>
</template>
setup() {
const user = ref('name')
const _this = getCurrentInstance() // 此方法会把挂载在vue上的类和方法返回出来
const {proxy} = _this // 返回挂载在this上的方法
const route = proxy.$root.$route // 取得根路由方法
const emit = proxy.$root.$emit // 触发父组件方法
...
...
...
return {
user
}
}
getCurrentInstance方法
虽然官方不建议在里面调用this，防止方法使用混淆，但是你有需要调用this的方法，比如有跳转路由，获取路由参数，获取vuex的方法... 这个确实很头疼，这个时候就可以使用他提供的getCurrentInstance方法，具体使用方法如下
import { getCurrentInstance} from 'vue'
<template>
<div>
</div>
</template>
setup() {
const user = ref('name')
const _this = getCurrentInstance() // 此方法会把挂载在vue上的类和方法返回出来
const {proxy} = _this // 返回挂载在this上的方法
const route = proxy.$root.$route // 取得根路由方法
const emit = proxy.$root.$emit // 触发父组件方法
...
...
...
return {
user
}
}
Context方法
这个方法一般是调用父组件的方法和自身组件的插槽用的，其实上一个方法完全都包含了，这里就把官方的拿出来看下
export default {
setup(props, context) {
// Attribute (非响应式对象，等同于 $attrs)
console.log(context.attrs)
// 插槽 (非响应式对象，等同于 $slots)
console.log(context.slots)
// 触发事件 (方法，等同于 $emit)
console.log(context.emit)
// 暴露公共 property (函数)
console.log(context.expose)
}
}
其中还有生命周期，watch等api也可以使用，这里就不过多赘述了
