Vue系列三：计算属性

短命女 2022-01-30 06:09 188阅读 0赞

1.  计算属性:  
    在computed属性对象中定义计算属性的方法  
    在页面中使用\{ \{方法名\}\}来显示计算的结果
2.  监视属性:  
    通过通过vm对象的$watch()或watch配置来监视指定的属性  
    当属性变化时, 回调函数自动调用, 在函数内部进行计算
3.  计算属性高级:  
    通过getter/setter实现对属性数据的显示和监视  
    计算属性存在缓存, 多次读取只执行一次getter计算

<body>
    <div id="demo">
      姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
      名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
      
      姓名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">
      const vm = new Vue({
        el: '#demo',
        data: {
          firstName: 'A',
          lastName: 'B',
          fullName2: 'A-B'
        },
        // 计算属性配置: 值为对象
        computed: { //什么时候执行：初始化显示或者相关的data属性发生变化
          fullName1 () { // 属性的get()
            console.log('fullName1()', this)
            return this.firstName + '-' + this.lastName
          },
          fullName3: {
            // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
            get () {
              console.log('fullName3 get()')
              return this.firstName + '-' + this.lastName
            },
            // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
            set (value) {// fullName3的最新value值  A-B23
              console.log('fullName3 set()', value)
              // 更新firstName和lastName
              const names = value.split('-')
              this.firstName = names[0]
              this.lastName = names[1]
            }
          }
        },
        watch: {
          // 配置监视firstName。firstName发生改变就会执行
          firstName: function (value) { // 相当于属性的set
            console.log('watch firstName', value)
            // 更新fullName2
            this.fullName2 = value + '-' + this.lastName
          }
        }
      })
      // vue实例vm的方法$watch
      // 监视lastName
      vm.$watch('lastName', function (value) {
        console.log('$watch lastName', value)
        // 更新fullName2
        this.fullName2 = this.firstName + '-' + value
      })
    </script>
    </body>