VUE2.0-4-computed 属性和 watcher

一、computed 属性和 watcher

computed属性:存放更改原属性值的位置

A.花括号内是一个函数,包含return this(指向实例)

B.前端直接调用computed属性中的函数或方法,更改原始值,则,vomputed的值也会随之更改

如:

HTML:

 

{{ Ac }}

{{ rA }}

Ac">

js:

 var vm = new Vue({
    el:"#app",
    data:{
      Ac:'c'
    },
    computed:{
      rA : function(){
        return this.Ac.split('').reverse().join('')
      }}

  })

//用户更改Ac的值,则rA的值也会随之更改,rA永远依附着Ac

,如果没有,开发人员更改Ac的值,则rA的值也会随之改变

2.methods

将上面例子中的computed:替换成methods:dom页面调用的时候,则不是调用属性,而是调用方法,如rA改为rA()

3.computed与methods区别:
如果
所依赖的数据发生改变时重新取值,则使用computed

需要遍历循环一个巨大数组,并进行大量计算,需要缓存的时候使用methods

二、watcher 属性(需要在数据变化响应时,执行异步操作,或高性能消耗的操作,则使用watcher )

注:必须引入四个包axios.min.js、lodash.min.js、vue.js、vue

如:

1.



也可以用npm进行安装

2.watcher监听时建议使用_.debounce(function,毫秒数) 来限制频率。


你可能感兴趣的:(笔记)