成都网站建设设计

将想法与焦点和您一起共享

vue计算属性computed、事件、监听器watch的使用讲解

一.计算属性(computed)

创新互联建站主要从事成都网站制作、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务徐州,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792


这里需要注意的是computed中的函数名不能和所操作data中的数据一样;computed中的函数名相当于是操作data数据后的新数据,在模块中直接使用这个函数名即可实现对data中数据改变的渲染。

二.监听器(watch)

首先确认 watch是一个对象,一定要当成对象来用。

对象就有键,有值。

第一种 键:就是你要监听的那个数据,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。

值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是改变后的新值,第二个是改变之前的值。

第二种  值也可以是函数名:不过这个函数名要用单引号来包裹。(不常用)

第三种情况厉害了(监听的那个数据值是一个对象):

值是包括选项的对象:选项包括有三个。

  •     第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
  •     第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
  •     第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。

用法一:基础用法


用法二:handler方法和immediate属性


注意到handler了吗,我们给 watchMsg绑定了一个handler方法,之前我们写的 watch 方法其实默认写的就是这个handler,Vue.js会去处理这个逻辑,最终编译出来其实就是这个handler。

而immediate:true代表如果在 wacth 里声明了watchMsg之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。

用法三:

deep属性

watch 里面还有一个属性 deep,默认值是 false,代表是否深度监听,比如我们 data 里有一个obj属性/数组:


2、数组的watch


3、数组中对象的watch


4、对象具体属性的watch[活用computed]


从效果图上可以看出,计算属性最好使用在更改数据上然后进行渲染;先进行的计算属性再进行的监听。

vue计算属性computed、事件、监听器watch的使用讲解

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对创新互联的支持。如果你想了解更多相关内容请查看下面相关链接


网站栏目:vue计算属性computed、事件、监听器watch的使用讲解
网页URL:http://chengdu.cdxwcx.cn/article/gihdjc.html