setup
- 这个方法相当于 beaforeCreate 和 created 的结合
- 这个方法中不能访问到this
- 必须要return出去一个对象
- 使用方法
setup(){
const number = ref(0)
return{
number
}
}
生命周期
vue2 | vue3 |
---|---|
beforeCreate | setup |
created | setup |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeDestory | onBeforeUnmount |
destoryed | onUnMounted |
使用方法
import { onMounted } from 'vue'
......
setup(){
onMounted(()=>{
console.log('获取数据!')
})
}
reactive
- 用于创建响应的对象(解决了vue响应对象所存在的问题)
import { reactive } from "vue"
......
setup(){
const p = reactive({
name:'xxx',
age:'10086'
})
console.log(p); // Proxy{name:'xxx',age:'10086'}
return {
p
}
}
ref
- 与“reactive”的功能基本相似
- ref是通过“reactive”进行包装之后的对象,ref('0') = reactive({value:'0'})
- 使用上存在一些差异
import { ref,onMounted } from "vue"
......
setup(){
// 可以创建基本类型的数据,也可以创建引用类型的数据
const number = ref(0);
const p = ref({
name:'xxx'
})
onMounted(()=>{
number.value ++ ; // 需要使用".value"来调用
console.log(p.value)
})
return {
number,
p
}
}
toRef
-
与“ref”类似,具体差别看下表
类别 ref toRef 是否可以改变视图 是 否 是否改变原数据 否 是 对原数据的引用方式 拷贝原数据 拷贝原数据的引用 -
使用方法
import { toRef } from "vue"
......
setup(){
const p = {name:'123'};
// 第一个参数是对象名,第二个参数是key值
const name = toRef(p,'name');
onChangeName = () =>{
name.value = "xx";
console.log(p.name); // "xx"
}
return{
name
}
}