Vue【 computed / methods / watch 】

1.关于Vue计算属性computed 和方法methods

计算属性:    computed:{ }

方法:            methods:{}

方法一般用于绑定事件用的；如click input  mouseout mouseenter 等等很多的事件。

计算属性是用来计算一些属性值的；  函数中需要return 一个值。

计算那里的值呢？ vue实例中 data 放的值； computed计算的值就是conputed的依赖

需求：某个数据变化，另一个数据也跟着变化；（一些数据随着其他数据变动而变动）

这个时候用computed计算属性比较合适了

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。（官方）

get set的触发（只要你获取/访问某个值就会触发get ,要是你把某个值设置成了新的值就会触发set)

方法只要你(事件)触发（访问某个值，设置某个值），改变了某个值==>  就会触发get ,set

计算属性 是把计算好的值放入缓存中，你访问的计算属性不会触发get set,因为它已经计算好了，放入缓存中，  只有依赖的值发声了改变，计算属性才会触发==> get set ；

computed 对象中：

优点是缓存，只有它依赖的数据变化(是依赖data的数据)，它才会从新计算，（判断，过滤，等等一些数据）所以比较适合做一些复杂的运算。每次读取的是缓存的值。   computed的方法中必须  return这个计算好值

methods对象中：

你需要触发事件，就是触发（比如click,change等等）的事件，去执行methods中你定义好的事件名。如 第一步是 标签属性中 @οnclick="sking'，第二步  在methods 中定义好 sking(){} （业务逻辑自己写），当你触发事件就执行了哦

watch对象中：

只要你监听的数据，有变化就会执行这个事件，可以拿到最新的值和旧值。当然啦，初始化组件的时候监听的数据没有变化就不会有旧值的哦。

watch(参数1，参数2，参数3)  

参数1 (监听的内容）

参数2 (监听的回调）   handler(){ 代码 }                

参数3 (监听的配置项） 直接放对象 {deep:true , immediate:true}   

deep:true深度监听     immediate 开始监听  先执行一次

 // 对对象进行深度监听,要注意：如果对象是内部发生变化，得到的新旧值都是新的对象，因为引用的是同一个对象。
                obj: {
                    handler(newVal, oldVal) {
                        console.log('obj变化了。。。。');
                        console.log(newVal, oldVal);
                    },
                    deep: true,
                    immediate: true //vue实例初始化添加好监听后，回调函数先执行一次。
                }