Vue中computed和watch的区别

最新推荐文章于 2023-07-14 09:59:11 发布

是小王啊i

最新推荐文章于 2023-07-14 09:59:11 发布

阅读量493

点赞数 1

本文链接：https://blog.csdn.net/qq_45378970/article/details/108628002

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

computed 计算属性

1.computed 它是一个计算属性,会计入缓存中,优先从缓存中加载
2.只有依赖数据发生改变,才重新计算
3.如果一个属性是有多个属性计算而来,这个属性依赖多个属性(也就是多对一或者一对多),一般用computed
4.如果computed计算属性是一个函数,那么会触发get()方法,该方法返回computed属性的属性值
5.在computed中,每个属性都对应一个get/set()方法,当数据发生改变时,会触发set()

上面说了computed会进行缓存,那么它是基于什么来进行的???
computed是基于响应式依赖进行缓存的
响应式依赖:data中的数据获取props中的属性

watch侦听器

watch监听属性,用于监听data里面的数据变化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <span>名：</span>
      <span>
        <input type="text" v-model='firstName'>
      </span>
    </div>
    <div>
      <span>姓：</span>
      <span>
        <input type="text" v-model='lastName'>
      </span>
    </div>
    <div>{{fullName}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      侦听器
    */
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'Jim',
        lastName: 'Green',
        fullName: 'Jim Green'
      },
      // computed: {
      //   fullName: function(){
      //     return this.firstName + ' ' + this.lastName;
      //   }
      // },
      watch: {
        // firstName: function(val) {
        //   this.fullName = val + ' ' + this.lastName;
        // },
        lastName: function(val) {
          this.fullName = this.firstName + ' ' + val;
        }
      }
    });
  </script>
</body>
</html>

是小王啊i

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue中computed和watch的区别

computed 计算属性1.computed 它是一个计算属性,会计入缓存中,优先从缓存中加载2.只有依赖数据发生改变,才重新计算3.如果一个属性是有多个属性计算而来,这个属性依赖多个属性(也就是多对一或者一对多),一般用computed4.如果computed计算属性是一个函数,那么会触发get()方法,该方法返回computed属性的属性值5.在computed中,每个属性都对应一个get/set()方法,当数据发生改变时,会触发set()上面说了computed会进行缓存,那么它是基于什
复制链接

扫一扫