Vue.js中的计算属性、监视属性与生命周期详解

计算属性

什么是计算属性

计算属性（computed）是Vue.js内置的一个特殊属性，可以定义一个依赖其它属性的计算属性，而这个计算属性的值会被缓存起来，在某些需要频繁用到的属性计算中，计算属性会比直接通过方法计算效率更高，因为计算属性是有缓存的，只有在它的相关属性发生改变时才会重新计算，否则直接取缓存值。

计算属性的使用方法

计算属性的基本语法如下：

computed: {
  计算属性名: function() {
    // 计算逻辑
    return 计算结果
  }
}

举个例子，我们定义一个data属性a和一个计算属性b，b的取值依赖于a，那么我们可以这样写：

<div id="app">
  <p>data属性a的值为：{{ a }}</p>
  <p>计算属性b的值为：{{ b }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    a: 1
  },
  computed: {
    b: function () {
      return this.a + 1
    }
  }
})

在此例子中，a的值为1，因此b的值就是a+1，所以b的值为2。

如果我们继续修改a的值，b的值会自动更新。例如我们执行下面的代码：

vm.a = 2
console.log(vm.b) // 输出 3

此时b的值就从之前的2变成了3。

计算属性示例

假设我们有一个商品列表列表，每个商品有价格和数量两个属性，那么一个计算属性可以计算出当前购物车的总价：

<div id="app">
  <ul>
    <li v-for="item in cart">
      {{ item.name }} - {{ item.price }}元 x {{ item.count }}个 = {{ item.totalPrice }}元
    </li>
  </ul>
  <p>总价：{{ totalPrice }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    cart: [
      { id: 1, name: '商品1', price: 10, count: 3 },
      { id: 2, name: '商品2', price: 20, count: 2 },
      { id: 3, name: '商品3', price: 30, count: 1 }
    ]
  },
  computed: {
    totalPrice: function() {
      var total = 0
      for (var i = 0; i < this.cart.length; i++) {
        var item = this.cart[i]
        total += item.price * item.count
      }
      return total
    }
  }
})

在计算属性totalPrice中，我们循环遍历购物车中的每个商品，累加它们的总价，最后返回总价。在模板中使用该计算属性，便可以直接显示购物车的总价。

监视属性

什么是监视属性

监视属性（watcher）是Vue.js中的另一个重要特性，可用于监听某个属性的变化，当属性发生变化时，可以执行一段自定义的代码逻辑，例如发送一次Ajax请求、更新一次DOM、再次执行计算属性等。

监视属性的使用方法

watch属性的基本语法如下：

watch: {
  监视属性名: function (newVal, oldVal) {
    // 变化逻辑
  }
}

举个例子，假设我们有两个属性a和b，当a的值发生变化时，我们需要将b的值更新为a的两倍，我们可以这样写：

<div id="app">
  <p>a的值是：{{ a }}</p>
  <p>b的值是：{{ b }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    a: 1,
    b: 2
  },
  watch: {
    a: function (newVal, oldVal) {
      this.b = newVal * 2
    }
  }
})

在此例子中，当我们修改a的值，b的值会自动更新为a的两倍。

监视属性示例

假设我们要监听一个输入框的变化，每当用户输入完毕并离开输入框时，我们需要发送一次Ajax请求，获取用户输入的关键词所匹配的结果：

<div id="app">
  <input v-model="keyword" @blur="search">
  <ul>
    <li v-for="(item, index) in searchResult" :key="index">{{ item }}</li>
  </ul>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    keyword: '',
    searchResult: []
  },
  methods: {
    search: _.debounce(function () {
      // 发送Ajax请求
      var that = this
      axios.get('/api/search', {
        params: {
          keyword: that.keyword
        }
      })
      .then(function (response) {
        that.searchResult = response.data
      })
      .catch(function (error) {
        console.log(error)
      })
    }, 500)
  }
})

在此例子中，我们在输入框上监听了blur事件，当用户离开输入框时，会自动触发search方法，发送Ajax请求，并将结果保存到searchResult中，最终在模板中显示出搜索结果。

生命周期

什么是生命周期

生命周期（lifecycle）是Vue.js中的另一个重要概念，它描述了Vue.js实例从创建、运行到销毁期间经历的状态变化，以及在每个状态变化时自动执行的函数。

生命周期的阶段

Vue.js实例经历了以下生命周期阶段：

创建阶段：beforeCreate、created；
挂载阶段：beforeMount、mounted；
更新阶段：beforeUpdate、updated；
销毁阶段：beforeDestroy、destroyed。

在每个阶段，Vue.js都会自动触发一些固定名称的函数，开发者可以利用这些生命周期钩子函数在不同阶段执行一些自定义的代码。

生命周期示例

假设我们开发了一个弹出对话框的组件，当需要弹出对话框时，我们需要先将对话框组件动态创建并挂载到页面中，待用户关闭对话框后，我们又需要销毁它。生命周期函数可以帮助我们完成这个任务。

<div id="app">
  <button @click="showDialog">显示对话框</button>
  <modal v-if="show" @close="closeDialog"></modal>
</div>

Vue.component('modal', {
  template: `
    <div class="modal">
      <div class="modal-mask"></div>
      <div class="modal-wrapper">
        <div class="modal-container">
          <div class="modal-header">
            <h3 class="modal-title"><slot name="header"></slot></h3>
            <button class="modal-close" @click="$emit('close')">×</button>
          </div>
          <div class="modal-body"><slot></slot></div>
        </div>
      </div>
    </div>
  `,
  mounted: function () {
    document.body.appendChild(this.$el)
  },
  beforeDestroy: function () {
    this.$el.parentNode.removeChild(this.$el)
  }
})

var vm = new Vue({
  el: '#app',
  data: {
    show: false
  },
  methods: {
    showDialog: function () {
      this.show = true
    },
    closeDialog: function () {
      this.show = false
    }
  }
})

在此例子中，我们定义了一个modal组件，并在其中的mounted函数中将组件的DOM元素动态挂载到body元素中。然后在组件被销毁前，我们又在组件的beforeDestroy函数中，将其DOM元素从body元素中移除。

在Vue.js实例中，我们定义了show属性，表示对话框是否显示，在关闭对话框时，我们将show属性设置为false，从而销毁对话框组件。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue.js中的计算属性、监视属性与生命周期详解 - Python技术站