1. reactive
定义一个复杂数据类型转换响应式
import { reactive } from 'vue'
const obj = reactive({
name:'张三'
age:18
})
2. ref
简单数据类型转换响应式 数组[ ]
import { ref } from 'vue'
const str = ref('')
const flag = ref(true)
const arr = ref([1,2,4,5])
3. toRef
可以把对象的单个属性变成响应式
import { reactive,toRef } from 'vue'
const obj = reactive({
name:'张三'
age:18
})
const name = toRef(obj,'name')
const fn = ()=>{
name.value = '李四'
}
return{ name ,fn}
<template>
<input type="button" @click="fn()" value="btn" />
{{name}}
</template>
4. toRefs
可以把对象全部属性转换为响应式
import { reactive,toRefs } from 'vue'
const obj = reactive({
name:'张三'
age:18
})
const newObj = toRefs(obj)
const fn = ()=>{
newObj.name.value = '李四'
newObj.age.value = 28
}
return{ ...newObj , fn }
<template>
<input type="button" @click="fn()" value="btn" />
{{name}}==={{age}}
</template>
5. vue3生命周期钩子函数
- setup 创建实例前
setup 是一个新的组件选项，作为组件中使用组合API的起点
它的执行在组件实例创建之前vue2.x的beforeCreate之前执行
没有this 需要return在模版中需要使用的数据和函数
-
onBeforeMount 挂载DOM前
-
onMounted 挂载DOM后
-
onBeforeUpdate 更新组件前
-
onUpdated 更新组件后
-
onBeforeUnmount 卸载销毁前
-
onUnMounted 卸载销毁后
7. 父子组件传值
props
emit
8. 依赖注入
可以让父组件向孙子组件传值
父组件 provide
import {ref,provide} from 'vue'
const root=ref('我是根组件')
// provide('键','值')
provide('rootMsg',root)
孙组件 inject
import {inject} from 'vue'
const sun=inject('rootMsg')
//console.log(r.value);
return {sun}
9. ref(获取dom)
<div class="box" ref="dom">我是一个box</div>
import {ref,onMounted} from 'vue'
setup () {
const dom = ref(null)
//获取dom
onMounted(()=>{
console.log(dom.value.innerHTML);//我是一个box
return {dom}
}
10. watch
setup() {
var obj = reactive({
name:'timi',
age:18
});
//watch 里面可以放3个参数
//监听对象如果写的是一个函数，那改变对象中的属性不会触发监听器，如果想触发需要使用深度监听 deep:true
watch(()=>obj,(newVal,oldVal)=>{
console.log(newVal,oldVal); //只能监听新值
},{
deep:true,
})
// 如果监听对象写的是函数，监听的是对象中的属性，可以触发 可以监听新旧值
watch(()=>obj.age,(newVal,oldVal)=>{
console.log(newVal,oldVal);
})
const say = () => {
obj.age++
};
return { obj };
},
11. setup语法糖
watch用法
//监听基础类型
const num = ref(2)
watch(num, (newValue, oldValue) => {
console.log('watch 已触发', newValue)
})
//监听对象的所有属性
watch(() => itemObj, (newValue, oldValue) => {
console.log('watch 已触发', newValue)
}, { deep: true ,immediate:true})
//监听父组件传递的对象
const props = defineProps({
params:{
type:Object,
default: ()=>({}),
},
});
const {params} = toRefs(props)//解构出来
watch(
[ ()=>params.value.name, ()=>params.value.id],
(newValue)=>{
console.log(newValue)
} ,
{immediate:true,deep:true}
)
- 父子组件传值
//父组件
<ChildCom :fatherData="fatherData" :personInfo="personInfo"></ChildCom>
let fatherData = reactive([ ])
const getList = () => {
axios.get("/mock/mockList").then((res) => {
// 获取数据
fatherData = res.data;
});
};
onMounted(() => {
getList();
});
//子组件
<div v-for="item in dataList" :key="item.id">
<span>{{ item.id }}</span> -- {{ item.name }}
</div>
<div class="info">
姓名:{{personInfo.name}}--
</div>
import { ref, toRefs, watch } from "vue";
const props = defineProps({
fatherData: Array,
personInfo:Object
});
//解构赋值
const { fatherData,personInfo } = toRefs(props);
const dataList = ref([]);
watch(
()=>fatherData,
(newVal,oldVal) => {
dataList.value = newVal.value;
},
{ deep: true ,immediate:true}
);
//监听对象的所有属性
watch(()=>personInfo,(newVal)=>{
console.log(newVal,'newVal'),
{ deep: true ,immediate:true}
})
//父组件
<template>
<div class="box">
<el-tabs type="border-card" class="demo-tabs">
<el-tab-pane>
<template #label>
<span class="custom-tabs-label">
<el-icon><calendar /></el-icon>
<span>父组件</span>
</span>
</template>
<el-button type="primary" @click="showLayerHandle">弹窗</el-button>
</el-tab-pane>
<ChildDiaCom
v-if="showDialog"
@fn="fnHandle"
:showDialog="showDialog"
:saveItemTitle="saveItemTitle"
></ChildDiaCom>
</div>
</template>
<script setup>
import { reactive, ref } from "vue";
//子组件弹窗
import ChildDiaCom from './details/childDia.vue'
let showDialog = ref(false)
let saveItemTitle = ref('')
let layerWdith = ref(500)
let saveItemInfo =reactive({})
//打开弹窗
const showLayerHandle = ()=>{
showDialog.value = true
saveItemTitle.value = "新增"
};
//子组件传递事件
const fnHandle = (val)=>{
showDialog.value = false
onsole.log(val,'子组件的参数');
}
</script>
<style lang="scss" scoped>
</style>
//子组件
<template>
<el-dialog
v-model="showDialog"
:title="saveItemTitle"
width="30%"
:before-close="handleClose"
>
<span>This is a message</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">Cancel</el-button>
<el-button type="primary" @click="handleClose">
Confirm
</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { ref, toRefs ,defineEmits ,defineProps} from "vue";
const props = defineProps({//接受父组件参数
showDialog: {
type: Boolean,
default: false,
},
saveItemTitle: {
type: String,
default: "",
},
});
const {showDialog,saveItemTitle} = toRefs(props)//解构出来
const emits = defineEmits(['fn']);
let childData = reactive({
id:1,
name:'奥特曼'
})
const handleClose = ()=>{
emits("fn",childData)//触发父组件事件--fn 传递参数--childData
}
</script>
<style lang="scss" scoped>
</style>
12. 路由跳转
//页面1
<template>
<div>
<el-button type="primary" @click="goPageHandle">路由跳转</el-button>
</div>
</template>
<script setup>
import { ref, toRefs, watch } from "vue";
import {useRouter} from 'vue-router'
const personInfo = ref({
id:1,
name:'奥塔曼'
})
const goPageHandle = ()=>{
router.push({
path:'/elementPlus/myRouter',
query:{
id:personInfo.value.id,
name:personInfo.value.name,
}
})
}
</script>
//页面2
<template>
<div class="myRouter"></div>
</template>
<script setup >
import { onMounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const getData = () => {
console.log(route.query,'query传参');
};
onMounted(()=>{
getData()
});
</script>
