计算属性computed和数据监听watch

最新推荐文章于 2023-03-28 16:27:26 发布

学不会的靓仔

最新推荐文章于 2023-03-28 16:27:26 发布

阅读量165

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_51290033/article/details/128513473

版权

文章介绍了Vue.js中的计算属性computed和数据监听watch。computed用于减少模板中的计算逻辑，提供数据缓存，基于响应式数据依赖。watch可以实现computed的功能，同时具备更灵活的监听选项，如immediate和deep，用于深度监听数据变化。immediate属性决定了监听器是在初始赋值时还是在值改变时触发。

摘要由CSDN通过智能技术生成

计算属性computed和数据监听watch

1.计算属性computed

computed计算属性：只能对最终结果进行运算功能，只计算一次，具有缓存功能，能实现计算属性与普通属性之间的双向绑定。
computed的作用:
1.减少模板中的计算逻辑
2.能够进行数据缓存
3.响应式数据依赖固定的数据类型

2.数据监听watch

3. computed和watch的区别

computed和watch的区别
watch具有computed的一切功能，computed可以实现的watch都可以

<body>
    <div id="app">
        <input type="text" v-model="text1">
        +
        <input type="text" v-model="text2">
        =
        <input type="text" v-model="text">

        <div v-for="(item,index) in aa" :key="index"><input type="text" v-model="aa[index]"></div>
    </div>
</body>

<script>

    let vm = new Vue({
        el: '#app',
        data() {
            return {

                text1: '',
                text2: '',
                aa: [1, 2, 3]

            }
        },
        computed: {
            text: {
                // 读取数据时触发
                get() {
                    return this.text1 + this.text2

                },
                // 修改数据时触发
                set(val) {
                    //this.text = 10;无法修改
                    console.log(val);
                    console.log(this.text);//是this.text1 + this.text2
                }
            }
        },
        watch: {
            aa: {
                handler(newval, oldval) {
                    console.log(newval, oldval);
                    console.log(1);
                }
            },
            immediate: true,
            deep: true,//deep 深度监听
        }
//以上两种写法是watch监听器的普通用法，这种用法有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有当值发生改变时才会执行。
// 如果我们需要在最初绑定值的时侯，也执行监听函数，则就需要用到immediate属性。
// 比如，当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate属性设置为true，结合handler方法使用。
// 当设置immediate属性为true时，无论值是否发生改变，时刻都会监听；
// 当设置immediate属性为false时，常规用法，只有值发生改变才会监听。
    })
</script>