监视属性watch
示例一:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计算属性</title> <script type="text/javascript" src="../Js/vue.js"></script> </head> <body> <div id="root"> <!-- <h2>今天添加很--{{ishot?'炎热':'凉爽'}}</h2> <hr> --> 实现方式一: <button @click="changeWeather">切换天气1</button> <h2>今天天气很--{{wetherInfo}}1</h2> <hr> 实现方式二: <button @click="isHot=!isHot">切换天气2</button> <h2>今天天气很--{{wetherInfo}}2</h2> </div> </body> </html> <script type="text/javascript"> //console.log(vm) const vm = new Vue({ el: '#root', data: { isHot: true, }, computed: { wetherInfo () { return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather () { this.isHot = !this.isHot }, }, }) </script>
示例二:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>监视属性watch</title> <script type="text/javascript" src="../Js/vue.js"></script> </head> <body> <div id="root"> 实现方式一: <button @click="changeWeather">切换天气1</button> <h2>今天天气很--{{wetherInfo}}1</h2> <hr> </div> </body> </html> <script type="text/javascript"> //console.log(vm) const vm = new Vue({ el: '#root', data: { isHot: true, }, computed: { wetherInfo () { return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather () { this.isHot = !this.isHot }, }, // watch 监视 watch: { // 监视普通属性 isHot: { immediate: true,//初始化时让handler调用一下 handler (newValue, oldValue) {//当属性被更改时,调用 console.log('isHot 被修改了' + this.isHot) console.log(newValue + ' isHot被修改了 ' + oldValue) } }, // 监视计算属性 wetherInfo: { immediate: true,//初始化时让handler调用一下 handler (newValue, oldValue) {//当属性被更改时,调用 console.log(' wetherInfo 被修改了 ' + this.isHot) console.log(newValue + ' wetherInfo 被修改了 ' + oldValue) } }, } }) // vm对象监视 vm.$watch('wetherInfo', { immediate: true,//初始化时让handler调用一下 handler (newValue, oldValue) {//当属性被更改时,调用 console.log(newValue + ' wetherInfo 被修改了--vm对象监视 ' + oldValue) } }) </script>
总结:监视属性watch
- 当被监视属性变化时,回调函数自动调用,进行相关操作
- 监视的属性必须存在,才能进行监视
- 监视的两种写法:
- new Vue时,使用传入watch配置
- 通过vm对象 vm.$watch方式监视
深度监视
- Vue的watch默认不监测对象内部值的改变(一层)
- 配置deep:true可以监视对象内部值的改变(多层)
备注:
- Vue自身可以监测对象内部值的改变,但Vue提供的wathc默认不可以
- 使用watch时根据数据的具体结构,决定是否采用深度监视
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>深度监视属性watch</title> <script type="text/javascript" src="../Js/vue.js"></script> </head> <body> <div id="root"> 实现方式一: <button @click="changeWeather">切换天气1</button> <h2>今天天气很--{{wetherInfo}}1</h2> <hr> <h2>x的值是:{{numbers.x}}</h2> <button @click="numbers.x++">点我x++</button> <hr> <h2>y的值是:{{numbers.y}}</h2> <button @click="numbers.y++">点我y++</button> </div> </body> </html> <script type="text/javascript"> //console.log(vm) const vm = new Vue({ el: '#root', data: { isHot: true, numbers: { x: 1, y: 1, } }, computed: { wetherInfo () { return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather () { this.isHot = !this.isHot }, }, // watch 监视 watch: { // 监视多级结构中某个属性的变化 'numbers.x': { handler () {//当属性被更改时,调用 console.log(' numbers.x 被修改了') } }, // 监视多级结构中所有属性的变化 numbers: { deep: true, handler () {//当属性被更改时,调用 console.log('numbers 被修改了') } }, // 监视普通属性 isHot: { immediate: true,//初始化时让handler调用一下 handler (newValue, oldValue) {//当属性被更改时,调用 console.log('isHot 被修改了' + this.isHot) console.log(newValue + ' isHot被修改了 ' + oldValue) } }, // 监视计算属性 wetherInfo: { immediate: true,//初始化时让handler调用一下 handler (newValue, oldValue) {//当属性被更改时,调用 console.log(' wetherInfo 被修改了 ' + this.isHot) console.log(newValue + ' wetherInfo 被修改了 ' + oldValue) } }, } }) </script>
监视简写:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>监视属性简写</title> <script type="text/javascript" src="../Js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天气很--{{wetherInfo}}</h2> <button @click="changeWeather">切换天气</button> </div> </body> </html> <script type="text/javascript"> //console.log(vm) const vm = new Vue({ el: '#root', data: { isHot: true, }, computed: { wetherInfo () { return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather () { this.isHot = !this.isHot }, }, // watch 监视 watch: { // 监视普通属性 /* 正常写法 isHot: { // immediate: true,//初始化时让handler调用一下 // deep: true,//深度监视 //简写方式 只能有 handler 不能有其他设置,如上代码deep: true,存在的话,则不可简写 handler (newValue, oldValue) {//当属性被更改时,调用 console.log('isHot 被修改了' + this.isHot) console.log(newValue + ' isHot被修改了 ' + oldValue) } }, */ // 简写 isHot (newValue, oldValue) { //简写方式 只能有 handler 不能有其他设置,如上代码deep: true,存在的话,则不可简写 // console.log('isHot 被修改了' + this.isHot) console.log(newValue + ' isHot被修改了 ' + oldValue) }, } }) // 完整写法 vm对象监视 /* vm.$watch('isHot', { immediate: true,//初始化时让handler调用一下 deep: true,//深度监视 handler (newValue, oldValue) {//当属性被更改时,调用 console.log(newValue + ' isHot 被修改了--vm对象监视 ' + oldValue) } }) */ // 简写 // vm.$watch('isHot', function (newValue, oldValue) { // console.log(newValue + ' isHot 被修改了--vm对象监视 ' + oldValue) // }) </script>
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!