vue总结1(自己用）

vue的computed和watch区别和应用场景？

computed：

1. 支持缓存，不支持异步，
2. 适用于计算比较耗性能的计算场景
3. 当我们进行数值计算，而且依赖于其他数据，那么就需要把这个数据设计为computed

watch：

1. 不支持缓存，支持异步
2. 监听的函数接受两个参数，分别是最新的值 和 输入之前的值
3. 如果需要在某个数据变化时做一些事情，就可以用到watch来观察这个数据变化

vue通过路由页面间传值

实例：
1.将要传递的值push到router路由中

<script>
export default {
  data() {
    return {
      value:'',
    }
  },
  methods:{
    login () {
      this.$router.push({
        name: 'acceptPage',
        // 除了用params也可以用query
        params: {
          value: this.value,
        }
      });
    }
  }
}
</script>

2.从router路由中取出刚刚push的值

<script>
export default {
  data(){
    return{
      value:'',   //用于存储从路由接收过来的params的值
    }
  },
  created() {
    this.getParams();
  },
  methods: {
    //接收路由传过来的参数
    getParams() {
      this.username = this.$route.params.value;
    }
  }
}
</script>

3.v-if与v-show的区别

v-if:

1. 可以根据表达式中的值在DOM中生成或者移除一个元素
2. 支持template（即在template中为false时不生成元素）
3. 如果元素需要频繁切换，不推荐使用v-if，因为这样有很高消耗

v-show:

1. 可以根据表达式的值来显示或者隐藏一个元素
2. 不支持template（即在template中为false时仍然显示该元素）
3. 如果元素频繁切换，可以使用template，这样不会造成高消耗

4.v-if 和 v-for 为什么不建议一起使用

因为解析时先解析v-for在解析v-if。如果遇到需要同时使用时可以考虑写成计算属性的方式。