Vue计算属性与监听属性

目录

• Vue计算属性与监听属性
  • 一、计算属性
    • 反例:
    • 正确例子：
  • 二、监听属性
  • 三、计算属性与监听属性的对比

Vue计算属性与监听属性

一、计算属性

使用计算属性的理由是：在模板的表达式需要进行复杂逻辑时，应该写在computed。

反例:

<div>
    {{message.split('').reverse().join('')}}
    //表达式不直观、
</div>

正确例子：

<div id="root">
    <p>{{reversedMessage}}</p>
</div>
<script>
      const vm = new Vue({
          el:"#root",
          data(){
              return{}
          },
          //计算属性的底层在于 Object.defineProperty()
          computed:{
              //简化写法,只带get
              reversedMessage(){
                  //其Vue已经做了处理,this指向vm实例
                  //get方法
                  //带有缓存
                 return this.message.split('').reverse().join('')
              }
          }
      })
</sctipt>

计算属性默认get方法，当需要修改时，可以使用set方法

<div id="root">
    <p>{{reversedMessage}}</p>
</div>
<script>
      const vm = new Vue({
          el:"#root",
          data(){
              return{}
          },
          //计算属性的底层在于 Object.defineProperty()
          computed:{
              reversedMessage:{
                  //其Vue已经做了处理,this指向vm实例
                  //get方法
                  //带有缓存
                 get(){
                    console.log("被访问时触发");
                 return this.message.split('').reverse().join('')
                  },
                  set(){
                      console.log("修改时触发");
                  }
              }
          }
      })
</sctipt>

二、监听属性

watch

<div id="root">
        <p>天气{{isname? '炎热' : '寒冷'}}</p>
        <input type="button" value="变化" >
        <input type="text" v-model="age">
   </div>
<script>
   let vm =  new Vue({
        el:"#root",
        data(){
            return{
                isname:false,
                age:20,
                nub:{
                    a:1,
                    b:2
                }
            }
        },
        created() {
          console.log(this.$watch)  ;
        },
       //计算属性
        watch:{
            deep: true, //开启深度监听
            immediate:true,//立即调用
            age:function(newva,onva){
                console.log("新"+newva,"旧"+onva);
            },
            'nub.a':function(){}
        }
    })
</script>

调用API用法:vm.$watch('名称', 方法)

<div id="root">
        <p>天气{{isname? '炎热' : '寒冷'}}</p>
        <input type="button" value="变化" >
        <input type="text" v-model="age">
   </div>
<script>
   let vm =  new Vue({
        el:"#root",
        data(){
            return{
                isname:false,
                age:20,
            }
        },
        created() {
          console.log(this.$watch)  ;
        },
       //计算属性API调用
    vm.$watch('age',function(newva,onva){
        console.log("新"+newva,"旧"+onva);
    })
    })
</script>

三、计算属性与监听属性的对比

当两者都能实现需求的时候，优先使用computed，面临异步计算，使用watch。

computed:

• 支持缓存、数据变化时，才会计算
• 不支持异步
• 有get和set方法

watch:

• 不支持缓存
• 支持异步
• 接收两参数，一是新值，二是旧值

computed是依赖于响应式缓存的，

当需要在数据变化时执行异步或开销较大的操作时，使用watch

官方链接：计算属性和侦听器