更深入的理解vue中watch多种灵活的用法

最新推荐文章于 2024-10-24 08:45:00 发布

hardwork come on

最新推荐文章于 2024-10-24 08:45:00 发布

阅读量139

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/weixin_43353869/article/details/106773725

版权

vue.js 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1 v-cloak>{{a}}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                ab:2,
                a: 1,
                obj: {
                    name: '张三',
                    age:20
                }
            },
            watch: {
                // 第一次监听
                // 第一次新的数据 老的数据
                //   1.普通函数 a:function(newVal,oldVal){
                //       console.log(newVal,oldVal)
                //   }
                /* 2.函数的简写方式*/
                ab(newVal, oldVal) {
                    console.log(newVal, oldVal)
                },
                //  第二次新的数据,第一次新的数据
                //  第三次新的数据,第二次新的数据
                //   ... 一直在监听数据的变化
                /*
                  3.!! 注意不要使用箭头函数 methods选项中不能使用箭头函数
                  a(newVal,oldVal)=>{
                    console.log(newVal,oldVal)
                    console.log(this)  this指向的是window
                }
                */
                // 4.string 写法.hello 是指向的methods中hello函数
                a: 'hello',
                //  5.  object的写法
                // 是用object的写法一定要用handler属性,属性值就是处理函数
                // a: {
                //     handler(newVal, oldVal) {
                //         console.log('newVal', newVal,'object')
                //         console.log('oldVal', oldVal,'object')
                //     }
                // },
                // 6.为啥要有对象的写法是,可以做更多的监听配置,比深度监听
                //  深度监听:对象中某个属性值发生变化默认是监听不到的
                // 对象是引用数据类型
                // var obj={name:'dhsaijadad'} 对象是引用数据类型  这种修改是给对象重新赋值
                // var obj.name='wueqeqe' // 这种修改内存空间没有变
                // obj: {
                //     handler(newVal, oldVal) {
                //         console.log('newVal', newVal,'object')
                //         console.log('oldVal', oldVal,'object')
                //     },
                //     deep: true, // 深度监听   
                //     immediate: true  // 默认触发监听一次
                // },
                // 7.数组的写法[String,function,{handler:function}]
                a: [
                    'hello',
                    function () {
                        console.log('f2')
                    },
                    {
                        handler: function () {
                            console.log('f3')
                        },
                    },
                ],
                // **key的表达式写法** 直接去监听某个对象数据中的某个属性obj.name
                "obj.name":function(newVal,oldVal){
                    console.log('newVal', newVal)
                    console.log('oldVal', oldVal)
                }
            },
            methods: {
                hello(newVal, oldVal) {
                    console.log(newVal, oldVal)
                    console.log('newVal', newVal)
                    console.log('oldVal', oldVal)
                    console.log(this) //this的指向是vue的实例
                }
            }
        })
    </script>
</body>

</html>