Vue 监听属性、计算属性、其他属性与方法

目录

1 监听属性 watch

2 计算属性 computed

2.1 计算属性传参方式-闭包

3 `watch`、`computed`和`methods`之间的对比

4 其他属性与方法

---

1 监听属性 watch

<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
</div>

<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'jack',
    lastName: 'chen',
    fullName: 'jack - chen'
  },
  methods: {},
  watch: {
    firstName: function (newVal, oldVal) { // 第一个参数是新数据，第二个参数是旧数据
      this.fullName = newVal + ' - ' + this.lastName;
    },
    lastName: function (newVal, oldVal) {
      this.fullName = this.firstName + ' - ' + newVal;
    }
  }
});
</script>

// 另一种 watch 写法
vm.$watch('lastName',function(newVal, oldVal){
    this.fullName = this.firstName + ' - ' + newVal;
});

 深度监视：

data:{
    user:{
        name:'li',
        age:12
    }
}
watch:{
    user:{
        handler:(newVal,oldVal){
          console.log(.....)  
        },
        deep:true // 深度监视，当对象中的属性发生变化也会被监视
    }
}

// 另一种 watch 写法
vm.$watch('user',function(newVal, oldVal){
    .....
},true);

---

2 计算属性 computed

<div id="app">
    <input type="text" v-model="firstname"> +
    <input type="text" v-model="middlename"> +
    <input type="text" v-model="lastname"> =
    <input type="text" v-model="fullname"> // 会变
    // 会变
    <p>{{ fullname }}</p>
</div>

<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    firstname: '',
    lastname: '',
    middlename: ''
  },
  methods: {},
  computed: { 
    'fullname': function () {
      console.log('ok')
      return this.firstname + '-' + this.middlename + '-' + this.lastname
    }
  }
});
</script>

注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它当作普通属性去使用就好了；

注意2： 只要计算属性，这个 function 内部，所用到的任何 data 中的数据发送了变化，就会立即重新计算这个计算属性的值。

注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果计算属性方法中，所有来的任何数据，都没有发生过变化，则不会重新对计算属性求值。

定义有`getter`和`setter`的计算属性：

<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <!-- 点击按钮重新为 计算属性 fullName 赋值 -->
    <input type="button" value="修改fullName" @click="changeName">
    
    <span>{{fullName}}</span>
</div>

<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'jack',
    lastName: 'chen'
  },
  methods: {
    changeName() {
      this.fullName = 'TOM - chen2';
    }
  },
  computed: {
    fullName: {
      get: function () {
        return this.firstName + ' - ' + this.lastName;
      },
      // 会将 firstname 和 lastname 也更新
      set: function (newVal) {
        var parts = newVal.split(' - ');
        this.firstName = parts[0];
        this.lastName = parts[1];
      }
    }
  }
});
</script>

2.1 计算属性传参方式-闭包

使用闭包的方式。

<tr v-for="(item,index) in arr" v-if="myfilter(index)">
    <td>{{item.username}}</td>
    <td>{{item.sex}}</td>
    <td>{{item.grade}}</td>
    <td>
        <a href="#" @click="delClick(index)">删除</a>
    </td>
</tr>

export default {
    name: 'Achievement',
    data () {
        return {
            ...
        }
    },
    methods: {
        ...
    },
    computed: {
        myfilter() {
            return function(index){
                return this.arr[index].username.match(this.name)!==null;         
            }           
        } 
    }
}

---

3 `watch`、`computed`和`methods`之间的对比

1. `computed` 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；

2. `methods` 方法表示一个具体的操作，主要书写业务逻辑；

3. `watch` 是一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是`computed`和`methods`的结合体；

---

4 其他属性与方法

//通过普通方式为对象添加属性时vue无法实时监视到
this.user.age=25; 
//通过vue实例的$set方法为对象添加属性，可以实时监视
this.$set(this.user,'age',18); 
// 另一种写法：
Vue.set(this.user,'age',22);

// 删除一个对象的某个属性
Vue.delete(this.user,'age');