惠州百度推广排名_手机搭建网站工具_如何创建一个个人网站_徐州seo顾问

一、普通方法

格式：

methods:{方法名（形参）{方法体；}
}

二、侦听器 Watch

问题：用普通方法实现不了对数据进行时刻关注

解决：watch侦听，实现对数据时刻监控，一旦数据发生改变立马会有反应

1、写法：

 //写法一：类似于函数watch:{a(val){this.c=val+this.b;},b(val){this.c=val+this.a;}}

//写法二：类似于对象写法（复杂数据类型建议使用此方法）
watch:{b:{handler(val){console.log(val);}}} 

注意：

1、侦听器他和普通方法同级

2、侦听器必须侦听的是data中的数据，否则会报错

2、立即监听：都是使用对象写法通过handler处理函数immediate:true实现立即监听

//普通数据   b:{handler(newname,oldname){console.log(newname,oldname)},immediate:true,               },//复杂数据'obj.name':{handler(newname,oldname){console.log(newname,oldname)},immediate:true,}

3、深度监听 deep:true

//深度监听可以监听到对象的所有属性obj:{handler(newname,oldname){console.log(newname,oldname)},immediate:true,deep:true}

三、计算属性Computed

1、概述

在Vue组件中，通过在computed对象中定义计算属性的名称及对应的计算函数来创建计算属性。计算函数会返回计算属性的值

计算属性：计算data中的数据得到一个结果，影响结果的数据将都会被监听

格式：

 computed:{c(){return this.a+this.b;  （a和b是data中的数据）}}

注意：

1.计算属性的结果是通过计算属性得来的，所以会时刻进行对data中相关数据的监听

2.计算属性的结果不能出现在data中

总结：computed会初始化（页面打开会被执行一次），computed有缓存机制，监听数据无变化会走缓存

四、watch和computed的不同

相同：

1、都可以监听数据

2、watch和computed与methods都是同级

不同：

1、computed 有缓存

2、watch 只可以监听一个data中的数据，computed可以监听多个或一个

3、watch监听的数据必须是data中声明的，computed计算属性不可以在data中声明

4、computed中有get和set方法

5、watch支持异步，computed不支持异步