Vue基础 2. computed()和 watch()

1.4.1 computed()和 watch()

image-20200614181007343

image-20200614194200593

打开vue工具 我们可以看到 我们手动给姓绑定一个C,我们的fullname1并没有发生变化, 没有拿到这个值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!-- 1. computed 计算属性-->



<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"><br>
</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',
          // fullname1: 'A B'
          fullname2: 'A B'
      },
      computed: {
          // 什么时候执行: 初始化显示 / 相关的data数据发生改变
          fullname1 () {  // 计算属性中的一个方法, 方法的返回值作为属性值
              console.log('fullname1()')
              return this.firstname + ' ' + this.lastname
          }
      },

      watch: { // 配置
          firstname: function (value) { // firstname 发生了变化
              console.log(this) // 就是vm对象
              this.fullname2 = value + ' ' + this.lastname
          }
      }
  })
  vm.$watch('lastname', function (value) {
      // 更新 fullname2
      this.fullname2 = this.firstname + ' ' + value
  })
</script>




</body>
</html>

看上去computed比watch简单 一个完成了2个watch的任务

后面还有一种深度监视很有用

1.4.2 关于回调函数 get()和set()

      computed: {
          // 什么时候执行: 初始化显示 / 相关的data数据发生改变
          // 计算并返回当前属性的值
          fullname1 () {  // 计算属性中的一个方法, 方法的返回值作为属性值  // 这整个也是一个回调函数
              console.log('fullname1()')
              return this.firstname + ' ' + this.lastname
          },

          fullName3: {
              // 1. 你定义的, 2. 你没有调用 3. 但最后他执行了
              // 2. 什么时候调用?  2. 用来做什么?
              // 回调函数 计算并返回当前属性的值   回调函数的三个特性: (上面)
              get() {
                  return this.firstname + ' ' + this.lastname
              },

              set() {

              }
          }
      },

如果我设置了3个p标签

{{fullName1}}

有一个问题 为什么我刷新页面的时候看见fullName1()这个函数只调用了一次却出现了三个相同的值呢?

答:说明这中间有一个缓存的过程

生成相当于 key-value (就是 fullName1: 'value')

每次内存先去key中寻找缓存的value值

image-20200614205758948

getter : 属性的get方法

setter : 属性的set方法

posted on 2020-07-05 21:40  sunnywillow  阅读(122)  评论(0)  编辑  收藏  举报