往期内容：
《Vue进阶教程》第十四课：改进桶结构
《Vue进阶教程》第十五课：深入完善响应式系统之模块化
《Vue进阶教程》第十六课：深入完善响应式系统之单例模式
《Vue进阶教程》第十七课：支持分支切换
《Vue进阶教程》第十八课：避免死循环
《Vue进阶教程》第十九课：computed初步实现
《Vue进阶教程》第二十课：lazy懒执行
《Vue进阶教程》第二十一课：支持缓存
《Vue进阶教程》第二十二课：自定义更新(调度器)
《Vue进阶教程》第二十三课：渲染计算属性的结果
《Vue进阶教程》第二十四课：优化
1) 什么是watch
watch叫侦听器, 侦听某个响应式数据, 当数据改变时, 重新执行对应的回调
所以, watch可以建立数据->函数的对应关系
2) 基本使用
第一种: 接收引用了属性的副作用函数做为参数
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./vue.js"></script></head><body><script>const { reactive, watch } = Vueconst state = reactive({ name: 'xiaoming', address: { city: '武汉' } })// watch侦听副作用函数(引用代理对象的属性)watch(() => state.name,() => {console.log('只有当侦听的某个属性改变时, 才执行')})setTimeout(() => {// 只有当state.name属性改变时, 才执行state.name = 'xiaopang'// state.address.city = '北京' // 修改city不会触发更新}, 1000)</script></body>
</html>
第二种: 接收响应式对象做为参数
1watch侦听响应式对象时, 默认是深度侦听
2watch对应的回调默认不执行, 只有当属性改变时执行
示例一
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./vue.js"></script></head><body><script>const { reactive, watch } = Vueconst state = reactive({ name: 'xiaoming' })// watch接收响应式对象的情况watch(state, () => {console.log('该函数默认不执行, 只有状态更新时执行...')})setTimeout(() => {state.name = 'xiaopang'}, 1000)</script></body>
</html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./vue.js"></script></head><body><script>const { reactive, watch } = Vueconst state = reactive({ name: 'xiaoming', address: { city: '武汉' } })// watch接收响应式对象的情况watch(state, () => {console.log('该函数默认不执行, 只有状态更新时执行...')})setTimeout(() => {// 侦听对象时, 是深度侦听state.address.city = '北京'}, 1000)</script></body>
</html>
)
![[FPGA] MIPS 12条整数指令【2】](http://pic.xiahunao.cn/nshx/[FPGA] MIPS 12条整数指令【2】)
