目录
一、监视ref，（监视基本类型）
二、监视reactive，（监视复杂类型）
三、监视对象里面的属性，属性的值是基本类型
四、监视对象里面的属性，属性的值是复杂类型
五、同时监听多个
写法一、
方式二、
watch：接受3个参数
参数1：监视的数据源，可以是一个ref、reactive、函数
参数2：回调函数 (新值, 旧值) => {}
参数3：额外配置是一个对象 {deep: trrue, immediate: true}, 参数一是深度侦听，参数二是立即侦听（页面一刷新就会监听）
一、监视ref，（监视基本类型）
<script>
import { ref, toRefs, watch, reactive } from 'vue'
export default {
setup() {
const money = ref(100)
}
watch(
money,
(newVal, oldVal) => {
("money变化了", newVal, oldVal)
}
)
return {
money,
}
}
</script>二、监视reactive，（监视复杂类型）
<script>
import { ref, toRefs, watch, reactive } from 'vue'
export default {
setup() {
const state = reactive({
money: 100,
car: {
rand: "宝马",
}
})
}
watch(
state,
(newVal, oldVal) => {
("state变化了", newVal, oldVal)
}
)
return {
...toRefs(state)
}
}
</script>三、监视对象里面的属性，属性的值是基本类型
<script>
import { ref, toRefs, watch, reactive } from 'vue'
export default {
setup() {
const state = reactive({
money: 100,
car: {
rand: "宝马",
}
})
}
watch(
() => ,
(newVal, oldVal) => {
("变化了", newVal, oldVal)
}
)
return {
...toRefs(state)
}
}
</script>四、监视对象里面的属性，属性的值是复杂类型
参数3：额外配置是一个对象 {deep: trrue, immediate: true},参数一是深度侦听，参数二是立即侦听（页面一刷新就会监听）
<script>
import { ref, toRefs, watch, reactive } from 'vue'
export default {
setup() {
const state = reactive({
money: 100,
car: {
rand: "宝马",
}
})
}
watch(
() => ,
(newVal, oldVal) => {
("变化了", newVal, oldVal)
},
{
deep: true, // reactive定义的对象 可以省略deep 它会自动帮你添加上去了
immediate: false
}
)
return {
...toRefs(state)
}
}
</script>五、同时监听多个
写法一、
<script>
import { toRefs, watch, reactive } from 'vue'
export default {
setup() {
const state = reactive({
money: 100,
car: {
rand: "宝马",
}
})
}
watch(
[() => , () => ],
([noney, car], [moneyOld, carOld]) => {
("变化了", noney, car)
},
{
deep: true,
immediate: false
}
)
return {
...toRefs(state)
}
}
</script>方式二、
<script>
import { toRefs, watch, reactive } from 'vue'
export default {
setup() {
const state = reactive({
money: 100,
car: {
rand: "宝马",
}
})
}
watch(
[() => , () => ],
(newVal, oldVal) => {
("变化了", newVal, oldVal) // newVal新值是一个数组， 值顺序就是侦听的顺序 oldVal一样
},
{
deep: true,
immediate: false
}
)
return {
...toRefs(state)
}
}
</script>