vue——计算属性、监视属性

最新推荐文章于 2024-01-08 16:18:41 发布
最新推荐文章于 2024-01-08 16:18:41 发布
阅读量168 收藏
点赞数 1
分类专栏： es6 Vue javascript 文章标签： vue 大数据 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h_jQuery/article/details/119786228
版权
javascript 同时被 3 个专栏收录
123 篇文章 0 订阅
订阅专栏
Vue
86 篇文章 0 订阅
订阅专栏
es6
73 篇文章 0 订阅
订阅专栏

计算属性

1.定义：要用的属性不存在，要通过已有属性计算（加工）得来

2.原理：底层借助了Object.defineproperty方法提供的getter和setter。

3.get原理函数什么时候执行？

​ 3.1初次读取该时会执行一次

​ 3.2当依赖的数据发生改变时会被再次调用

4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

5.备注：

​ 5.1计算属性最终会出现在vm上，直接读取使用即可；

​ 5.2如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <input type="text" v-model="firstName"><br/>
        <input type="text" v-model="lastName">
        <p>全名：{{name}}</p>
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                firstName: "张",
                lastName: "三"
            },
            // 计算属性，对data中的属性做进一步的加工处理再输出(输出的是一个对象)，会有缓存
            computed: {
                /* get调用name？ 1.初次读取nane时；2.所依赖的数据发生变化时 */
                name: {
                    //    get何时被调用？ 1.初次读取nane时；2.所依赖的数据发生变化时
                    get() {
                        console.log("get被调用了");
                        return this.firstName.slice() + "-" + this.lastName;
                    },
                    // name被修改时调用set
                    set(value) {
                        // console.log(value);
                        console.log("set修改");
                        // 将字符串按指定的字符分割成数组
                        const arr = value.split('-');
                        this.firstName = arr[0];
                        this.lastName = arr[1]
                    }
                },
                // 简写法:将name写成一个函数形式
                /* name() {
                    return this.firstName.slice() + "-" + this.lastName;
                } */
            }
        })
    </script>
</body>

</html>

监视属性

1.当被监视的属性变化时，回调函数自动调用，进行相关操作

2.监视的属性必须存在，才能进行监视

3.监视的两种写法：

​ 3.1在new Vue({})里面使用watch配置

​ 3.2通过vm.$watch监视

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- <h1>今天天气{{w?"炎热":"凉爽"}}</h1> -->
        <h1>今天天气{{weather}}</h1>
        <!-- <button @click="fnc">切换天气</button> -->
        <!-- 事件绑定的等号后面不止可以写函数名也可以写一些简单的语句 -->
        <button @click="w=!w">切换天气</button>
    </div>
    <script>
        // 如果明确了要监视那个属性，就用watch，如果开始不知道监视谁，后续有需要监视的，就用.$watch()
        const vm = new Vue({
            el: "#root",
            data: {
                w: true
            },
            methods: {
                /* fnc() {
                    this.w = !this.w
                } */
            },
            computed: {
                // 完整-配置对象
                /* weather: {
                    get() {},
                    set() {}
                }, */
                // 函数形式
                weather() {
                    return this.w ? "炎热" : "凉爽"
                }
            },
            // 监视1.0
            /*  watch: {
                 // 监视的对象
                 weather: {
                     // immediate：初始化时立即执行handler，默认是false
                     immediate: true,
                     // 当w发生改变时会调用handler回调函数
                     handler(newVal, oldVal) {
                         // console.log(newVal);
                         // console.log(oldVal);
                         console.log("今天天气 " + newVal + "，昨天天气 " + oldVal);
                     }
                 }
             } */
        });
        // 监视2.0，首先是要先创建一个Vue实例对象
        // $watch(x,y)：第一个参数是要监视的对象，第二个参数是配置对象
        vm.$watch("weather", {
            immediate: true,
            handler(newVal, oldVal) {
                console.log("今天天气 " + newVal + "，昨天天气 " + oldVal);
            }
        })
    </script>
</body>

</html>
深度监视

1.vue中的watch默认不监测对象内部值的改变(一层)

2.配置deep:true可以监测对象内部值改变（多层）

备注：

1.vue自身可以监测对象内部值得改变，但是vue提供的watch默认不可以

2.使用watch时，根据数据的具体结构，决定是否采用深度监视

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>今天天气{{weather}}</h1>
        <button @click="w=!w">切换天气</button>
        <hr>
        <h3>a：{{number.a}}</h3>
        <button @click="number.a++">a++</button>
        <hr>
        <h3>b：{{number.b}}</h3>
        <button @click="number.b++">b++</button>
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                w: true,
                number: {
                    a: 1,
                    b: 0
                }
            },
            methods: {},
            computed: {
                weather() {
                    return this.w ? "炎热" : "凉爽"
                }
            },
            // vue默认是可以监测到data中多层级的数据改变的，但是vue为程序员提供的watch默认是不可以监测多层级数据的
            // 想要在vue提供的watch里面监测到多层级数据的改变的，就要添加deep: true,
            watch: {
                // 原始写法
                // "xxx":{},
                weather: {
                    immediate: true,
                    handler(newVal, oldVal) {
                        console.log("今天天气 " + newVal + "，昨天天气 " + oldVal);
                    }
                },
                // 监视多级结构中的某个属性的变化需要用原始写法（外面加引号）
                /* "number.a": {
                    handler() {
                        console.log("number里面的a数据改变了");
                    }
                }, */
                number: {
                    // 监视多级结构中的所有属性的变化
                    deep: true,
                    handler() {
                        console.log("number里面的数据改变了");
                    }
                }
            }
        });
    </script>
</body>

</html>

监视属性的简写

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>今天天气{{weather}}</h1>
        <button @click="w=!w">切换天气</button>
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                w: true,
            },
            methods: {},
            computed: {
                weather() {
                    return this.w ? "炎热" : "凉爽"
                }
            },
            watch: {
                // 原始写法
                // "xxx":{},
                // 正常写法
                /*  weather: {
                     // immediate: true,
                     // deep: true,
                     handler(newVal, oldVal) {
                         console.log("今天天气 " + newVal + "，昨天天气 " + oldVal);
                     },
                 } */
                // 简写形式：只有handler而已，没有其他的配置项,这里的weather就相当于handler
                /* weather(newVal, oldVal) {
                    console.log("今天天气 " + newVal + "，昨天天气 " + oldVal);
                } */
            }
        });
        // 正常写法
        /* vm.$watch('weather', {
            immediate: true,
            deep: true,
            handler(newVal, oldVal) {
                console.log("今天天气 " + newVal + "，昨天天气 " + oldVal);
            }
        }) */
        // 简写：只有回调函数，没有其他的配置项
        vm.$watch('weather',
            function(newVal, oldVal) {
                console.log("今天天气 " + newVal + "，昨天天气 " + oldVal);
            })
    </script>
</body>

</html>
计算属性和监视属性的区别

计算属性是对data中的数据进行加工后形成新的数据，并且输出；data中的数据发生改变，形成的那个新数据也会发生响应的改变

监视属性是监测到data中的某个属性发生变化时，会进行特定的一些处理，不需要输出

区别：
1.computed能完成的功能，watch都可以完成

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。小原则：

​ 2.1所有被vue管理的函数，最好写成普通函数，这样this的指向才是vue的实例对象或组件实例对象

​ 2.1所有不被vue所管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数等），最好写成箭头函数，这样this的指向才是vue的实例对象或者组件实例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <input type="text" v-model="firstName"><br/>
        <input type="text" v-model="lastName">
        <p>全名：{{name}}</p>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                firstName: "张",
                lastName: "三",
                name: '张-三'
            },
            // 监视属性可以执行异步代码，而计算属性不可以
            watch: {

                // 监视姓：姓发生改变，将改变后的姓的新值与名拼接，组成新的姓名
                firstName(newVal) {
                    // 在这里用的是箭头函数，
                    setTimeout(() => {
                        this.name = newVal + "-" + this.lastName
                    }, 1000)
                },
                // 监视名：名发生变化，将名的新值与姓拼接，组成新的姓名
                lastName(newVal) {
                    this.name = this.firstName + "-" + newVal
                    setTimeout(function() {}, 1000)
                }
            }
        })
    </script>
</body>

</html>
h_jQuery
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue之计算属性和监视属性
m0_53619602的博客
08-31 346
计算属性（computed） 定义： 要用的属性不存在，要通过已有属性计算得来
vue之计算属性和监视属性
天下月色共三分的博客
05-10 240
计算属性 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算的结果 <div id="demo"> 姓: <input type="text" placeholder="First Name" v-model="firstName"><br> 名: <input type="text" placeholder="Last Name" v-model="lastName"><br> <!--fullNam
Vue中的计算属性和监视属性
Machoul的博客
03-28 233
Vue中的计算属性和监视属性 案例：在两个输入框中分别输入一个人的姓和名，在文本中显示出这个人的姓名 插值语法实现 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="context"> 姓：&lt
Vue：计算属性与监视属性
沉迷写代码的程序猿的博客
03-21 1037
Vue：计算属性与监视属性 一、计算属性 在开发中，可以有这样的需求，在属性（date）中，有fistName和lastName两个属性，需要将两个属性拼接起来，这种需求也很简单，有以下实现方式
Vue的计算属性和监听属性
ivenqin的博客
11-23 317
Vue 中的计算属性 使用计算属性（computed）有一个好处在于它有一个缓存机制，因此它不需要每次都重新计算。当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的 DOM 部分也会同步自动更新。在处理一些复杂逻辑时计算属性是很有用的。 在 Vue 中我们可以使用模板语法 {{}} 来展示一些数据，而当在模板中放入太多的逻辑会让模板过重且难以维护。这种情况下，Vue 给我们提供了一个特别好的解决方法，就是使用计算属性。我们可以将一些需要计算的过程写入到一个计算属性中去，然后让它动态的计算就可以了
Vue computed 计算属性代码实例
10-15
这是因为 Vue.js 监视了计算属性内部引用的数据，并在数据变化时重新执行相关函数。 3. **缓存机制** 计算属性的值会被缓存，除非它的依赖数据发生变化。这意味着，如果计算属性的函数内部没有引用到的数据发生...
详解Vue之计算属性
10-15
计算属性是Vue实例的一个特殊属性，它们根据其他数据（即依赖）动态计算出新的值，并在依赖改变时自动更新。 **计算属性的基本原理：** 计算属性的核心在于，它们是基于Vue实例的数据（data）进行计算的。当你在Vue...
关闭Vue计算属性自带的缓存功能方法
08-27
下面小编就为大家分享一篇关闭Vue计算属性自带的缓存功能方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
深入理解Vue Computed计算属性原理
08-27
在计算属性的 getter 函数中，Vue 会创建一个 Watcher 实例，该实例负责监视计算属性的依赖项，并在依赖项发生变化时重新计算计算属性的值。 Computed 计算属性的优点 Computed 计算属性的优点是可以自动地计算并...
Vue计算属性的使用
08-29
Vue计算属性的使用 本篇文章主要介绍了Vue计算属性的使用。 Vue计算属性是 Vue 框架中的一种特殊属性，它可以根据其他数据属性动态计算出一个新的值。下面将详细介绍 Vue 计算属性的使用。 一、计算属性概述 计算...
vue的计算属性和监视属性
qq_52619560的博客
07-20 325
计算属性: 1. 定义:要用的属性不存在,要通过已有的属性计算得来 监视属性watch: 1. 当监视的属性变化时,回调函数自动调用,进行相关操作 2. 监视的属性必须存在,才能进行监视 3. 监视的两种写法: (1).new Vue时传入watch配置 (2).通过vm.$watch监视...
vue-计算属性和监视属性
奶茶控
11-27 201
计算属性 - computed 定义：要用的属性不存在，要通过已有的属性计算得来的 原理：底层借助了Object.defineproperty方法提供的getter和setter 如下案例：通过以下的姓和名，计算得到全名 方法一：可以直接使用 methods 函数的返回式实现其功能 <body> <div id="root"> 姓：<input type="text" v-model="firstName"><br /&...
Vue计算属性和监视属性
weixin_60719453的博客
02-03 563
2、如果计算属性要被修改，那必须写set函数去响应，，且set中要引起计算是依赖的数据发生变化。4、优势：与methods实现相比，内部有缓存机制(复用),效率更高，调试方便。1、Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以。1、Vue中的watch默认不见时对象内部值的改变（一层）1、当被监视的属性变化时，回调函数自动调用，进行相关操作。1、计算属性最终会出现在vm上，直接读取使用即可。定义：要用的属性不存在，要通过已有属性计算得来。2、监视的属性必须存在，才能进行监视。
Vue----计算属性和监视(侦听)属性的详细讲解及区别
最新发布
weixin_74261569的博客
01-08 1827
以上的监视的属性是isHot，假如是对info进行监视，如果是不存 在的属性，则无法实现监视。原理:：底层借助了objcet.defineproperty方法提供的getter和setter。作用：如果模板中需要过多逻辑，用常规写法会导致模板过重且难维护，这时候就应使用。以上图里的计算属性是简写，如果计算属性要被修改，那必须写。当被监视的属性变化时，回调函数自动(handler)调用。根据自己的需求选择用methods方法还是计算属性。（注：这里的this指的是vm实例 ）
一文解决Vue中的计算属性和监听属性
zag666的博客
08-14 1107
计算属性 计算属性：要用的属性不存在，要通过已有属性计算得来。 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。 1.插值语法实现 <body> <!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model=
Vue中的监视属性watch和计算属性computed
m0_63836635的博客
08-21 931
vue中watch和computed复习
Vue的计算属性与监视属性
qq_43781887的博客
10-24 1004
（2）所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，这样this的指向才是vm或者组件实例对象。这个部分就有问题，你的return返回的值是交给setTimeout的不是fullName，所以根本得不到计算属性的值就无法渲染。（1）所有被Vue管理的函数最好写成普通函数，这样this的执行才是vm或者组件实例对象。（1）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以。（1）计算属性能完成的功能，监视属性都可以完成。
Vue的计算属性与监听属性
qq_46149597的博客
11-03 3128
计算属性的getter和setter，计算属性的缓存，对象数据中的属性进行监听，deep选项
Vue 计算属性与监听属性
热门推荐
小柒的前端之旅
05-16 1万+
前面的话 模板内的表达式常用于简单的运算，当其过长或逻辑复杂时，会难以维护。这篇文章将介绍计算属性与监听属性去解决该问题。 计算属性 [什么是计算属性?] 首先，来看一个字符串反转的例子： <div id="app1"> {{ message.split('').reverse().join('') }} </div> <s...
vue 更新计算属性
09-01
Vue更新计算属性的过程是自动的。当计算属性依赖的数据发生变化时，这个属性的值会自动更新，所有依赖该属性的数据绑定也会同步进行更新。 这意味着你不需要手动更新计算属性的值，Vue会在底层自动跟踪计算属性依赖...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值