【Vue】computed与watch

       📝个人主页：五敷有你      
 🔥系列专栏：Vue
⛺️稳重求进，晒太阳

计算属性

概念：基于现有的数据，计算出来新的属性，依赖的数据变化，自动重新计算

语法：

1. 声明在computed配置项中，一个计算属性对应一个函数
2. 使用起来和普通属性一样使用{{计算属性名}}

计算属性->可以将一段求值的代码进行封装

简写：

 computed:{fn(){return parseInt(this.a)+parseInt(this.b)+parseInt(this.c);}},

computed计算属性VSmethods方法

computed 计算属性

作用：封装了一段对于数据的处理，求得一个结果

语法：

1. 写在computed配置项中
2. 作为属性，直接使用->this.计算属性 {{计算属性}}

缓存特性：

• 计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
• 依赖项变化了，会自动重新计算->并再次缓存

计算属性的完整写法：

       computed:{fullName:{get(){return this.firstName+this.lastName;},set(value){this.firstName=value.slice(0,1);this.lastName=value.slice(1);}}}

methods方法

作用：给实例提供一个方法，调用以处理业务逻辑

语法：

写在methods配置项中

作为方法，需要调用 -> this.方法名() {{方法名()}} @事件名="方法名"

watch

作用：监视数据变化，执行一些业务逻辑或异步操作

语法：

简单写法： 简单类型数据，直接监视

  watch:{"obj.words" (newValue,oldValue){console.log(newValue)}}

完整写法：添加额外的配置项

deep:true 对复杂类型进行深度监视

immediate:true 初始化立刻执行一次handler

                list:{deep:true,handler(newValue){localStorage.setItem("list",JSON.stringify(newValue))}}