computed函数
与Vue2.x中的computed配置功能一致，只不过在Vue3.x中我们需要按需导入该函数。因为Vue3.x是向下兼容Vue2语法的，所以我们可以写成既有 setup 又有 Vue2中的computed函数，如下代码示例：
-
<template>
-
<h1>个人信息</h1>
-
姓：<input type=
"text" v-model=
"person.firstName"><br><br>
-
名：<input type=
"text" v-model=
"person.lastName"><br><br>
-
全名：<span>{{fullName}}</span>
-
</template>
-
<script>
-
import { reactive }
from
'vue';
-
export
default {
-
computed:{
-
fullName(
){
-
return
this.
person.
firstName+
'-' +
this.
person.
lastName
-
}
-
},
-
setup(
){
-
// 数据
-
let person =
reactive({
-
firstName:
'张',
-
lastName:
'三'
-
})
-
// 返回对象出去
-
return {
-
person
-
}
-
}
-
}
-
</script>
这种既有Vue2又有Vue3的语法显然是不合适的，从开发者工具我们也看出来，setup和computed并列。如下图所示：
在Vue3的做法是将计算属性按需导入，在setup内部进行使用，如下：
-
<template>
-
<h1>个人信息</h1>
-
姓：<input type=
"text" v-model=
"person.firstName"><br><br>
-
名：<input type=
"text" v-model=
"person.lastName"><br><br>
-
全名：<span>{{person.
fullName}}</span><br><br>
-
全面：<input type=
"text" v-model=
"person.fullName">
-
</template>
-
<script>
-
import { reactive,computed }
from
'vue';
-
export
default {
-
setup(
){
-
// 数据
-
let person =
reactive({
-
firstName:
'张',
-
lastName:
'三'
-
})
-
-
// 计算属性的简写方式（只能读）
-
// person.fullName = computed(()=>{
-
// return person.firstName+ '-' + person.lastName
-
// })
-
-
// 计算属性的完整方式(读写)
-
person.
fullName =
computed({
-
get(
){
-
return person.
firstName+
'-' + person.
lastName
-
},
-
set(
value){
-
const nameStr = value.
split(
'-')
-
person.
firstName = nameStr[
0]
-
person.
lastName = nameStr[
1]
-
}
-
})
-
// 返回对象出去
-
return {
-
person
-
}
-
}
-
}
-
</script>
watch函数
在Vue3中watch监听ref定义的数据，在按需导入watch后，watch函数能接收三个参数：第一个参数是监视对象；第二个参数是监视的回调函数；第三个是监视的配置属性。如下：
-
<template>
-
<h2>当前的值为：{{num}}</h2>
-
<button @click="num++">点击+1</button>
-
<br>
-
<br>
-
<h2>当前的信息为：{{say}}</h2>
-
<button @click="say+='！'">加感叹号！</button>
-
</template>
-
-
<script>
-
import { ref,watch }
from
'vue';
-
export
default {
-
setup () {
-
// 数据
-
let num =
ref(
0)
-
let say =
ref(
'Hello World')
-
-
watch([num,say],
(newValue,oldValue)=>{
-
console.
log(
'num或say值变了',newValue,oldValue);
-
},{
immediate:
true})
-
// 返回对象
-
return {
-
num,say,watch
-
}
-
}
-
}
-
</script>
当监视reactive所定义的一个响应式数据的全部属性时，是无法正确的获取到oldValue的，默认是强制开启了深度监听，所以即使你把深度监听关掉也是不奏效的，如下：
-
<template>
-
<h2>姓名：{{person.name}}</h2>
-
<h2>年龄：{{person.age}}</h2>
-
<h2>秘密：{{person.privacy.secret.msg}}</h2>
-
<button @click="person.age+=1">年龄+1</button>
-
<button @click="person.privacy.secret.msg+='--被我看到了'">查看秘密</button>
-
</template>
-
-
<script>
-
import { reactive,watch }
from
'vue';
-
export
default {
-
setup () {
-
// 数据
-
let person =
reactive({
-
name:
'张三',
-
age:
18,
-
privacy:{
-
secret:{
-
msg:
'这是我的秘密'
-
}
-
}
-
})
-
watch(person,
(newValue,oldValue)=>{
-
console.
log(
'person变化了',newValue,oldValue);
-
},{
deep:
false})
-
// 返回对象
-
return {
-
person
-
}
-
}
-
}
-
</script>
如果想监视reactive所定义的一个响应式数据中的某个或某些属性，可以通过如下方式进行：
-
<template>
-
<h2>姓名：{{person.name}}</h2>
-
<h2>年龄：{{person.age}}</h2>
-
<h2>秘密：{{person.privacy.secret.msg}}</h2>
-
<button @click="person.name+='-'">修改名字</button>
-
<button @click="person.age+=1">年龄+1</button>
-
</template>
-
-
<script>
-
import { reactive,watch }
from
'vue';
-
export
default {
-
setup () {
-
// 数据
-
let person =
reactive({
-
name:
'张三',
-
age:
18,
-
privacy:{
-
secret:{
-
msg:
'这是我的秘密'
-
}
-
}
-
})
-
// 监听person中name和age的变化
-
watch([
()=>person.
name,
()=>person.
age],
(newValue,oldValue)=>{
-
console.
log(
'person中的name和age变化了',newValue,oldValue);
-
})
-
// 返回对象
-
return {
-
person
-
}
-
}
-
}
-
</script>
如果想拿到reactive函数中深层次的属性，即reactive函数中某个对象的属性，这时候就需要借助深度监视 deep 了，而且deep有效，如下：
-
<template>
-
<h2>姓名：{{person.name}}</h2>
-
<h2>年龄：{{person.age}}</h2>
-
<h2>秘密：{{person.privacy.secret.msg}}</h2>
-
<button @click="person.name+='-'">修改名字</button>
-
<button @click="person.age+=1">年龄+1</button>
-
<button @click="person.privacy.secret.msg+='--'">查看秘密</button>
-
</template>
-
-
<script>
-
import { reactive,watch }
from
'vue';
-
export
default {
-
setup () {
-
// 数据
-
let person =
reactive({
-
name:
'张三',
-
age:
18,
-
privacy:{
-
secret:{
-
msg:
'这是我的秘密'
-
}
-
}
-
})
-
// 监听person中name和age的变化
-
watch(
()=>person.
privacy,
(newValue,oldValue)=>{
-
console.
log(
'person中的privacy变化了',newValue,oldValue);
-
},{
deep:
true})
// 由于监视的是reactive函数定义的某个对象中的属性，deep配置有效
-
-
// 返回对象
-
return {
-
person
-
}
-
}
-
}
-
</script>
虽然我们监听到了值的变化，但是还是拿不到旧值，所以说白了，对于Vue3中的watch函数来说，在对象中是拿不到旧值的。如下：
watcrEffect函数
watch的套路是:既要指明监视的属性，也要指明监视的回调；watchEffect的套路是:不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
watchEffect有点像computed :
但computed注重的计算出来的值(回调函数的返回值)，所以必须要写返回值。
watchEffect更注重的是过程(回调函数的函数体)，所以不用写返回值。
-
<script>
-
import { reactive,watchEffect }
from
'vue';
-
export
default {
-
setup () {
-
// 数据
-
let person =
reactive({
-
name:
'张三',
-
age:
18,
-
privacy:{
-
secret:{
-
msg:
'这是我的秘密'
-
}
-
}
-
})
-
// 监视
-
watchEffect(
()=>{
-
const p1 = person.
name
-
const p2 = person.
privacy.
secret.
msg
-
console.
log(
'watchEffect所指定的回调执行了');
-
})
-
// 返回对象
-
return {
-
person
-
}
-
}
-
}
-
</script>
转载：https://blog.csdn.net/qq_53123067/article/details/128558552
查看评论