Vue3的监听函数
文章目录Vue3监听ref定义的响应式数据监听一个ref定义的响应式数据监听多个ref定义的的响应式数据Vue3监听reactive定义的响应式数据Vue3监听ref定义的响应式数据监听一个ref定义的响应式数据main.jsimport { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')A
·
文章目录
Vue3监听ref定义的响应式数据
监听一个ref定义的响应式数据,ref(基本类型)
- main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- App.vue
<template>
<Demo/>
</template>
<script>
import Demo from './components/Demo.vue'
export default {
name: 'App',
components: {
Demo
}
}
</script>
- Demo.vue
<template>
<h2>当前求和值为:{{sum}}</h2>
<button @click="sum++">点我加1</button>
</template>
<script>
import {ref,watch} from "vue";
export default {
name: 'Demo',
setup(){
let sum = ref(0);
watch(sum,(newValue,oldValue) => {
console.log("sum变了",newValue,oldValue);
})
return {
sum
}
}
}
</script>
- 启动应用,测试效果
监听多个ref定义的的响应式数据,ref(基本类型)
- main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- App.vue
<template>
<Demo/>
</template>
<script>
import Demo from './components/Demo.vue'
export default {
name: 'App',
components: {
Demo
}
}
</script>
- Demo.vue
<template>
<h2>当前求和值为:{{sum}}</h2>
<button @click="sum++">点我加1</button>
<hr>
<h2>当前的信息为:{{msg}}</h2>
<button @click="msg+='!'">修改信息</button>
</template>
<script>
import {ref,watch} from "vue";
export default {
name: 'Demo',
setup(){
let sum = ref(0);
let msg = ref("你好");
watch(sum,(newValue,oldValue) => {
console.log("sum变了",newValue,oldValue);
})
watch(msg,(newValue,oldValue) => {
console.log("msg变了",newValue,oldValue);
})
return {
sum,
msg
}
}
}
</script>
Vue3监听多个ref定义的响应式数据时,也可以这么写。
<template>
<h2>当前求和值为:{{sum}}</h2>
<button @click="sum++">点我加1</button>
<hr>
<h2>当前的信息为:{{msg}}</h2>
<button @click="msg+='!'">修改信息</button>
</template>
<script>
import {ref,watch} from "vue";
export default {
name: 'Demo',
setup(){
let sum = ref(0);
let msg = ref("你好");
watch([sum,msg],(newValue,oldValue) => {
if(newValue[0] !== oldValue[0]){
console.log("sum变了",newValue[0],oldValue[0]);
}
if(newValue[1] != oldValue[1]){
console.log("msg变了",newValue[1],oldValue[1]);
}
});
return {
sum,
msg
}
}
}
</script>
- 启动应用,测试效果
监听一个ref定义的响应式数据,ref(对象类型)
- main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- App.vue
<template>
<Demo/>
</template>
<script>
import Demo from './components/Demo.vue'
export default {
name: 'App',
components: {
Demo
}
}
</script>
- Demo.vue
<template>
<h2>姓名:{{person.name}}</h2>
<h2>年龄:{{person.age}}</h2>
<h2>薪酬:{{person.job.salary}}K</h2>
<button @click="person.name+='~'">修改姓名</button>
<button @click="person.age++">增长年龄</button>
<button @click="person.job.salary++">涨薪</button>
</template>
<script>
import {ref,watch} from "vue";
export default {
name: 'Demo',
setup(){
let person = ref({
name:"张三",
age:18,
job:{
salary:30
}
})
watch(person.value,(newValue,oldValue) => {
console.log("person变了",newValue,oldValue);
})
return {
person
}
}
}
</script>
person
由ref
定义以实现响应式,所以watch
时,应写成person.value
。
person
由ref
定义以实现响应式,watch
时,其实写成person
也行,但与此同时,需要开启深度监视,{deep:true}
,完整的Demo.vue如下所示。
<template>
<h2>姓名:{{person.name}}</h2>
<h2>年龄:{{person.age}}</h2>
<h2>薪酬:{{person.job.salary}}K</h2>
<button @click="person.name+='~'">修改姓名</button>
<button @click="person.age++">增长年龄</button>
<button @click="person.job.salary++">涨薪</button>
</template>
<script>
import {ref,watch} from "vue";
export default {
name: 'Demo',
setup(){
let person = ref({
name:"张三",
age:18,
job:{
salary:30
}
})
watch(person,(newValue,oldValue) => {
console.log("person变了",newValue,oldValue);
},{deep:true})
return {
person
}
}
}
</script>
Vue3监听reactive定义的响应式数据
先上例子吧。
监听reactive定义的响应式数据的全部属性
- main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- App.vue
<template>
<Demo/>
</template>
<script>
import Demo from './components/Demo.vue'
export default {
name: 'App',
components: {
Demo
}
}
</script>
- Demo.vue
<template>
<h2>姓名:{{person.name}}</h2>
<h2>年龄:{{person.age}}</h2>
<button @click="person.name+='~'">修改姓名</button>
<button @click="person.age++">增长年龄</button>
</template>
<script>
import {reactive,watch} from "vue";
export default {
name: 'Demo',
setup(){
let person = reactive({
name:"张三",
age:18
})
watch(person,(newValue,oldValue) => {
console.log("person变了",newValue,oldValue);
})
return {
person
}
}
}
</script>
监听reactive定义的响应式数据的某个或多个属性
可以看到,Vue3监听reactive定义的响应数据person
时,无法获取到正确的oldValue
。
如果非得到oldValue
不可,可以采用如下方式实现监听:
watch(() => person.name,(newValue,oldValue) => {
console.log("person的name变了",newValue,oldValue);
})
watch(() => person.age,(newValue,oldValue) => {
console.log("person的age变了",newValue,oldValue);
})
- 修改后的Demo.vue
<template>
<h2>姓名:{{person.name}}</h2>
<h2>年龄:{{person.age}}</h2>
<button @click="person.name+='~'">修改姓名</button>
<button @click="person.age++">增长年龄</button>
</template>
<script>
import {reactive,watch} from "vue";
export default {
name: 'Demo',
setup(){
let person = reactive({
name:"张三",
age:18
})
watch(() => person.name,(newValue,oldValue) => {
console.log("person的name变了",newValue,oldValue);
})
watch(() => person.age,(newValue,oldValue) => {
console.log("person的age变了",newValue,oldValue);
})
return {
person
}
}
}
</script>
监听reactive定义的响应式数据的多个属性时,也可以这样写,如下,
<template>
<h2>姓名:{{person.name}}</h2>
<h2>年龄:{{person.age}}</h2>
<button @click="person.name+='~'">修改姓名</button>
<button @click="person.age++">增长年龄</button>
</template>
<script>
import {reactive,watch} from "vue";
export default {
name: 'Demo',
setup(){
let person = reactive({
name:"张三",
age:18
})
watch([() => person.name,() => person.age],(newValue,oldValue) => {
console.log("person的name或age变了",newValue,oldValue);
})
return {
person
}
}
}
</script>
监听reactive定义的响应式数据的一个属性,且该属性值也是一个对象
- main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- App.vue
<template>
<Demo/>
</template>
<script>
import Demo from './components/Demo.vue'
export default {
name: 'App',
components: {
Demo
}
}
</script>
- Demo.vue
<template>
<h2>姓名:{{person.name}}</h2>
<h2>年龄:{{person.age}}</h2>
<h2>薪酬:{{person.job.salary}}K</h2>
<button @click="person.name+='~'">修改姓名</button>
<button @click="person.age++">增长年龄</button>
<button @click="person.job.salary++">涨薪</button>
</template>
<script>
import {reactive,watch} from "vue";
export default {
name: 'Demo',
setup(){
let person = reactive({
name:"张三",
age:18,
job:{
salary:30
}
})
watch(() => person.name,(newValue,oldValue) => {
console.log("person的name变了",newValue,oldValue);
})
watch(() => person.age,(newValue,oldValue) => {
console.log("person的age变了",newValue,oldValue);
})
watch(() => person.job,(newValue,oldValue) => {
console.log("person的job变了",newValue,oldValue);
})
return {
person
}
}
}
</script>
瞧,监听不到reactive定义的响应式数据person
的属性job
的变化,解决办法是,开启深度监听{deep:true}
。
修改后的Demo.vue如下。
<template>
<h2>姓名:{{person.name}}</h2>
<h2>年龄:{{person.age}}</h2>
<h2>薪酬:{{person.job.salary}}K</h2>
<button @click="person.name+='~'">修改姓名</button>
<button @click="person.age++">增长年龄</button>
<button @click="person.job.salary++">涨薪</button>
</template>
<script>
import {reactive,watch} from "vue";
export default {
name: 'Demo',
setup(){
let person = reactive({
name:"张三",
age:18,
job:{
salary:30
}
})
watch(() => person.name,(newValue,oldValue) => {
console.log("person的name变了",newValue,oldValue);
})
watch(() => person.age,(newValue,oldValue) => {
console.log("person的age变了",newValue,oldValue);
})
watch(() => person.job,(newValue,oldValue) => {
console.log("person的job变了",newValue,oldValue);
},{deep:true})
return {
person
}
}
}
</script>
更多推荐
已为社区贡献19条内容
所有评论(0)