vue computed计算属性 watch监听

 

计算属性

computed:{
  变量:function(){
    return 计算好的值
  }
}

这时候计算好的值 就付给了你的变量 在实例中能够this.使用

注意 声明的变量的data中不能够重复声明不然报错

<template>
  <div class="watch">
    <input type="text" v-model="msg" />
    <input type="text" v-model="comsg" />
  </div>
</template>

<script>
export default {
  name: "watch",
  data() {
    return {
      msg: "123"
    };
  },
  methods: {},
  computed: {
    comsg: function() {
      return this.msg
        .split("")
        .reverse()
        .join("");
    }
  }
};
</script>
效果:
初始有值的时候 就已经计算了，而且监听数据改变从新计算

 计算属性的getter 和setter:以上咱们举例的是默认的getter。

在你须要时，也能够提供一个setter 函数， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数，执行一些自定义的操做

getter/setter语法

 computed: {
    变量: {
      get: function() {
        return 计算的值;
      },
      set: function(newold) {
        //当计算的值被改变时调用set
        console.log(newold);


      }
    }
  }

 

 

上面的例子，除了使用计算属性外，咱们也能够经过在表达式中调用方法来达到一样的效果，那么方法和computed都应该处于什么场景呢

computed:计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会从新求值。

方法:每当触发从新渲染时，调用方法将总会再次执行函数

假设咱们有一个性能开销比较大的的计算属性，它须要遍历一个巨大的数组并作大量的计算。

若是没有缓存，咱们将不可避免的屡次执行 它的 getter！若是你不但愿有缓存，请用方法来替代。

 

 

 watch监听

监听大概能够分为三种 

上面说到计算属性的时候  初始化的时候就能够被监听到而且计算 可是watch是发生改变的时候才会触发:例如

这是基本用法

<template>
  <div class="watch">
    <input type="text" v-model="msg" />
    <input type="text" v-model="comsg" />
  </div>
</template>

<script>
export default {
  name: "watch",
  data() {
    return {
      msg: "123",
      comsg: ""
    };
  },
  methods: {},
  watch: {
    msg(newval, old) {
      console.log(newval, old);
      this.comsg = this.msg
        .split("")
        .reverse()
        .join("");
    }
  }
};
</script>
效果:能够发现 初始化的时候并无触发 watch监听  图二改变的时候才触发了watch

 

handler方法和immediate属性

若是 父组件向子组件传值时 这时候值并无发生改变咱们却想在初始的时候就触发watch 就须要这个属性了 immediate  默认为false  为true时只初始化能够被监听

 

<template>
  <div class="watch">
    <input type="text" v-model="msg" />
    <input type="text" v-model="comsg" />
  </div>
</template>

<script>
export default {
  name: "watch",
  data() {
    return {
      msg: "123",
      comsg: ""
    };
  },
  methods: {},
  watch: {
    msg: {
      handler(newval, old) {
        console.log(newval, old);
        this.comsg = this.msg
          .split("")
          .reverse()
          .join("");
      },
      immediate: true
    }
  }
};
</script>
效果:
能够看到 初始的时候就触发了watch监听 old打印为undefined   
注意到了吗，咱们给 msg 绑定了一个方法，以前咱们写的 watch 方法其实默认写的就是这个，Vue.js会去处理这个逻辑，最终编译出来其实就是这个。handlerhandlerhandlerhandler

deep属性

watch 里面还有一个属性 deep，默认值是 false，表明是否深度监听

语法:用来监听obj 

 watch: {
    obj: {
      handler(newval, old) {
        //newval   old
      },
      immediate: true,
      deep: true
    }
  }

deep的意思就是深刻观察，监听器会一层层的往下遍历，给对象的全部属性都加上这个监听器，可是这样性能开销就会很是大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

若是监听obj中的属性 例如obj.a 就能够优化,使用字符串形式监听   这样 vue会一层一层解析，直到碰见a属性，而后给它设置监听函数

 

watch: {
    'obj.a': {
      handler(newval, old) {
        //newval   old
      },
      immediate: true,
      // deep: true
    }
  }

注销watch

为何要注销 watch？由于咱们的组件是常常要被销毁的，好比咱们跳一个路由，从一个页面跳到另一个页面，那么原来的页面的 watch 其实就没用了，这时候咱们应该注销掉原来页面的 watch 的，否则的话可能会致使内置溢出。咱们平时 watch 都是写在组件的选项中的，会随着组件的销毁而销毁。

若是这种写法就须要手动注销watch

const unWatch = app.$watch('text', (newVal, oldVal) => {
  console.log(`${newVal} : ${oldVal}`);
})
 
unWatch(); // 手动注销watch

watch监听路由

watch: {
    '$route'(to,from){
      console.log(to);   //to表示去往的界面
      console.log(from); //from表示来自于哪一个界面
      if(to.path=="/lifeCycle"){
　　　　　　console.log("生命周期");

 } } }