南昌网站建设方案详细版电商直播培训
作用：监视数据变化，执行一些业务逻辑或异步操作。
语法：
1.简单写法->简单类型数据，直接监视
const app = new Vue({el: '#app',data: {words:''},watch:{words(newValue,oldValue){}}}) const app = new Vue({el: '#app',data: {obj: {words: ''}},watch: {'obj.words'(newValue) {}}})案例：翻译软件
<!doctype html>
<html><head><meta charset="utf-8">
</head><body><div id="app"><textarea rows="10" cols="40" v-model="obj.words"></textarea><textarea rows="10" cols="40" v-model="result"></textarea></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {obj: {words: ''},result: '',timer: null},watch: {'obj.words'(newValue) {clearTimeout(this.timer)//防抖this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: {words: newValue}})this.result = res.data.data}, 300)}}})</script>
</body></html>2.完整写法->添加额外配置项
1）deep:true对复杂类型深度监视
2）immediate:true初始化立刻执行一次handler方法
const app = new Vue({el: '#app',data: {obj: {words: '',lang:''}},watch: {数据属性名:{deep:true,//深度监视immediate: true,//立即执行，一进入页面handler就立刻执行handler(newValue){}}}})案例：翻译软件Pro
<!doctype html>
<html><head><meta charset="utf-8">
</head><body><div id="app">翻译成语言：<select v-model="obj.lang"><option value="english">英语</option><option value="franch">法语</option><option value="italy">意大利</option></select><br><br><textarea rows="10" cols="40" v-model="obj.words"></textarea><textarea rows="10" cols="40" v-model="result"></textarea></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {obj: {words: '',lang: 'english'},result: '',timer: null},watch: {obj: {deep: true,immediate: true,handler(newValue) {clearTimeout(this.timer)//防抖this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: newValue})this.result = res.data.data}, 300)}}}})</script>
</body></html>