watch
<template>
<div>
<p>姓名：{
{
obj.name}}</p>
<p>年龄：{
{
obj.age}}</p>
<button @click="ageFun">年龄加一</button>
<p v-for="(item,index) in obj.habby" :key="index">爱好{
{
index+1}}:{
{
item}}</p>
<!-- <button @click="goClick">跳转到第二个页面</button> -->
</div>
</template>
<script>
import {
ref, reactive,watch } from "vue";
export default {
name: "App",
setup() {
function reactiveF() {
let obj = reactive({
name: "zjq",
age: 18,
habby: ["跳舞", "唱歌", "游泳"]
});
function ageFun() {
obj.age++;
}
return {
obj, ageFun };
}
let {
obj, ageFun } =reactiveF()
watch( ()=>obj.age,
(newParams,oldParams) => {
console.log("这是新的值")
console.log(newParams)
console.log("这是旧的值")
console.log(oldParams)
})
return {
obj, ageFun };
}
};
</script>
我们在点击页面按钮的时候让年龄加1,watch是个函数，第一个参数是要监听的对象，第二个参数是个回调，回调的第一个和第二个参数分别代表新值、旧值。
上面的是对应一个对象的某个属性监听的写法，第一个参数必须为回调函数，我们要想直接监听obj对象的话，就可以直接
watch( obj,
(Params) => {
console.log("这是改变后的值")
console.log(Params)
})
因为监听的不再是一个基本数据，而是一个对象，所以，新值、旧值就无所谓了，都一样。
例子1：
let obj = reactive({
name: "zjq",
age: {
value:18},
habby: ["跳舞", "唱歌", "游泳"]
});
watch( ()=>obj.age.value,
(newParams,oldParams) => {
console.log("这是新的值")
console.log(newParams)
console.log("这是旧的值")
console.log(oldParams)
})
例子1：
let obj = reactive({
name: "zjq",
age: {
value:18},
habby: ["跳舞", "唱歌", "游泳"]
});
watch( obj.age,
(newParams,oldParams) => {
console.log("这是新的值")
console.log(newParams)
console.log("这是旧的值")
console.log(oldParams)
})
总结：监听的是一个基本数据类型的时候，watch第一个参数需要使用箭头函数return 出去，监听的是一个对象的时候，第一个参数直接就是监听对象。
watch监听多个对象
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
/* ... */
})
<template>
<div>
<p>姓名：{
{
obj.name}}</p>
<p>年龄：{
{
obj.age}}</p>
<button @click="ageFun">年龄加一</button>
<p v-for="(item,index) in obj.habby" :key="index">爱好{
{
index+1}}:{
{
item}}</p>
<!-- <button @click="goClick">跳转到第二个页面</button> -->
</div>
</template>
<script>
import {
ref, reactive,watch } from "vue";
export default {
name: "App",
setup() {
function reactiveF() {
let obj = reactive({
name: "zjq",
age: {
value:18},
habby: ["跳舞", "唱歌", "游泳"]
});
function ageFun() {
obj.age.value++;
obj.name = '改变后的name'
}
return {
obj, ageFun };
}
let {
obj, ageFun } =reactiveF()
watch( [()=>obj.age.value,()=>obj.name],
([newParams1,newParams2],[oldParams1,oldParams2]) => {
console.log("这是新的值")
console.log(newParams1,newParams2)
console.log("这是旧的值")
console.log(oldParams1,oldParams2)
})
return {
obj, ageFun };
}
}
</script>
同样，在监听value是一个基本数据类型的时候，第一个参数需要使用箭头函数return出去。
同样试一下监听对象
<template>
<div>
<p>姓名：{
{
obj.name}}</p>
<p>年龄：{
{
obj.age}}</p>
<button @click="ageFun">年龄加一</button>
<p v-for="(item,index) in obj.habby" :key="index">爱好{
{
index+1}}:{
{
item}}</p>
<!-- <button @click="goClick">跳转到第二个页面</button> -->
</div>
</template>
<script>
import {
ref, reactive,watch } from "vue";
export default {
name: "App",
setup() {
function reactiveF() {
let obj = reactive({
name: "zjq",
age: {
value:18},
habby: ["跳舞", "唱歌", "游泳"]
});
let obj1 = reactive({
name: "obj1",
age: {
value:"obj1"},
habby: ["跳舞", "唱歌", "游泳"]
});
function ageFun() {
obj.age.value++;
obj1.name = '改变后的name'
}
return {
obj, ageFun,obj1 };
}
let {
obj,obj1, ageFun } =reactiveF()
watch( [obj,obj1],
([newParams1,newParams2],[oldParams1,oldParams2]) => {
console.log("这是新的值")
console.log(newParams1,newParams2)
console.log("这是旧的值")
console.log(oldParams1,oldParams2)
})
return {
obj, ageFun };
}
};
</script>
同样，对于监听的值是对象，我们可以只写第二个参数中(回调函数)，只写一个参数，因为新值和旧值是一样的，引用数据类型；
ref底层实现是reactive
ref(0)⇒ reactive({
value:0})
我们将一个对象变成响应式的，当我们改变响应式数据页面ui可以变化，但是改变原始数据是不会发生变化的，即使他们的引用地址一样。
