这是学习Vue3相比Vue2的第二部分,主要讨论计算属性与监视、生命周期和自定义属性等
一、计算属性
- 与Vue2.x中computed配置功能一致,但是注意,当**修改计算机属性的值(不是修改其中的变量)**要用完全的写法
import {computed} from 'vue'
setup(){
...
//计算属性——简写
let fullName = computed(()=>{
return person.firstName + '-' + person.lastName
})
//计算属性——完整
let fullName = computed({
get(){
return person.firstName + '-' + person.lastName
},
set(value){
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
}
二、watch函数
- 与Vue2.x中watch配置功能一致
新的watch可以监听多个属性,原先的只能一个
// 情况一:监视ref所定义的一个响应式数据
watch(sum,(newValue,oldValue)=>{
console.log('sum变了',newValue,oldValue)
},{immediate:true})
//情况二:监视ref所定义的多个响应式数据
watch([sum,msg],(newValue,oldValue)=>{
console.log('sum或msg变了',newValue,oldValue)
},{immediate:true})
- 两个小“坑”,deep无法监视对象数据类型
- 监视reactive定义的响应式数据时:oldValue无法正确获取、强制开启了深度监视(deep配置失效)。
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
},{deep:false}) //此处的deep配置无效
- 监视reactive定义的响应式数据中某个属性时:deep配置有效。才会有效
watch(()=>person.name,(newValue,oldValue)=>{
console.log('person的name变化了',newValue,oldValue)
})
同时也可以监听里面的多个属性
watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
console.log('person的name或age变化了',newValue,oldValue)
})
监视的是reactive素定义的对象中的属性,配置的deep有效
三、watchEffect函数
-
watch的套路是:既要指明监视的属性,也要指明监视的回调。
-
watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性。
-
watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性。
-
watchEffect有点像computed:
- 但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值。
- 而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值。(作用就是当变化的时候执行回调)
四、生命周期
Vue2和Vue3的生命周期进行比较
- Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:
beforeDestroy
改名为beforeUnmount
destroyed
改名为unmounted
Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下:-
beforeCreate
===>setup()
created
=======>setup()
beforeMount
===>onBeforeMount
mounted
=======>onMounted
beforeUpdate
===>onBeforeUpdate
updated
=======>onUpdated
beforeUnmount
==>onBeforeUnmount
unmounted
=====>onUnmounted
两个生命周期的比较
Vue2
Vue3
五、自定义hook
-
什么是hook?—— 本质是一个函数,把setup函数中使用的Composition API进行了封装。
-
类似于vue2.x中的mixin。
-
自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
定义一个自定义的hooks
import { reactive,onMounted,onBeforeUnmount} from "vue";
export default function () {
let point =reactive({
x:0,
y:0
})
//实现鼠标“打点”相关的方法
function savePoint(event){
point.x = event.pageX
point.y = event.pageY
console.log(event.pageX,event.pageY)
}
// 实现鼠标打点相关的生命周期钩子
onMounted(() => {
window.addEventListener('click',savePoint)
}),
onBeforeUnmount(()=>{
window.removeEventListener('click',savePoint)
})
return point
}
使用hooks
效果
<template>
<h2>我是Test组件</h2>
<h2>当前点击时鼠标的坐标为:x:{{point.x}},y:{{point.y}}</h2>
</template>
<script>
import usePoint from '../hooks/usePoint'
export default {
name:'Test',
setup(){
const point = usePoint()
return {point}
}
}
</script>
六、toRef
-
作用:创建一个 ref 对象,其value值指向另一个对象中的某个属性。
-
语法:
const name = toRef(person,'name')
-
应用: 要将响应式对象中的某个属性单独提供给外部使用时。
-
扩展:
toRefs
与toRef
功能一致,但可以批量创建多个 ref 对象,语法:```toRefs(person)``
toref和ref的比较和作用
1、ref就是复制 复制是不会影响原始数据的
如果利用ref将某一个对象中的某一个属性值变成响应式数据
我们修改响应式数据是不会影响原始数据的;
同时视图会跟新。
ref就是复制 复制是不会影响原始数据的
<template>
<div>
<div>
<div>{{stateObj}}</div>
<button @click="func1">按钮</button>
</div>
</div>
</template>
<script>
import {ref} from 'vue'
export default {
name: 'App',
setup(){
let obj={name:"张三",age:22}
//将对象中的某一个属性
//变成响应式数据
//而不是将对象变成响应式数据
let stateObj=ref(obj.name)
function func1(){
stateObj.value="张三变成李四";
//原始数据没有发生改变 原始数据obj {name: "张三", age: 22}
console.log("原始数据obj",obj)
//响应式数据发生改变了
/**
响应式stateObj RefImpl {
_rawValue: "张三变成李四", _shallow: false,
__v_isRef: true, _value: "张三变成李四"
}
**/
//变成了一个ref的对象
console.log("响应式stateObj",stateObj)
}
return {stateObj,func1}
},
}
</script>
2.toRef是引用,视图不跟新
如果利用toRef将某一个对象中的属性变成了响应式的数据
我们修改响应式的数据是会影响原始数据的
如果数据是通过toRef创建的,修改值后,数据不会触发视图
toRef是引用;它引用的是以前那个对象中的属性
所以你修改后,会影响到原始数据终中的值
<template>
<div>
<div>
<div>{{state}}</div>
<button @click="func1">按钮</button>
</div>
</div>
</template>
<script>
import {toRef} from 'vue'
export default {
name: 'App',
setup(){
let obj={name:"张三",age:22}
//将对象中的某一个属性name变成响应式数据
//而不是将对象变成响应式数据
let state=toRef(obj, 'name');
console.log('toRef',state)
function func1(){
state.value="我是李四";
console.log('obj',obj)
console.log('state',state)
}
return {state,func1}
},
}
</script>