Vue学习笔记17--监视属性 + 计算属性

监视属性和计算属性对比：computed和watch之间的区别

计算属性computed能完成的功能，watch都可以完成
监听属性watch能完成的功能，computed计算属性不一定能完成，例如：watch可以进行异步操作

两个重要小原则：

所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
所有不被vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，这样this的指向才是vm或组件实例对象。

监视属性示例：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>姓名示例</title>
  <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
  <div id="root">
    姓：<input type="text" v-model="firstName"></br>
    名：<input type="text" v-model="lastName"></br>
    全名:<span>{{fullName}}</span>
  </div>
</body>

</html>
<script type="text/javascript">
  //console.log(vm)
  const vm = new Vue({
    el: '#root',
    data: {
      firstName: '张',
      lastName: '三',
      fullName: '张-三'
    },
    // watch 监视
    watch:
    {
      // 简写
      firstName (val) {
        //简写方式 只能有 handler 不能有其他设置，如上代码deep: true,存在的话，则不可简写
        this.fullName = val + '-' + this.lastName
      },
      lastName (val) {
        //简写方式 只能有 handler 不能有其他设置，如上代码deep: true,存在的话，则不可简写
        this.fullName = this.firstName + '-' + val
      },

    }


  })

</script>

计算属性：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>姓名示例</title>
  <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
  <div id="root">
    姓：<input type="text" v-model="firstName"></br>
    名：<input type="text" v-model="lastName"></br>
    全名:<span>{{fullName}}</span>
  </div>
</body>

</html>
<script type="text/javascript">
  // -------------------计算属性-------------------
  const vm = new Vue({
    el: '#root',
    data: {
      firstName: '张',
      lastName: '三',
    },
    computed: {
      // 简写,简写时确保不用settter
      // myfullname: function () {
      fullName () {
        console.log('get 被调用了')
        return this.firstName + '|' + this.lastName
      }
    },


  })


  // -------------------监视属性-------------------
  //console.log(vm)
  /* const vm = new Vue({
    el: '#root',
    data: {
      firstName: '张',
      lastName: '三',
      fullName: '张-三'
    },
    // watch 监视 属性
    watch:
    {
      // 简写
      firstName (val) {
        //简写方式 只能有 handler 不能有其他设置，如上代码deep: true,存在的话，则不可简写
        this.fullName = val + '-' + this.lastName
      },
      lastName (val) {
        //简写方式 只能有 handler 不能有其他设置，如上代码deep: true,存在的话，则不可简写
        this.fullName = this.firstName + '-' + val
      },

    },

  })
 */


</script>

查看官网资料：https://v2.cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7-vs-%E4%BE%A6%E5%90%AC%E5%B1%9E%E6%80%A7

示例二：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>姓名示例</title>
  <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
  <div id="root">
    姓：<input type="text" v-model="firstName"></br>
    名：<input type="text" v-model="lastName"></br>
    全名:<span>{{fullName}}</span>
  </div>
</body>

</html>
<script type="text/javascript">
  // -------------------计算属性-------------------
  // const vm = new Vue({
  //   el: '#root',
  //   data: {
  //     firstName: '张',
  //     lastName: '三',
  //   },
  //   computed: {
  //     // 简写,简写时确保不用settter
  //     // myfullname: function () {
  //     fullName () {
  //       console.log('get 被调用了')
  //       return this.firstName + '|' + this.lastName
  //     }
  //   },


  // })


  // -------------------监视属性-------------------
  const vm = new Vue({
    el: '#root',
    data: {
      firstName: '张',
      lastName: '三',
      fullName: '张-三'
    },
    // watch 监视 属性
    watch:
    {
      // 简写
      firstName (val) {
        //简写方式 只能有 handler 不能有其他设置，如上代码deep: true,存在的话，则不可简写
        // 异步等待，等待三秒后执行
        setTimeout(() => {
          this.fullName = val + '-' + this.lastName
        }, 3000)
      },
      lastName (val) {
        //简写方式 只能有 handler 不能有其他设置，如上代码deep: true,存在的话，则不可简写
        this.fullName = this.firstName + '-' + val
      },

    },

  })



</script>

注：监听属性可实现异步等待操作，而计算属性中不可

posted on 2024-02-26 18:22 sunwugang 阅读(8) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

欢迎莅临 SUN WU GANG 的园子！！！

公告