一: 新特性 Composition API
特点: 可以更好的逻辑复用和代码组织,初始化方式变了,在main.js里实例获取方式变成函数 :
以前Vue2是new一个构造函数
createApp(App) 变成了工厂函数,直接获取,直接挂载
以前写响应式数据写在data中 在Vue3里响应式数据使用和定义在setup()中
1. reactive: (它可以创建响应式的对象)
来自Vue中,使用前需要import先引入,写法使用:
setup( ) {
const data = reactive({
counter : 1;
2. //还可以添加计算属性 使用计算属性也是需要先import引入
doubleCounter:computer(() = > data.counter * 2 )
})
return { data }
}
界面中访问需要{{ data.counter }}
二. 生命周期发生的改变:
在setup生命周期最早的onMounted
写法:
setup( ) {
let timer;
onMounted(() => {
timer = setInterval(() = > {
data.counter++;
},1000)
})
onUnmounted(() => {
clearInterval(timer)
})
}
三.ref用来声明一些单值的东西:
写法:
setup( ) {
const msg2 = ref( 'msg some')
return {msg}
}
如果觉得代码过于冗长,可以把跟单个代码组织提取出来,
这样的好处就是setup() 里变得非常清爽,可以将数据提出给其他人复用
写法:
setup ( ) {
//再将下面导出的data在setup( ) 中导入即可
const data = useCounter( )
return { data }
}
function useCounter( ) {
const data = reactive({
counter : 1;
2. //还可以添加计算属性 使用计算属性也是需要先import引入
doubleCounter:computer(() = > data.counter * 2 )
})
//只需要将数据data通过return 导出
6.toRefs( ) 这边也需要import导入 可以将有多个响应式的数据结构变成ref单值响应式数据
这样可以在
setup() 里 const { counter,doubleCounter} =useCounter( ) 的值展开,否则值不开展开,这样在setup的return里导出
可以将里面两个值一起导出return {counter, doubleCounter },这样在html标签里可以直接访问
{{ counter }}
return toRefs( data )
}