# 基本使用
# ref
- 生成值类型的响应式数据
- 可用于模版和reactive
- 必须通过.value获取值
# watch 和 watchEffect区别
- watch监听属性时必须指定监听的具体属性
- watch不会自动执行,需要增加immediate = true
- watchEffect不需要指定具体的属性,会根据使用的的属性自动监听其变化,watchEffect初始化会自动执行一遍(因为需要收集哪些属性使用到了,对其进行监听)
setup(){
const state = reactive({
name:'kira',
age:12
})
const statusRef = ref(1);
//watch监听state下的某个属性
watch(()=>state.name,(newVal,oldVal)=>{
console.log('====',newVal,oldVal)
});
//watch监听ref
watch(statusRef,(newVal,oldVal)=>{
console.log('====',newVal,oldVal)
},{immediate:true});
watchEffect(()=>{
console.log(state.age);//自动监听age
})
setTimeout(()=>{
state.name = '222';
statusRef.value = 2;
},2000)
return{
state,
statusRef
}
}
# setup 函数
- setup()新语法,写了这个就不需要再写 data methods 这样的东西了。
- setup() :开始创建组件之前,在 beforeCreate 和 created 之前执行。创建的是 data 和 method
setup(){
//在setup中定义变量
const girls = ref(['11','22','333']);
const selectGirl = ref('');
//在setup中定义方法
const clickMe = (index: number,item: object)=>{
selectGirl.value = girls.value[index]
};
//在setup中暴露方法和变量
return{
girls,
selectGirl,
clickMe
}
}
# reactive 函数
- reactive 和 ref 都是为了定义响应式的数据。
interface DataProps {
girls: string[];
selectGirl: string;
clickMe: (index: number) => void;
}
export default defineComponent({
name: 'Home',
setup(){
const data: DataProps = reactive({
girls:['11','22','333'],
selectGirl:'',
clickMe:(index: number)=>{
data.selectGirl = data.girls[index]
}
});
//使用toRefs目的是为了解构赋值,如果直接通过...获取属性
const refData = toRefs(data);
return{
...refData
}
}
});
# 生命周期
- setup() :开始创建组件之前,在 beforeCreate 和 created 之前执行。创建的是 data 和 method。在 vue3 中 setup 生命周期替代了 beforeCreate 和 created。
- onBeforeMount() : 组件挂载到节点上之前执行的函数。
- onMounted() : 组件挂载完成后执行的函数。
- onBeforeUpdate(): 组件更新之前执行的函数。
- onUpdated(): 组件更新完成之后执行的函数。
- onBeforeUnmount(): 组件卸载之前执行的函数。
- nUnmounted(): 组件卸载完成后执行的函数
- onActivated(): 被包含在<keep-alive>中的组件,会多出两个生命周期钩子函数。被激活时执行。
- onDeactivated(): 比如从 A 组件,切换到 B 组件,A 组件消失时执行。
- onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数(以后用到再讲,不好展现)。
← vue3 响应式Reactive →