【精讲】vue框架watch监测、技能提升案例、天气预报案例、watch及computed区别

目录

watch监测

提升案例：要求根据点击按钮，控制对应的div标签内部的值

天气预报案例（watch多种简写方式）及data注意事项

watch及computed区别

---

第一部分：watch监测

const vm = new Vue({
                el: '#root',
                data() {
                    return {
                        //创建一个开关，起始值为true
                        isHot: true,
                        // 创建一个对象 内部含有其它几个变量数值
                        number: {
                            a: 1,
                            b: 2
                        }
                    }
                },
                watch: {
                    // 侦听isHot内部值得变化
                    isHot: {
                        handler(n, o) {
                            console.log(n, o)
                        }
                    },
                    // 侦听number.a内部值得变化   若是在返回值内部深层的变量时，那么我们要记得加单引号否则会不执行
                    //若是执行多个时，那么开启深层监视 deep:true
                    'number.a':{
                     handler(){
                         console.log('a的值发生了改变')
                     }
                    }
                }
            })
        </script>

第二部分：提升案例：要求根据点击按钮，控制对应的div标签内部的值

        <!-- watch的其它写法 -->
        <div id="root">
            <!-- 添加插值语法 -->
            <div>今天天气很热{{info}}</div>
            <!-- 添加点击事件方法 -->
            <button @click="change()">点击</button>
            <div>数值改变为{{good}}</div>
            <button @click="tool()">点击后</button>
        </div>
        <script type="text/javascript">
            let cont = 'Hello my name is'

            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                        itemm: true,
                        a:true,
                        goods: {
                            lastname: 'zhang',
                            fastname: 'san',
                            countt:0
                        }
                    }
                },
                methods: {
                    tool() {
                        this.a = !this.a
                    },
                    change() {
                        // this.itemm = !this.itemm;
                        this.goods.countt++;
                    }
                },
                computed: {
                    good() {
                        // console.log('你已经使用'+ this.itemm +'次cont了')
                        console.log('good被调用了');
                        return this.goods.lastname + this.goods.fastname+this.a
                    },
                    info() {
                        console.log('info被调用了')
                        return this.goods.lastname+this.goods.countt
                    }
                }
            })

第三部分：天气预报案例（watch多种简写方式）及data注意事项

<div id="root">
            <h2>今天天气很{{info}}</h2>
            <button @click="changeWeather">切换天气</button>
        </div>
        <script type="text/javascript">
            const vm = new Vue({
                    el: '#root',
                    // 下面若不写return,那么就去掉data的(),写成对象的形式
                    data:{
                        isHot: true
                }, 
                computed: {
                    info(){
                 return this.isHot ? '炎热' : '凉爽'
                    }
                },
                methods:{
                    changeWeather(){
                    this.isHot = !this.isHot
                    }
                }
                // watch: {
                    // 侦听isHot内部值得变化
                    // immediate: true//需要该初识化，那么就不能简写，若是不用那么就可以简写
                    // isHot: {
                    //     handler(n, o) {
                    //         console.log(n, o)
                    //     }
                    // },
                    //简写方式：
                    //这里的函数指的是监视谁 后面的参数就当handler去用
                    // isHot(newvalue, oldvalue){
                    // console.log('isHot被调用了',newvalue, oldvalue,this)    
                    // }
                // }
                })
                
                // 外部调用(正常写法)
                // vm.$watch('isHot',{
                // immediate: true,//需要该初识化，那么就不能简写，若是不用那么就可以简写
                // deep:true,
                // //若是简写下面的handler要原样写出不能写监视的方法，否则会报错
                // handler(newvalue, oldvalue){
                // console.log('isHot被调用了',newvalue, oldvalue)    
                // }
                // })
                
                //简写方式(切记记住下面使用function，不能写箭头函数，否则会报错)
                // vm.$watch('isHot',function(newvalue, oldvalue){
                //     console.log('isHot被修改了',newvalue, oldvalue)
                // })

第四部分：watch及computed区别

<div id="root">
            姓:<input type="text" v-model="fistname" /><br /><br />
            名:<input type="text" v-model="lastname" /><br /><br />
            全名:<span>{{fullname}}</span><br /><br />
        </div>

      <!-- computed和watch之间的区别：
      1，computed能完成的功能，watch都可以完成
      2，watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作
      两个重要的小原则：
      1，所被vue管理的函数，最好写成普通函数，这样this的执行才是vm或组建实例对象
      2，所有不被vue所管理的函数（定时器的回调函数，ajax的回调函数，promise回调函数等），最好写成箭头函数
      这样this的指向才是vm或组建实例对象
       -->
        <script type="text/javascript">
            const vm = new Vue({
                el: '#root',
                data: {
                    //data内部的值相当于就是定义了
                    fistname: '张',
                    lastname: '三',
                    // 若要用watch监视fullname,那么就要做好添加
                    fullname: '张-三'
                },
                //监视fistname
                //采用watch写，这个是命令式  代码是重复的
                watch: {
                    //简写方式
                    // 监视姓 所以第一个写传入的参数   第二个是写名
                    //添加一个定时器  可以执行 具有效果
                    fistname(newvalue) {
                        //定时器里的箭头函数是浏览器控制及js引擎调用的  非window调用
                        setTimeout(() => {
                            this.fullname = newvalue + this.lastname
                        }, 1000)
                    },
                    // 监视名 所以第二个写传入的参数   第一个是写姓
                    lastname(oldvalue) {
                        setTimeout(() => {
                            this.fullname = this.fistname + oldvalue
                        }, 1000)
                    }
                }

                // 若是要用计算属性去改变值,那么就不用在data中添加fullname属性值
                //  computed:{
                //   // 简单 简洁 但有时候必须要用watch去写，比如定时器
                //   fullname(){
                //    setTimeout(()=>{
                //        return this.fistname+this.lastname
                //    //延迟一秒钟执行
                //    },1000)
                // //采用计算属性   最终不会执行  也不会报错 所以有时候未必可用
                //   }
                //  }
            })