methods vs computed vs watch

最新推荐文章于 2025-05-22 15:16:50 发布

原创最新推荐文章于 2025-05-22 15:16:50 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#methods #computed #watch #watch的深入监听 #methods vs computed vs watch

Vue 专栏收录该内容

27 篇文章

订阅专栏

本文探讨Vue.js中数据绑定的多种方式，包括计算属性、监听属性和方法的使用场景及区别，通过实例展示了双向数据绑定、数据反转显示和响应式数据更新的实现。

定义方法（ methods ）

计算属性（ computed ）

数据需要反向输入出渲染在页面

<body>
  <div id="app">
    {{ str.split('').reverse().join('') }}
    <p> {{ newStr }} </p>
    <p> {{ newMsg }} </p>
    <input type="text" v-model = "newMsg">
    <p> title: {{ title }} </p>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  /* ! 思考： 如果我们的数据需要 反向 输入出渲染在页面，我们如何处理
     str -> you  Love yourself !!!
  */
  new Vue({
    el: '#app',
    data: {
      str: 'You love yourself !!! ',
      title: ''
    },
    computed: {
      /* 第一种方式： 方法 */
      newStr () {
        return this.str.split('').reverse().join('')
      },
      /* 第二种方式： 存储器 */
      newMsg: {
        get () {
          return this.str.split('').reverse().join('')
        },
        set ( val ) {
          this.title = val 
        }
      }
    }
  })
</script>

双向数据绑定输入名字出现姓和名输入姓和名出现名字

<body>
  <div id="app">
    <div class="container">
      <div class="row">
        <div class="form-group">
          <label for=""> 请输入FirstName </label>
          <input type="text" class="form-control" v-model = "firstName" name="" id="" aria-describedby="helpId" placeholder="">
        </div>
      </div>
      <div class="row">
          <div class="form-group">
              <label for=""> 请输入LastName </label>
              <input type="text" class="form-control"  v-model = "lastName" name="" id="" aria-describedby="helpId" placeholder="">
            </div>
      </div>
      <div class="row">
          <div class="form-group">
              <label for=""> 请输入FullName </label>
              <input type="text" class="form-control" v-model = "fullName" name="" id="" aria-describedby="helpId" placeholder="">
            </div>
      </div>
    </div>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>

  new Vue({
    el: '#app',
    data: {
      firstName: '',
      lastName: ''
    },
    computed: {
     fullName: {
       get () {
        return this.firstName + this.lastName
       },
       set ( val ) {
          /* val就是我们的绑定的input的新值 */     //萧山 吴彦祖
          this.firstName = val.slice( 0, 2 )
          this.lastName = val.slice( 2 )
       }
     }
    }
  })
</script>

监听属性（watch）

作用

 监听数据的变化，当数据发生改变时，我们完成一些操作

<body>
  <div id="app">
    <button @click = "increment"> + </button>
    <p>count: {{ count }} </p>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      count: 0
    },
    watch: {
      count () {
        /* watch里面key名称就是数据的名称 */
        /* 当我们修改count这个数据式，这个方法自动触发了 */
        /* 
          * 项目中 - 上拉加载
            异步操作 - 数据请求 
        */
        document.title = this.count 
      }
    },
    methods: {
      increment () {
        this.count ++
      }
    }
  })
</script>

watch-深入监听

<body>
  <div id="app">
    <button @click = "increment"> + </button>
    <p>count: {{ num.count }} </p>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      num: {
        count: 0
      }
    },
    watch: {
     num: {
       deep: true,
       handler () {
         console.log('handler')
         document.title = this.num.count
       }
     }
    },
    methods: {
      increment () {
        this.num.count ++
      }
    }
  })
</script>

总结：

methods vs computed vs watch
项目中如何使用

事件处理程序： methods
watch 有大量数据交互和异步处理时进行
computed
      - 有逻辑处理
      - V中像全局变量一样使用