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

转载

A_kite 2021-10-22 15:37:00

文章标签 Vue.js 回调函数 html 初始化数据 文章分类 Html/CSS 前端开发

1.4.1 computed()和 watch()

打开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() {

              }
          }
      },