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>