• vuejs中的计算属性和监视


    计算属性

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

    2.通过getter/setter实现对属性数据的显示和监视

    3.计算属性存在缓存,多次读取只执行一次getter

    侦听属性

    1.通过vm对象的$watch()或watch配置来监视指定的属性

    2.当属性变化时,回调函数自动调用,在函数内部进行计算

    计算属性与方法、侦听属性之间的比较

    计算属性是基于它们依赖进行缓存,只有相关依赖发生改变时才会重新求值,调用方法是每当重发重新渲染时,总会调用执行函数。而侦听属性可以实现相应数据变动,但是它对需要侦听的属性编写重复的代码。但是watch在异步操作数据变化时很合适。

    举个例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    </head>
    <body>
    <div id="demo">
      姓: <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>{{getFullName()}}</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'
          },
          methods: {
              getFullName: function () {
                  return this.firstName + '-' + this.lastName
              }
          },
    
          // 计算属性配置: 值为对象
          computed: {
              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: function (value) { // 相当于属性的set
                          console.log('watch firstName', value)
                          // 更新fullName2
                          this.fullName2 = value + '-' + this.lastName
                      },
                      lastName: function (value) {
                          this.fullName2 = this.firstName + '-' + value;
                      }
                  }
    
      })
    
    </script>
    </body>
    </html>

    运行结果中fullName1和fullName2数据传输是“单向”的(输入firstname和lastname时fullname会相应变化,但是反过来就不行),fullName3实现数据传输双向的,当输入fullname时,firstname和lastname会相应的改变。get为取值,set为赋值

  • 相关阅读:
    bootstrap-datetimepicker 十年视图、年月视图 附源码
    java面向对象程序设计的五个特性
    简述rtsp,rtmp,http三个协议
    iOS 实现毛玻璃效果
    一个裁剪图片的小工具类,通过一句代码调用
    iOS 中的正则匹配(工具类方法)
    博客园不支持Markdown语法,新博客将发在简书...
    一行代码,让你的应用中UIScrollView的滑动与侧滑返回并存
    仿照微信的效果,实现了一个支持多选、选原图和视频的图片选择器,适配了iOS6-10系统,3行代码即可集成.
    分享一下我封装iOS自定义控件的体会,附上三个好用的控件Demo <时间选择器&多行输入框&日期选择器>
  • 原文地址:https://www.cnblogs.com/lanhuo666/p/10451753.html
Copyright © 2020-2023  润新知