setup的参数
props和context
props
这个就是你在vue2时代使用的porps
props:['xxx']
改写一下
<template>
<div>
<span>{{title}}</span>
</div>
</template>
<script lang="ts">
import {ref} from 'vue'
export default{
name:'hello',
props:{
title:String
},
setup(props){
console.log(props.title)
let title=ref(props.title)
return {title}
}
}
</script>
当然这样写并不好,只是简单粗暴
props和context在api上介绍很多记得看
然后是即使你的页面没有任何输出,我也推荐把
setup(){
return{}
}
写好,有setup必有return
生命周期钩子,计算和监听的写法
在setup中,使用
import {ref,onMounted} from 'vue'
onMounted(()=>{/*这里写代码块*/})
的形式,watch和computed也一样
具体钩子都变成啥样了去看文档
响应式,ref和reactive
这个本来应该先讲的,但是我觉得这俩只要学vue3就已经很娴熟了,所以最后说说
个人喜欢用reactive,但是reactive在一些情况下不适用,那时候就要用ref或者其他邪道手段了
import {ref,reactive,toRefs} from 'vue'
interface Data{
id:number
name:string
age:number
[propName: string]: any
}
export default{
setup(){
const data:Data=reactive({
id:0,
name:'张三',
age:17,
})
const refData = toRefs(data)
const title=ref('setData')
return {...refData,title}
}
}
<div><span>{{title}}</span></div>
<div><span>{{id}}</span></div>
<div><span>{{name}}</span></div>
<div><span>{{age}}</span></div>
啥都可以往ref和reactive的括号里放,随便放,不会有问题的。
成功出去喝奶茶,失败回家喝养生茶。