重学vue之vue3中compositionAPI
- 一、ref, reactive, toRef,toRefs, readonly响应式的引用
- 1.1ref的使用
- 1.2reactive的使用
- 1.3toRefs的使用
- 1.4toRef的使用
- 1.5readonly的使用
- 二、setup函数的参数
- 三、计算属性
- 四、监听器
- 4.1基本使用
- 4.2watchEffect使用
- 五、生命周期函数
- 六、Provide,Inject传递值,Ref获取dom的用法
- 6.1Provide与Inject使用
- 6.2 获取dom
一、ref, reactive, toRef,toRefs, readonly响应式的引用
- ref 处理基础类型的数据
- reactive 处理数组、对象数据
- toRefs 处理对象结构之后的数据,无默认值
- toRef 处理对象结构之后的数据,有默认值
- readonly 只能读的响应式数据
1.1ref的使用
setup(props, context) {
//处理基本类型
const {
ref } = Vue;
//现在name就是响应式的数据，2秒后改变，依然会更新视图
let name = ref('123');
setTimeout(() => {
name.value = '456'
}, 2000)
return {
name}
}
1.2reactive的使用
setup(props, context) {
//处理对象，数组类型
const {
reactive } = Vue;
//现在people就是响应式的数据，2秒后改变，依然会更新视图
const people = reactive({
name: '张三', gender: '男'});
setTimeout(() => {
people.name = '李四'
}, 2000)
return {
people}
}
1.3toRefs的使用
setup(props, context) {
//处理对象，数组类型解构之后
const {
reactive, toRefs } = Vue;
//现在people就是响应式的数据，2秒后改变，依然会更新视图
const people = reactive({
name: '张三', gender: '男'});
setTimeout(() => {
people.name = '李四'
}, 2000)
//把people里面的单个属性变为响应式
const {
name, gender } = toRefs(people);
return {
name, gender }
}
1.4toRef的使用
setup(props, context) {
//处理对象，数组类型解构之后
const {
reactive, toRef } = Vue;
//现在people就是响应式的数据，2秒后改变，依然会更新视图
const people = reactive({
name: '张三', gender: '男'});
setTimeout(() => {
people.name = '李四'
}, 2000)
//把people里面的单个属性变为响应式
//注意age一开始是没有哒
const {
name, gender, age} = toRef(people,'age');
return {
name, gender,age }
}
1.5readonly的使用
setup(props, context) {
//处理对象，数组类型解构之后
const {
reactive, readonly } = Vue;
//现在people就是响应式的数据，2秒后改变，依然会更新视图
const people = readonly({
name: '张三', gender: '男'});
setTimeout(() => {
//会报错
people.name = '李四'
}, 2000)
return {
people }
}
二、setup函数的参数
setup(props, context) {
//attrs第一个参数是None-Props属性
//slot是一个方法，调用default方法会返回一个VNODE
//emit是各种事件
const {
attrs, slots, emit } = context;
//获取属性
//console.log(attrs.属性名)
//渲染函数
//const { h } = Vue;
//渲染父组件传递过来的插槽
//return ()=>h('div',{},slots.default())
//触发消息事件
//function handleClick() { emit('change'); }
//return { handleClick }
}
三、计算属性
- 仍然使用computed关键字，写法并没有太多的出入。
const app = Vue.createApp({
setup() {
//要引用进来这个computed
const {
reactive, computed } = Vue;
const countObj = reactive({
count: 0});
const handleClick = () => {
countObj.count += 1;
}
//和以前一样，使用get与set
let countAddFive = computed({
get: () => {
return countObj.count + 5;
},
set: (param) => {
countObj.count = param - 5;
}
})
setTimeout(() => {
countAddFive.value = 100;
}, 3000)
return {
countObj, countAddFive, handleClick }
},
四、监听器
- 与computed一样，新的watch与老版本没有太多出入。
4.1基本使用
- 1、监听基本类型
setup() {
const {
ref, watch } = Vue;
//基本类型
const age = ref(18)
//监听age
watch(age,(oldValue,newValue)=>{
console.log("oldValue:",oldValue,"newValue:",newValue,)
})
return {
age}
}
- 2、监听对象
setup() {
const {
reactive, watch,toRefs} = Vue;
//对象
const people = reactive({
age:18})
//监听age
watch(()=>people.age,(oldValue,newValue)=>{
console.log("oldValue:",oldValue,"newValue:",newValue,)
})
//结构一下,直接把这个age转化为响应式，可以直接使用
const {
age} = toRefs(people);
return {
age}
}
4.2watchEffect使用
setup() {
const {
ref,watchEffect,toRefs,reactive} = Vue;
//基本类型
const age = ref(18)
//对象
const people = reactive({
name:'张三'})
//监听
watchEffect(() => {
console.log(age);
console.log(people.name);
})
return {
age}
}
五、生命周期函数
过渡
- beforeMount => onBeforeMount
- mounted => onMounted
- beforeUpdate => onBeforeUpdate
- beforeUnmount => onBeforeUnmount 页面移除时候触发
- unmouted => onUnmounted
- beforeCreate与created直接写在setup函数中
新增
- onRenderTracked 页面渲染之后，vue会收集一下响应式依赖
- onRenderTriggered 每一次页面重新渲染时候
六、Provide,Inject传递值,Ref获取dom的用法
6.1Provide与Inject使用
父组件setup函数中
setup() {
const {
provide} = Vue;
//给后代传递age变量，值为18
provide('age', 18);
return {
}
}
后代组件setup函数中
setup() {
const {
inject } = Vue;
//接收age变量，默认值为20
const name = inject('age', 20);
return {
}
}
6.2 获取dom
<div>
<div ref="a">adiv>
div>
setup() {
const {
ref, onMounted } = Vue;
//这里的a一定是和标签中的ref值对应，然后给ref传null
const a = ref(null);
onMounted(() => {
//注意这里是ref转化的响应式数据，a.value才是dom哈
console.log(a.value);
})
return {
a }
}