03.计算和监听属性

最新推荐文章于 2021-11-14 20:32:07 发布

0o憨胖o0

最新推荐文章于 2021-11-14 20:32:07 发布

阅读量149

点赞数

分类专栏： Vue 文章标签： javascript vue.js es6

本文链接：https://blog.csdn.net/xia9527/article/details/108393522

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

二计算和监听属性

2.1 computed

计算属性，在 computed 属性对象中定义计算属性的方法，在页面中使用{方法名}来显示计算的结果。

包含多个方法的对象，对状态属性进行计算返回一个新的数据, 供页面获取显示。
一般情况下是相当于是一个只读的属性，可以利用set/get方法来实现属性数据的计算读取, 同时监视属性数据的变化
- 如何给对象定义get/set属性
- 在创建对象时指定: get name () {return xxx} / set name (value) {}
- 对象创建之后指定: Object.defineProperty(obj, age, {get(){}, set(value){}})

2.2 watch

监听属性，通过 vm 对象的$watch()或 watch 配置来监视指定的属性，当属性变化时, 回调函数自动调用, 在函数内部进行计算。

包含多个属性监视的对象，分为一般监视和深度监视

xxx: function(value){}
xxx : {
    deep : true,
    handler : fun(value)
}

另一种添加监视方式: vm.$watch('xxx', function(value){})

2.3 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_计算和监视属性</title>
</head>
<body>
  <!--
  1. 计算属性
    在computed属性对象中定义计算属性的方法
    在页面中使用{{方法名}}来显示计算的结果
  2. 监视属性:
    通过通过vm对象的$watch()或watch配置来监视指定的属性
    当属性变化时, 回调函数自动调用, 在函数内部进行计算
  3. 计算属性高级:
    通过getter/setter实现对属性数据的显示和监视
    计算属性存在缓存, 多次读取只执行一次getter计算
  -->
  <div id="app">
    姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
    名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
    <!--fullName1是根据fistName和lastName计算产生-->
    姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
    姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
    姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

    <p>{{fullName1}}</p>
    <p>{{fullName1}}</p>
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    window.onload=function (){
      const vm = new Vue({
        el:"#app",
        data:{
          firstName:"pang",
          lastName:"sir",
          fullName2:"pang=>sir"
        },
        computed:{
          fullName1:function(){//firstName和lastName的改变会影响fullName1，反之不会
            console.log("fullName1",Math.random());
            return this.firstName+" "+this.lastName;//返回新的数据
          },
          fullName3:{
            // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
            get:function(){
              return this.firstName+"<->"+this.lastName;
            },
            // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
            set:function(value){
              console.log('fullName3 set()', value)
              // 更新firstName和lastName
              const names = value.split('<->');
              this.firstName = names[0];
              this.lastName = names[1];
            }
          }
        },
        watch:{
          // 方式1-配置监视属性：firstName
          firstName:function(value){//value就是改变的值相当于set方法
            console.log("watch firstName","当发生改变之后，修改fullName2的值");
            this.fullName2=value+" "+this.lastName;
          }
        }
      });
      // 方式2-配置监视属性：lastName
      // 参考API：https://cn.vuejs.org/v2/api/#vm-watch
      vm.$watch("lastName",function(newValue,oldValue){
        console.log(newValue,"===",oldValue);
        //更新fullName2
        this.fullName2=this.firstName+"=>"+newValue;
      });
    };

  </script>
</body>
</html>

0o憨胖o0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03.计算和监听属性

二计算和监听属性2.1 computed计算属性，在 computed 属性对象中定义计算属性的方法，在页面中使用{方法名}来显示计算的结果。包含多个方法的对象，对状态属性进行计算返回一个新的数据, 供页面获取显示。一般情况下是相当于是一个只读的属性，可以利用set/get方法来实现属性数据的计算读取, 同时监视属性数据的变化如何给对象定义get/set属性在创建对象时指定: get name () {return xxx} / set name (value) {}对象创建之后指定:
复制链接

扫一扫