计算属性computed和watch侦听属性

一枕槐安1

已于 2022-11-10 09:00:11 修改

阅读量123

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

于 2022-07-13 13:56:05 首次发布

本文链接：https://blog.csdn.net/weixin_64770583/article/details/125760981

版权

前端专栏收录该内容

24 篇文章 3 订阅

订阅专栏

计算属性computed和watch侦听属性

computed计算属性的使用

<body>
    <div class="box">
        姓: <input type="text" v-model="firstName"><br><br>
        名: <input type="text" v-model="lastName"><br><br>
        姓名：<span>{{fullName}}</span><br>
    </div>
</body>


<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '.box',
        data: {
            firstName: '张',
            lastName: '三'
        },
        // 计算属性
        computed: {
            fullName: {
                // 当有人读取fullName时，get就会被调用且返回值就作为fullName
                // 1.初次读取fullName时，2.所依赖的数据发生变化时，自动读取getter然后接收返回值给fullName   
                get() {
                    // 此处的this是vm
                    //console.log(this);
                    return this.firstName + '-' + this.lastName;
                },
                // value是fullName修改的值   
                set(value) {
                    //value.split('-') 把value中的字符串以-为分隔符转换为一个新数组
                    let arr = value.split('-');
                    //解构赋值
                    [this.firstName, this.lastName] = arr;
                }
            }
        }
    })
</script>

代码中的fullName就是一个计算属性，它需要使用firstName和lastName的值

当模板代码中有访问fullName属性，就会执行getter，返回值返回给fullName

当fullName被修改时就会执行set函数

如果不考虑setter

可以简写

computed: {
            fullName() {
                return this.firstName + '-' + this.lastName;
            }
        }

watch侦听属性

啥也不说了都在代码里了

<body>
    <!--
        监视属性watch
            1.当被监视的属性变化时，回调函数（handler）自动执行，进行相关操作
            2.监视的属性必须存在，才可以被监视
            3.监视的两种写法：
                (1) new Vue时传入watch配置
                (2) 通过vm.$watch监视
    -->
    <!-- 
        深度监视：
            1. Vue中的watch默认不监视对象内部的改变（监视的是对象的地址）
            2.配置deep：true  后就可以监视多层级
        备注：
            1. Vue自身是可以监视对象内部值的改变，但提供的watch默认是不监视的
            2. 使用watch时根据数据的具体结构，决定是否采用深度监视
     -->
    <div class="box">
        <h3>今天天气{{info}}</h3>
        <!-- <button @click="isHot = !isHot;">切换天气</button> -->
        <button @click="changeWeather">切换天气</button>
        <h3>a的值是{{numbers.a}}</h3>
        <h3>a的值是{{numbers.b}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <button @click="numbers.b++">点我让b+1</button>
    </div>
</body>

<script>
    Vue.config.productionTip = false;
    // 创建实例
    new Vue({
        el: '.box',
        // data数据
        data: {
            isHot: true,
            numbers: {
                a: 0,
                b: 0
            }
        },

        // computed计算属性
        computed: {
            // 模板代码中访问info,执行函数返回一个值给模板代码
            info() {
                return this.isHot ? '很热' : '一般';
            }
        },
        // methods方法
        methods: {
            // 绑定点击事件的按钮调用这个函数
            changeWeather() {
                // 取反
                this.isHot = !this.isHot;
            }
        },
        // 监视属性
        watch: {
            // 'isHot'  原本这样写，不加引号是简写
            'isHot': {
                immediate: true,//初始化时让handler调用一下
                // handler有两个参数 一个是改变的值,一个原来的值
                handler(newValue, oldValue) {
                    console.log('isHot被修改了', newValue, oldValue);
                }
            },
            info: {
                immediate: true,//初始化时让handler调用一下
                handler(newValue, oldValue) {
                    console.log('info被修改了', newValue, oldValue);
                }
            },
            // 监视numbers中的属性只要有一个属性发生变化就要有反应
            numbers: {
                deep: true,//开启多层级监视
                immediate: true,//页面加载完立即调用一次
                handler(newValue, oldValue) {
                    console.log('numbers被改变了');
                }

            }
        }
    });
    //实例调用
    // vm.$watch();
</script>