vue 3.0 常用API 的介绍
vue3.0
生命周期
- 写法一 和vue2.x 一致 区别在于（beforeUnmount、unmount）名称不一样
- 写法二 在setup 中使用， 需要引用
如： import { onBeforeMount } from ‘vue’
Setup(){ onBeforeMount( () =>{} ) }
Hook
Hook：是一个函数、把setup函数中的组合api进行了封装，类似于vue2中的mixin，
Src目录下新建hooks文件夹 里面写各种逻辑的hook
toRef 和 torefs
在使用 reactive 创建对象后， 在模板中使用对象中的属性， 会多次书写 对象的名称。可以使用这两个api 来把要使用的 单独定义出来
const hero = reactive({
name: 'zhangsan',
age: 23,
family: {
mather: 'dd'
}
})
const name = toRef(hero, 'name')
const namgChange = () => {
hero.name = 'lisi'
}
<h1>{{hero.name}}</h1>
<h1>{{name}}</h1>
<button @click="namgChange">
变化
</button>
上面列子中对hero.name 修改和对 name修改时同等效果的
上面toRef 一次只能处理一个属性
toRefs 一次能处理多个属性
import { toRefs } from "vue";
setup() {
return {
...toRefs(Hero)
}
}
toRaw
操作场景 用于读取响应式数据，后续操作不会引起页面数据变化
将一个由reactive生成的响应式对象转为普通对象（ref生成的不行）
markRaw
标记一个对象永远不作为响应式对象
用法 markRaw(需要标记的对象)
customRef
创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制，customRef里面需要写一个函数，函数接收两个参数，并且应该返回一个带有 get 和 set 的对象
track () 在get中通知vue追踪return出去的数据变化
tigger() 在set中改完数据后 通知vue重新解析模板
<template>
<input v-model="keyword" />
<h3>{{keyword}}</h3>
</template>
<script>
import { customRef } from "vue";
export default {
name: 'Testvue',
setup() {
function myref(value,time = 1000) {
let timer;
return customRef((track, tigger) => {
return {
get() {
track() // 通知vue追踪value的变化
return value
},
set(newValue) {
clearTimeout(timer)
timer = setTimeout(() =>{
value = newValue
tigger() // 改完数据后 通知vue重新解析模板
}, time)
}
}
})
}
let keyword = myref('hello', 500)
return {
keyword
}
}
};
</script>
provide 和 inject
父组件用provide提供数据 后代组件用inject使用数据
父组件
<template>
<input v-model="keyword" />
<h3>{{keyword}}</h3>
<hellochild></hellochild>
</template>
<script>
import { customRef, provide } from "vue";
import hellochild from './hellochild.vue'
export default {
name: 'Testvue',
components: {
hellochild
},
setup() {
function myref(value,time = 1000) {
let timer;
return customRef((track, tigger) => {
return {
get() {
track() // 通知vue追踪value的变化
return value
},
set(newValue) {
clearTimeout(timer)
timer = setTimeout(() =>{
value = newValue
tigger() // 改完数据后 通知vue重新解析模板
}, time)
}
}
})
}
let keyword = myref('hello', 500)
provide('keyword', keyword)
return {
keyword
}
}
};
</script>
子组件
<template>
<div>
我是组件件， 看下 父组件的 keyword {{keyword}}
</div>
</template>
<script setup>
import {inject} from 'vue'
let keyword = inject('keyword')
</script>
Computed计算属性
有简写和完整写法之分，完整写法考虑读写
// 计算属性 简写 -- 单纯的读取
person.fullName = computed(() => {
return person.firstName + person.lastName
})
// 计算属性完整写法 --- 考虑修改
person.fullName = computed({
get() {
return person.firstName + person.lastName
},
set(value) {
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
watchEffect
不用指明监听那个属性的变化，回调函数中用到哪个属性，就监听那个属性变化
watch监听
监听ref所定义的一个响应式数据
- 监听谁
- 回调函数
- 配置对象
<template>
<h3>当前数值：{{ sum }}</h3>
<button @click="sum++">增加</button>
</template>
<script>
import { ref, watch } from "@vue/runtime-core";
export default {
setup() {
let sum = ref(0);
watch(
sum,
(newValue, oldValue) => {
console.log(newValue, oldValue);
},
{
immediate: true, // 立即监听
deep: true, // 深度监听
}
);
return {
sum,
};
},
};
</script>
监听ref 所定义的多个响应式数据
当监听多个响应式数据时，将多个数据放在一个数组里面，这样监听的newValue和oldValue都也都是也数组的形式呈现
<template>
<h3>当前数值：{{ sum }}</h3>
<button @click="sum++">增加</button>
<h3>标题：{{ title }}</h3>
<button @click="title+='~'">增加</button>
</template>
<script>
import { ref, watch } from "@vue/runtime-core";
export default {
setup() {
let sum = ref(0);
let title = ref("hi~");
// 监听多个
watch(
[sum,title],
(newValue, oldValue) => {
console.log(newValue, oldValue);
},
{
immediate: true, // 立即监听
deep: true, // 深度监听
}
)
return {
sum,
title,
};
},
};
</script>
监听reactive 所定义的响应式数据的全部属性
无法正确获取oldValue，并且强制开启了深度监听。
监听reactive 所定义的某个属性
第一个参数要以回调函数返回写法
<template>
<h3>姓名：{{Hero.username}}</h3>
<h3>年龄：{{Hero.age}}</h3>
<button @click="Hero.age++">改变年龄</button>
<button @click="Hero.username += '~'">改变姓名</button>
</template>
<script>
import { reactive, watch } from "@vue/runtime-core";
export default {
setup() {
let Hero = reactive({
username: '李四',
age: 18,
job: {
j1: {
speak: '你好'
}
}
})
// reactive所定义的响应式数据的某个属性
watch(
()=>Hero.age, // 以回调形式拿到监听的属性
(newValue, oldValue) => {
console.log(newValue, oldValue);
},
{
immediate: true, // 立即监听
deep: true, // 深度监听
})
return {
Hero
};
},
};
</script>
监听reactive 所定义的数据的多个属性
如果监听的属性嵌套层次比较深 则需要开启深度监听
watch(
[()=>Hero.username, ()=>Hero.age, () =>Hero.job], // 以回调形式拿到监听的属性
(newValue, oldValue) => {
console.log(newValue, oldValue);
},
{
immediate: true, // 立即监听
deep: true, // 深度监听
})