Vue

watch

1）deep 属性
当监测为对象的时候（非数组情况），deep = true 可以监测对象中属性的变化
2）immediate 属性
进入组件的时候，第一次并不会执行watch，是因为immediate 默认 false
当 immediate = true 的时候，进入组件会立即执行。并且可以监测到组件传递数据。

<template>
    <button @click="obj.a = 2">修改</button>
</template>
<script>
export default {
    data() {
        return {
            obj: {
                a: 1,
            }
        }
    },
    watch: {
        obj: {
            handler: function(newVal, oldVal) {
                console.log(newVal); 
            },
            deep: true,
            immediate: true 
        }
    }
}
</script>

computed VS watch

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象。
watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据

computed计算属性 VS method

Vue会记住计算属性所依赖的值，当所依赖的值发生变化时，会重新计算值。否则，将返回之前所缓存的值。
如果使用method方法进行计算，在每次页面被渲染时都会执行一次方法。性能方面严重没有计算属性给力。
参考：[https://www.cnblogs.com/gunelark/p/8492468.html]

v-if 和 v-show

v-if 当初始化为false 时，什么也不做，只有当它变为‘真’时，才加载渲染。
切换过程中，条件块内的事件监听器和子组件，会适当的销毁和重建。
v-show 初始化加载时，无论false，ture，都会直接被渲染，通过css 进行切换，为假时，display: none 隐藏；为真时，display: block 显示。

注意，v-show 不支持 template 元素

总结：v-if 有更高的切换开销，v-show有更高的初始化开销。