watch、computed、set、delete、filters

　　

一、watch监听

　　方法：

　　　　action(nv, ov){

　　　　　　this.msg = nv

　　　　}

　　监听的几种方法

　　　　name: function(nv, ov){

　　　　　　this.msg = nv

　　　　}

　　　　name(nv, ov){

　　　　　　this.msg = nv

　　　　}

　　　　'name'(nv, ov){

　　　　　　this.msg = nv

　　　　}

　　　　'name': 'action'

　　　　obj: {

　　　　　　handler(nv, ov){

　　　　　　　　this.msg = nv

　　　　　　},

　　　　　　deep: true　　// 深度监听，值为false时，对象中的属性值变化，不会执行handler方法

　　　　}

 

二、计算属性

　　计算属性中使用data中的数据一旦有变化，计算属性就会更新

　　total( ){

　　　　if(this.shop.count > 5){

　　　　　　return  this.shop.price  *  this.shop.count

　　　　}else{

　　　　　　return this.shop.price  *  this.shop.count  +  5

　　　　}

　　}

　　计算属性传参数

　　num( ){

　　　　return  function(i){

　　　　　　return  this.num.toFixed(i)

　　　　}

　　}

三、$set、$delete

　　{{obj.age}}

　　obj: {id:1, name: 'xx'}

　　add(){

　　　　this.obj.age  =  18　　// 不会触发视图更新

　　　　this.$set(this.obj, 'age', 18)　　// 会触发视图更新

　　　　delete  this.obj.name　　// 不会触发视图更新

　　　　this.$delete(this.obj, 'name')　　// 会触发视图更新

　　}

四、过滤器

　　文本格式化，能够在表达式{{ }}和v-bind中使用

　　{{3.1415926 | number}}

　　{{3.1415926 | num(2)}}

　　filters: {

　　　　number(data){

　　　　　　return  data.toFixed(2)

　　　　},

　　　　num(data,n){

　　　　　　return  data.toFixed(n)

　　　　}

　　}

 

计算属性和watch监听的区别

　　watch监听：监听具体的属性或对象，当监听的对象发生变化，执行对应的函数

　　computer计算属性：函数中所用到data中的数据发生变化，都会执行对应函数

 

计算属性和方法的区别

　　计算属性有缓存，屡次用到同一个计算属性，计算属性只会执行一次

　　方法没有缓存，屡次用到同一个方法，方法会执行屡次