VUE2.0-4-computed 属性和 watcher

一、computed 属性和 watcher

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

A.花括号内是一个函数，包含return this（指向实例）

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

如：

HTML:

<div id="app">

 <p>{{ Ac }}</p>

<p>{{ rA }}</p>

<input v-model="Ac">

</div>

js：

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

  })

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

，如果没有<input v-model="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.<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

也可以用npm进行安装

2.watcher监听时建议使用_.debounce（function，毫秒数） 来限制频率。