计算属性computed

计算属性 computed

可以当做个笔记来看看，省的自己整理，希望有帮助，同时欢迎各位大佬帮忙补充

举个例子来说一下吧
假设我们需要实现一个num值两倍的关系这个例子
首先我们需要将vue实例化一下，同时传入数据，下面这个vue实例化内的data数据就是下面例子中所用到。

var vm = new Vue({
   el:"#app",
    data:{
        num:1,
        watchNum:""
 },

1.直接在body中使用插值语法，写成这样<p>num*2 {{num*2}}</p>，但是这样写的话后续的维护比较困难，如果是大批量需要修改的还需要一个个找，然后再去一个个改，如果不嫌弃麻烦当然可以直接这样用咯。
2. 可以把多次操作的内容进行封装，封装成一个函数进行调用，例如

 methods:{
      doubleNum(){
            return this.num*2
        }
   }

然后通过插值语法调用这个方法来实现

<p>doubleNum: {{doubleNum()}}</p>

缺点：页面中使用了无关数据的话，doubleNum方法也会频繁的调用执行，造成的问题反而效率更低了。

3.这个方法就要用到watch属性来实现

watch:{
	 //只会监听num值得改变，当num值发生变化了，function函数才会调用，这是函数式方法的写法，这个最后在渲染页面的时候，初始化的时候是没有值的，只有数据改变了后，才会出现值。
    //   num:function(newValue,oleValue){
    //      this.watchNum = newValue*3+1
    //   }
    num:{
          immediate:true,   //初始化执行,如果不这样写话那么初始化的时候，watch监听的这个数据那就会是个空
          handler:function(newValue){   //函数名不能变
              this.watchNum = newValue +1
          }
          
      }
}

<p>watchNum: {{watchNum}}</p>

watch可以监听现有数据的改变，当现有的数据一旦发生改变了，内部就会实现一些具体的业务逻辑，无关数据的改变就不会影响到他。这样写的话你也看到了，date里面要多加一个变量，当数据发生变化后，将变化后的数据在赋值给新加的变量里面，所以还是比较麻烦的.

4.这时我们就可以使用computed这个计算属性来实现我们的效果了

1.计算属性的写法上可以写成一个函数的形式，但是在上面调用的时候千万不能加括号！
2.会根据现有数据生成一个新的数据，并且两者产生永久性关联，建立缓存关系。
3.当无关数据变动的时候，计算属性内部不会重新计算，而是直接从缓存中获取值即可。

computed:{
      computedNum(){
            console.log("computedNum被调用了")
            return this.num*3
        }
   }

 <p>computedNum: {{computedNum}}</p>

注意事项：

​ 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

computed和watch的区别

watch的监听只能是单个的监听，每次监听的时候只能监听一个变量的修改。计算属性可以依赖多个数据的变化（并且只跟它的依赖项建立缓存）当需要在数据变化时执行异步或开销较大的操作时，我们需要使用watch监听器。

总结

计算属性就是在实例配置项中通过computed来为VM设置一个新的数据，而这个数据会拥有一个依赖（一条已经存在的数据），当依赖发生变化的回收，新数据也会发生变化，并且不会受到其他无关数据的影响从而造成性能消耗。
总的来说
1计算属性是基于它们的依赖进行缓存，只有在它相关的依赖发生改变的时候才会去重新求值，比如重复多次调用<p>computedNum: {{computedNum}}</p>，最后这个computed属性还是只会执行一次，数据num值改变在执行一次，页面上所有使用这个插值的num值也会改变。
2.计算属性写起来简单，逻辑性更清晰，更有针对性
3.同时计算属性还有拥有getter和setter两种方法，默认情况是getter，这是setter可以当此计算属性数据更改的时候去做其他的一些事情，就相当于watch

xm:{
        get:function(){//getter 当依赖改变后设置值的时候
            return this.xing+'丶'+this.ming
        },
        set:function(val){//setter 当自身改变后执行
            this.xing = val.split('丶')[0]
            this.ming = val.split('丶')[1]
        }
    }