vue-计算属性(computed)(重要)

一、计算属性(computed)

1、说明

当一些数据需要根据其它数据变化时,需要进行处理才能去展示,虽然vue提供了绑定数据表达式绑定的方式,但是设计它的初衷只是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,对于一些比较复杂和特殊的计算有可能就捉襟见肘了,而且计算的属性写在模板里也不利于项目维护

computed主要的作用:

• 分离逻辑(模板和数据分离)
• 缓存值
• 双向绑定(getter,setter)

2、语法格式

1. 格式

   id="app">
       
       
   v-text="originalPrice - discountPrice">>
       
       
   v-text="currentPrice">>
   >
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">>
   <script>
       let app = new Vue({
           el: '#app',
           data: {
                id:1,
               originalPrice:1200,
               discountPrice:200,
           },
           //计算属性
           computed: {
               // 把日期换成 常见规格格式的字符串。
               currentPrice: function () {
                   return "当前价格:" + (this.originalPrice - this.discountPrice);
               }
           }
       });
   

4、setter与getter

1. 说明

   每一个计算属性都包含一个getter 和一个setter，上面的示例都是计算属性的默认用法， 只是利用了getter来读取

   如果需要，也可以提供一个setter 函数， 当修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数

2. 示例代码

   
   <script>
       var vm = new Vue({
         data: {
           // 声明 message 为一个空值字符串
           message: ''
         },
       })
       // 响应式
       vm.message = 'Hello!'
   
       vm.v="非响应式的的值"
   >
   

   watch:{
   [key: string]: string | Function | Object }]
   

   3、语法说明

   1. key

      必须是Vue对象data中定义的属性

   2. • 值可以是一个字符串，这个字符串是方法名
      • 值可以是一个函数
      • 值也可以是一个对象，其中包含回调函数可以其他选项：比如是否深度遍历。

   4、基础使用

   1. 示例代码

      id="app">
          type="text" v-model="search"/>
          >
              
      v-for="result in results" v-text="result">>
          >
      >
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">>
      
      <script>
          let vm = new Vue({
              el: "#app",
              data: {
                  user:{
                      name:"码帝",
                  }
                  search: "",
                  results: [],
                  
              },
              methods: {
                fun: function () {
                  alert("111");
                }
              }
              watch: {
               // 使用函数
                  search: function (v1, v2) {
                   console.log('新值: %s, 旧值: %s', v1, v2)
                      this.results.push(v1)
                  }
              }
              
          })
      >
      

   5、与computed的区别

   1. 触发条件不同
      • computed计算属性会依赖于使用它的data属性，只要是依赖的data属性值有变动，则自定义重新调用计算属性执行一次。
      • watch则是在监控的data属性值发生变动时，其会自动调用watch回调函数。
   2. 应用场景不同
      1. 执行异步操作，开销较大的操作，避免堵塞主线程，使用watch。
      2. 简单且串行返回的，使用computed
   
   
   作者：杨健kimyeung