vue3.0项目创建好之后，来看看一个简单组件内的代码顺便介绍几个特点:
1.组合式api就是指把vue2.0中的 data，computed，methods，watch都集中在3.0中的setup()中
2.setup取代beforeCreate，created这两个周期，也就是原本放在这两个钩子的内容现在放在setup中
3.在setup里无法再使用this，因为在执行setup的时候组件实例还没创建成功(setup执行在beforeCreate之前)。
4.接收两个参数props，context(具体的后面讲)
5.代码可读性更高，维护也更方便。当然也完美兼容vue2.x
<template>
<div class="home">
{{user.name}}--{{user.age}}--{{num}}--{{doubleCount}}
<button @click="change"></button>
</div>
</template>
<script>
import { ref, reactive, computed, watch} from 'vue'
export default {
name: 'Home',
setup () {
const user = reactive({ name: 'jerry', age: 18}) // 创建引用类型数据使用reactive
const num = ref(6) // 创建基础数据类型使用ref,使用是用.vulue
const doubleCount = computed(() => {
return num.value * 2
})
// watch的单个值写法
watch(() => num.value, (newValue, old) => {
// newValue新值,old旧值
console.log(newValue, old, '--w')
})
// watch的多个值写法
/* const num1 = ref(11)
watch([count, count1], ([newCount, newCount2], [oldCount, oldCount2]) => {
console.log([newCount, newCount2], '--', [oldCount, oldCount2], '--w')
})
watch([count, count1], (newValue, oldValue) => {
console.log(newValue)// [newCount, newCount2]
console.log(oldValue)// [oldCount, oldCount2]
}) */
const change = () => {
num.value++
}
return {
user,
num,
doubleCount，
change
}
},
created () {
// vue2.0的内容也还是可以照常用的
}
}
</script>
setup()的两个参数
<script>
import { toRefs, toRef } from 'vue'
export default {
name: 'Home',
// 因为props是响应性的，使用解构后会消除其响应性，所以需要使用toRefs, toRef
// 但是context不具有响应性，可以直接使用解构赋值，但是只能访问attrs, slots, emit, expose
setup (props, context) {
const { name } = toRefs(props)
const { name0 } = toRef(props, 'jerry') // toRef的第二个参数就类似于函数形参的默认值
const {attrs, slots, emit, expose} = context // 可以打印出来自己去看这几个属性
return {
}
}
}
</script>
方便维护，便于理解
这样看就不会像vue2.0那样，在维护的时候想要查询某个变量的逻辑，要去data，watch，methos等等里面去找，代码一多，眼睛都给你看画，脑壳看痛
<script>
import { ref, reactive } from 'vue'
export default {
name: 'Home',
setup (props, context) {
const num = ref(0)
/*
.
.这里都是对num的操作代码
.
*/
const user = reactive({name: 'jerry'})
/*
.
.这里都是对user的操作代码
.
*/
return {
}
}
}
</script>
|