本文的目的是介绍Vue.js计算属性+监听属性的详细情况，特别关注vue监听属性和计算属性区别的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解Vue.js计算属性+监

本文的目的是介绍Vue.js 计算属性+ 监听属性的详细情况，特别关注vue监听属性和计算属性区别的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解Vue.js 计算属性+ 监听属性的机会，同时也不会遗漏关于003-读书笔记-Vue官网 计算属性与监听器、vue - 计算属性、监听、自定义指令、Vue 中的计算属性与侦听属性的区别及应用、Vue 中的计算属性，方法，监听器的知识。

• Vue.js 计算属性+ 监听属性（vue监听属性和计算属性区别）
• 003-读书笔记-Vue官网 计算属性与监听器
• vue - 计算属性、监听、自定义指令
• Vue 中的计算属性与侦听属性的区别及应用
• Vue 中的计算属性，方法，监听器

Vue.js 计算属性+ 监听属性（vue监听属性和计算属性区别）

<template>
  <div id="app">
    <p>{{info}}</p>
    <p>{{reverse}}</p>
  </div>
</template>

<script>
export default {
  name: ''App'',
  data(){
    return{
      info:''califonia''
    }
  },
  computed:{
    reverse(){
      return this.info.split('''').reverse().join('''');
    }
  }
}
</script>

<style scoped>

</style>

<template>
  <div id="app">
    <p>{{info}}</p>
    computed计算，不需要加()
    <p>第一次：{{reverse1}}</p>
    <p>第二次：{{reverse1}}</p>
    methods方法，需要加()
    <p>第一次：{{reverse2()}}</p>
    <p>第二次：{{reverse2()}}</p>
  </div>
</template>

<script>
var count=1;
export default {
  name: ''App'',
  data(){
    return{
      info:''baidu''
    }
  },
  computed:{
    reverse1(){
      count+=1;
      return count+this.info.split('''').reverse().join('''');
    }
  },
  methods:{
    reverse2(){
      count+=1;
      return count+this.info.split('''').reverse().join('''');
    }
  }
}

</script>

<style scoped>

</style>

<template>
  <div id="app">
    <p>{{count}}</p>
    <button @click="count++">click me</button>
  </div>
</template>

<script>
var count=1;
export default {
  name: ''App'',
  data(){
    return{
      count:1
    }
  },
  watch:{
    count(nVal,oVal){
      console.log(''oldValue: ''+nVal+''  newValue: ''+oVal);
    }
  }
}

</script>

<style scoped>

</style>

<template>
  <div id="app">
    kilometers:
    <input type="text" v-model="kilometers">
    <br>
    meters:
    <input type="text" v-model="meters">
  </div>
</template>

<script>
var count=1;
export default {
  name: ''App'',
  data(){
    return{
      kilometers:0,
      meters:0
    }
  },
  watch:{
    kilometers(val){
      this.kilometers=val;
      this.meters=val*1000;
    },
    meters(val){
      this.meters=val;
      this.kilometers=val/1000;
    },
  }
}

</script>

<style scoped>

</style>

<template>
  <div id="app">
    <table>
      <tr>
        <th>序号</th>
        <th>商品名</th>
        <th>价格</th>
        <th>数量</th>
        <th>操作</th>
      </tr>
      <tr v-for="item in list" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td>
          <button v-bind:disabled="item.count===0" v-on:click="item.count--">-</button>
          {{item.count}}
          <button v-on:click="item.count++">+</button>
        </td>
        <td><button v-on:click="item.count=0">移除</button></td>
      </tr>
    </table>
    <p>总价：{{total()}}</p>
  </div>
</template>

<script>
var count=1;
export default {
  name: ''App'',
  data(){
    return{
      list:[
        {
          id:1,
          name:''iphone6'',
          price:6000,
          count:1
        },
        {
          id:2,
          name:''iphone8'',
          price:7000,
          count:1
        },
        {
          id:3,
          name:''iphonex'',
          price:8000,
          count:1
        }
      ]
    }
  },
  methods:{
    total(){
      var totalPrice=0;
      for(var i=0;i<this.list.length;i++){
        totalPrice+=this.list[i].price*this.list[i].count;
      }
      return totalPrice;
    }
  }
}

</script>

<style scoped>
table {
    border: 1px solid black;
}
table {
    width: 100%;
}

th {
    height: 50px;
}
th, td {
    border-bottom: 1px solid #ddd;
}
</style>

<template>
  <div id="app">
    省：
    <select v-model="province">
      <option>请选择</option>
      <option v-bind:value="p" v-for="p in provinces" :key="p">{{p}}</option>
    </select>
    市：
    <select v-model="city">
      <option>请选择</option>
      <option v-bind:value="c" v-for="c in cityList" :key="c">{{c}}</option>
    </select>
  </div>
</template>

<script>
var count=1;
export default {
  name: ''App'',
  data(){
    return{
      city: ''请选择'',
      province: ''请选择'',
      provinces: [''广东'', ''湖南'', ''湖北'', ''北京''],
      cityList: [],
      area: [{
        name: ''广东'',
        id: 1,
        child: [''广州'', ''深圳'', ''东莞'']
      },
      {
        name: ''湖南'',
        id: 2,
        child: [''长沙'', ''株洲'', ''湘潭'']
      },
      {
        name: ''湖北'',
        id: 3,
        child: [''武汉'']
      },
      {
        name: ''北京'',
        id: 4,
        child: [''北京'']
      }]
    }
  },
  watch:{
    province(nVal,oVal){
      if(nVal===''请选择''){
        this.cityList=[];
      }
      if(nVal!==oVal){
        for(var i=0;i<this.area.length;i++){
          if(this.area[i].name===nVal){
            this.cityList=this.area[i].child;
          }
        }
      }
      this.city=''请选择'';
    }
  }
}

</script>

<style scoped>

</style>

003-读书笔记-Vue官网 计算属性与监听器

1.计算属性

1-1 计算属性概述

计算属性也是 Vue 实例的属性，和 data 方法中返回的对象中的属性是等同的存在。通常来说，计算属性可以简单理解：

1. 计算属性其实就是 Vue 实例的一个属性
2. 计算属性一般依赖传统的 Vue 实例属性
3. 计算属性一般是通过运算得到的属性

如果要更加深入的理解计算属性，可以往下看。

1-2 搭建HTML结构

由于计算属性有几个特性，需要做一些测试，虽然这些测试可以在 vue-devtools 中调试查看，但是肯定没有在页面上看着更直观，因此，搭建一下简单的 HTML 结构，更好的查看最终的执行效果：

<template>
  <div id="app">
    <h2>常规属性：</h2>
    <div>文本框1号：<input type="text" v-model="inpVal" placeholder="常规属性"></div>
    <p>文本框中输入：{{inpVal}}</p>

    <hr>

    <h2>计算属性：</h2>
    <div>文本框2号：<input type="text" v-model="comInpVal" placeholder="计算属性"></div>
    <p>计算属性的值：{{comInpVal}}</p>
  </div>
</template>

展示的效果如下图：

现在基本结构已经搭建完成了，下面就是写一些 JavaScript 代码来操作这些属性了。

1-3 计算属性的简单使用

为了递进式的了解计算属性，首先我们来看看，计算属性是如何通过常规属性计算得到一个新的属性的。

这里沿用官网给出的例子，将常规属性反转得到计算属性。

<script>
  export default {
    name: ''app'',
    data() {
      return {
        inpVal: ''''
      }
    },
    computed: {
      comInpVal() {
        return this.inpVal.split('''').reverse().join('''')
      }
    }
  }

</script>

这个时候，聚焦到的 DOM 元素有 文本框1号 文本框中输入 计算属性的值，会发现计算属性会随着常规属性的输入，输出常规属性的反转形式：

可以发现，上面的计算属性是一个函数，返回值就是计算属性的值，而计算得到的值是依赖 Vue 的实例属性 inpVal

1-4 计算属性的get与set

get说明：

上面的计算属性只是一种简写方式，完整的写法如下：

    computed: {
      comInpVal: {
        get() {
          return this.inpVal.split('''').reverse().join('''')
        }
      }
    }

其实在写计算属性的时候，默认指定的是计算属性的 get 方法。因此，可以得出两个结论：

1. 在计算属性不需要设置值的时候，可以只写出 get 方法，并使用简写的形式
2. 计算属性的 get 方法必须指定返回值，返回值作为计算属性的最终值

set说明：

既然存在了 get 方法来获取值，是不是就存在 set 方法来设置值呢？答案是肯定的，这也是结构中 文本框2号 存在的意义。

现在我们在 文本框2号 中输入内容，会发现谷歌人员开发工具中会报错。

[Vue warn]: Computed property "comInpVal" was assigned to but it has no setter.

从报错信息中，说明了没有指定 setter，因此不能对计算属性进行值的设置。如果我非要设置，并且还不让它报错，怎么办？
这个时候就可以指定 set 方法了。

下面我们指定 set 方法，通过计算属性的设置来得到常规属性的反转值：

    computed: {
      comInpVal: {
        get() { // get方法：获取值
          return this.inpVal.split('''').reverse().join('''')
        },
        set(val) { // set方法：设置值
          this.inpVal = val.split('''').reverse().join('''')
        }
      }
    }

这个时候，再次在 文本框2号 中输入内容，不会出现任何错误。至此，获取计算属性的值和设置计算属性的值都已经学习完成了。

2.监听器

监听器的作用就是监视 Vue 实例中的内容变化的。

2-1 搭建简单的HTML结构

这次我们查看效果的时候，主要是在谷歌开发工具中的控制台中，因此，搭建一个简单的结构就好：

<template>
  <div id="app">
    <input type="text" v-model="inpVal" placeholder="输入内容">
  </div>
</template>

2-2 简单使用监听器

下面我们补充一下监听器，用来监听 inpVal 属性：

<script>
  export default {
    name: ''app'',
    data() {
      return {
        inpVal: ''''
      }
    },
    watch: {
      inpVal() {
        console.log(this.inpVal)
      }
    }
  }

</script>

通过代码会发现，监听器写在 watch 中。需要监听哪个属性，就把属性的名字写在监听器中。

在输入框中不断输入内容，就会看到随着内容的输入，控制台中的内容也是不断变化的。

2-3 监听器的第一个参数

在代码中可以看到，监听器是一个函数，如果是函数，那么应该就可以存在参数，下面指定第一个参数。

    watch: {
      inpVal(newVal) {
        console.log(this.inpVal === newVal)
      }
    }

在文本框中输入内容的时候，会发现，控制台中输入的结果始终是 true，这说明，第一个参数就是监视的属性值。
因此，如果只需要得到最终的结果的情况下，参数可以省略不写。

2-4 监听器的第二个参数

监听器的第一个参数是新输入的值，那第二个参数就是旧值。让我们写出两个参数对比一下：

    watch: {
      inpVal(newVal, oldVal) {
        console.log(newVal, oldVal)
      }
    }

在输入框中输入内容，会发现控制台中输出的效果如下：

1
12 1
123 12

可以发现，在 123 输入的时候，12 是前一个值。这个时候，就很清楚的知道，123 是新值，前一个值是旧值。

2-5 总结

监听器的一般写法：

    watch: {
      inpVal() {
        // ...
      }
    }

监听器的完整写法，指定两个参数：

    watch: {
      inpVal(newVal, oldVal) {
        // ...
      }
    }

3.参考内容

• 计算属性和观察者

vue - 计算属性、监听、自定义指令

1.计算属性

<div id="app">
    <input type="text" v-model="x">
    <input type="text" v-model="y">
    {{get}}
</div>
<script>
         var app=new Vue({
                el:"#app",
                data:{
                       x:"",
                       y:""                
                },
                computed:{
                      get:function(){
                       return this.x+this.y;
                  }
                 }
               });
</script>

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值；多次调用，计算属性会立即返回之前的计算结果，而不必再次执行函数。

2.使用侦听器

<body>
        <div id="app">
            <input type="text" v-model="msg">
            {{msg}}
        </div>
    </body>
    <script>
     var app=new Vue({
         el:"#app",
         data:{
             msg:"",
         },
         watch: {
           msg:function(newval,oldval){
                if(newval=="admin"){
                    this.msg=oldval;
                }else{
                    this.msg=newval;
                }
           }  
         },
     });
</script>

我们发现，与计算属性相比，侦听器并没有优势；也不见得好用，直观上反而比计算属性的使用更繁琐；虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

3.自定义指令

<body>
    <div id="app">
        <p v-color>123131321</p>
    </div>
</body>
<script>
    //全局指令
    //    Vue.directive("color",{
    //        inserted:function(el){
    //             el.style.background="red";
    //        }
    //    });
       var app=new Vue({
           el:"#app",
           directives:{
               color:{
                   inserted:function(el){
                      el.style.background="green";
                   }
               }
           }
       });
</script>

Vue 中的计算属性与侦听属性的区别及应用

vue 是一个前端框架，其灵活性和易用性使其成为了越来越多开发者在前端开发过程中的首选。在 vue 中，计算属性和侦听属性是两种非常重要的属性，它们被广泛用于以数据驱动的开发模式中，本文将介绍这两种属性的区别及其应用。

1. 计算属性

计算属性是依赖于一个或多个数据值，并通过计算得到新值的属性。在 Vue 的计算属性中，开发者只需要定义一个函数，并在函数中返回计算的结果即可。

比如，在 Vue 的模板中，我们经常需要将两个数据相加并展示其结果，可以这样定义一个计算属性：

上述示例代码中，computed 是 Vue 实例的属性之一，表示计算属性，而 total 是我们自定义的计算属性名称，其中 this.num1 和 this.num2 是两个依赖项。

当 num1 或 num2 发生改变时，Vue 会自动重新计算 total 的值，并将结果展示出来。

立即学习“前端免费学习笔记（深入）”；

另外，当多个模板中需要用到同一种计算时，也可以将其封装成一个可复用的计算属性。

2. 侦听属性

侦听属性是当一个指定的数据发生变化时，执行一些逻辑的属性。在 Vue 中，开发者可以通过 watch 属性来监听数据的变化。

比如，我们需要监听某个数据是否发生变化，并在变化时触发某些函数，可以这样使用侦听属性：

在上述示例代码中，watch 是 Vue 实例的属性之一，表示侦听属性，targetData 是我们需要监听的数据，当其发生变化时，函数中的逻辑代码会被执行。

3. 区别与应用

在 Vue 中，计算属性和侦听属性都是非常常用且重要的属性。它们的区别在于：

• 计算属性是基于其依赖项来计算和返回新的值的，而侦听属性则是在数据变化时执行一些逻辑。
• 计算属性适用于不会频繁发生变化的数据，而侦听属性适用于需要在数据变化时执行一些操作的场景。

对于这两种属性的应用，它们都可以用于实现复杂的业务逻辑，或优化代码的性能等。

比如，对于需要对数据进行复杂计算的场景，可以使用计算属性来提高代码的可读性和易维护性。而在需要根据数据的变化来执行后续操作的场景中，则可以使用侦听属性来实现需求。

总结

计算属性和侦听属性都是 Vue 中非常常用的属性。它们不仅能够实现复杂的业务逻辑，还能够提高代码的可读性和易维护性。在使用时需要根据具体场景来选择使用哪种属性，以达到更好的效果。

以上就是Vue 中的计算属性与侦听属性的区别及应用的详细内容，更多请关注php中文网其它相关文章！

Vue 中的计算属性，方法，监听器

计算属性

什么是计算属性呢，顾名思义就是计算后的属性，来看一段代码

<div id="app">
    {{firstName + '' '' + lastName}}      //这里展示出来的就是计算属性
</div>
let vm = new Vue({
    el:''#app'',
    data:{
        firstName: ''Dell'',
        lastName: ''Lee''
    }
})

从这里可以发现，计算属性是有一些逻辑在里面的，但是我们不想在模版中写复杂的逻辑，模版中只做简单的展示，我们能不能再模版中只做一个简单的展示{{fullName}}

computed

<div id="app">
    {{fullName}}
</div>
let vm = new Vue({
    el:''#app'',
    data:{
        firstName: ''Dell'',
        lastName: ''Lee''
    },
    //计算属性
    computed:{
        fullName(){
            return this.firstName + '' '' + this.lastName        
        }
   }
})

通过computed方法来写计算属性，fullName最后的值完全是通过firstName和lastName计算得来的。

计算属性有个非常重要的知识点，它是内置缓存的，怎么体现这点呢？

<div id="app">
    {{fullName}}
    {{age}}
</div>
let vm = new Vue({
    el:''#app'',
    data:{
        firstName: ''Dell'',
        lastName: ''Lee'',
        age:28
    },
    //计算属性
    computed:{
        fullName(){
            console.log(''计算了一次'')        //更新 age 时，这句话不执行，只有更新 fullName 依赖的值时，这句话才会被执行
            return this.firstName + '' '' + this.lastName        
        }
   }
})

当我更新age时，console.log(''计算了一次'')没有被执行，而当我更新fullName依赖的值firstName或者lastName时，这句话才会被执行。

除了使用计算属性来计算值以外，还可以用一个方法来实现methods

methods

<div id="app">
    {{fullName()}}      //这里调用方法需要加上括号
    {{age}}
</div>
let vm = new Vue({
    el:''#app'',
    data:{
        firstName: ''Dell'',
        lastName: ''Lee'',
        age:28
    },
    //方法
    methods: {
        fullName(){
            console.log(''计算了一次'')        //不管什么数据改变都会执行
            return this.firstName + '' '' + this.lastName
        }
    }
})

用这种方法写代码，其实是不如计算属性来的有效的，因为数据只要发生变化，console.log就会被执行，它内部没有缓存机制。

同样一个功能，用计算属性computed可以实现，用方法methods也可以实现，哪一种方式更好一些能，很显然是用计算属性更好些，因为它有缓存，性能更高

除了用计算属性、方法之外，还有没其他方法可以实现的，

watch

<div id="app">
    {{fullName}}
    {{age}}
</div>
let vm = new Vue({
    el:''#app'',
    data:{
        firstName: ''Dell'',
        lastName: ''Lee'',
        fullName: ''Dell Lee''
        age:28
    },
    //方法
    watch:{
        firstName(){
            console.log(''firstName 改变了，计算一次'')        //更新 age 时，这句话不执行，只有更新 fullName 依赖的值 firstName，这句话才会被执行
            this.fullName = this.firstName + '' '' + this.lastName
        },
        lastName(){
            console.log(''lastName 改变了，计算一次'')        //更新 age 时，这句话不执行，只有更新 fullName 依赖的值 lastName，这句话才会被执行
            this.fullName = this.firstName + '' '' + this.lastName
        }
    }
})

使用watch监听fullName的依赖值，当不是fullName依赖的内容改变时，console.log不会执行，只有当fullName依赖的内容发生改变时，console.log才会被执行。

虽然watch也能实现数据缓存，性能也不错，但相比computed来说，复杂了很多，所以如果一个功能既可以通过computed实现，methods实现，watch实现，优先推荐computed来实现，因为用这种方法写代码，既简洁，性能又不错。计算属性，方法，监听器

今天关于Vue.js 计算属性+ 监听属性和vue监听属性和计算属性区别的讲解已经结束，谢谢您的阅读，如果想了解更多关于003-读书笔记-Vue官网 计算属性与监听器、vue - 计算属性、监听、自定义指令、Vue 中的计算属性与侦听属性的区别及应用、Vue 中的计算属性，方法，监听器的相关知识，请在本站搜索。