Vue-cli中watch监听使用

Vue-cli中watch监听使用

一下是Vue中watch的基本使用：

<template>
  <div>
    <p>FullName: {{fullName}}</p>
    <p>FirstName: <input type="text" v-model="firstName"></p>
  </div>
</template>

<script>
    export default {
        name: "demo",
      data(){
          return{
            firstName: 'Dawei',
            lastName: 'Lou',
            fullName: ''
          }
      },
      watch: {
      //当我们输入firstName后，wacth监听每次修改变化的新值，然后计算输出fullName。
        firstName(newName, oldName) { //newName是改变后的值，oldName是初始的值
          this.fullName = newName + ' ' + this.lastName;
        }
      },
      created() {

      },
      methods:{

      }
    }


</script>

<style scoped>

</style>

handler方法和immediate属性：

<template>
  <div>
    <p>FullName: {{fullName}}</p>
    <p>FirstName: <input type="text" v-model="firstName"></p>
  </div>
</template>

<script>
    export default {
        name: "demo",
      data(){
          return{
            firstName: 'Dawei',
            lastName: 'Lou',
            fullName: ''
          }
      },
      watch: {
        firstName: {
        //我们给 firstName 绑定了一个handler方法，之前我们写的 watch 方法其实默认写的就是这个handler
          handler(newName, oldName) {   //newName是改变后的值，oldName是初始的值
            this.fullName = newName + ' ' + this.lastName;
          },
          // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
          //如果为 false就不会在绑定的时候就执行。
          immediate: true
        }
      },
      created() {

      },
      methods:{

      }
    }


</script>

<style scoped>

</style>

deep属性

watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听（如下）

<template>
  <div>
    <p>obj.a: {{obj.a}}</p>
    <p>obj.a: <input type="text" v-model="obj.a"></p>
  </div>
</template>

<script>
    export default {
        name: "demo",
      data(){
          return{
            obj: {
              a: 123
            }
          }
      },
      watch: {
        obj: {
          handler(newName, oldName) {   //newName是改变后的值，oldName是初始的值
            //当我们在在输入框中输入数据视图改变obj.a的值时，我们发现是无效的
            //所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的
            //我们只有给obj赋值的时候它才会监听到，比如我们在 created事件钩子函数中对obj进行重新赋值：
            console.log('这是个demo');
          },
          immediate: true,
          //deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器
          deep: true
        }
      },
      created() {
        this.obj = {
          a: '456'
        }
      },
      methods:{

      }
    }


</script>

<style scoped>

</style>

优化，我们可以是使用字符串形式监听。

<template>
  <div>
    <p>obj.a: {{obj.a}}</p>
    <p>obj.a: <input type="text" v-model="obj.a"></p>
  </div>
</template>

<script>
    export default {
        name: "demo",
      data(){
          return{
            obj: {
              a: 123
            }
          }
      },
      watch: {
          //优化，我们可以是使用字符串形式监听。
        'obj.a': {
          handler(newName, oldName) {   //newName是改变后的值，oldName是初始的值
            //当我们在在输入框中输入数据视图改变obj.a的值时，我们发现是无效的
            //所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的
            //我们只有给obj赋值的时候它才会监听到，比如我们在 created事件钩子函数中对obj进行重新赋值：
            console.log('这是个demo');
          },
          immediate: true,
          //deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器
      //    deep: true
        }
      },
      created() {
        this.obj = {
          a: '456'
        }
      },
      methods:{

      }
    }


</script>

<style scoped>

</style>

以上就是本章的全部内容