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'
}
{{hero.name}}
<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, // 深度监听
})