computed

用于处理一些复杂逻辑

实例-反转字符

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Vue计算属性</title>
  6.     <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  7.   </head>
  8.   <body>
  9.     <div id="app">
  10.       <p>原始: {{ message }}</p>
  11.       <p>反转: {{ reversedMessage }}</p>
  12.     </div>
  14.     <script>
  15.       var vm = new Vue({
  16.         el: "#app",
  17.         data: {
  18.           message: "谁啊，咋了！咋了，谁啊",
  19.         },
  20.         computed: {
  21.           // 计算属性的 getter
  22.           reversedMessage: function () {
  23.             // `this` 指向 vm 实例
  24.             return this.message.split("").reverse().join("");
  25.           },
  26.         },
  27.       });
  28.     </script>
  29.   </body>
  30. </html>

computed 对比 methods

两者效果一样，但computed基于它的依赖缓存，只有相关依赖发生改变才会重新取值。 而使用methods，在重新渲染的时候，函数会重新调用。 可以说computed性能会更好，但是，如果不希望使用缓存，可以使用methods属性。

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  6.     <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  7.   </head>
  8.   <body>
  9.     <div id="app">
  10.       <p>原始: {{ message }}</p>
  11.       <p>计算: {{ reversedMessage }}</p>
  12.       <p>方法: {{ reversedMessage2() }}</p>
  13.     </div>
  15.     <script>
  16.       var vm = new Vue({
  17.         el: "#app",
  18.         data: {
  19.           message: "www.4399.com",
  20.         },
  22.         computed: {
  23.           // 计算属性的 getter
  24.           reversedMessage: function () {
  25.             // `this` 指向 vm 实例
  26.             return this.message.split("").reverse().join("");
  27.           },
  28.         },
  30.         methods: {
  31.           reversedMessage2: function () {
  32.             return this.message.split("").reverse().join("");
  33.           },
  34.         },
  35.       });
  36.     </script>
  37.   </body>
  38. </html>

计算属性的 setter

计算属性默认只有getter，不过在需要的时候也可以提供一个setter

实例1

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  6.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  7.   </head>
  8.   <body>
  9.     <div id="app">
  10.       <p>{{ site }}</p>
  11.     </div>
  13.     <script>
  14.       var vm = new Vue({
  15.         el: "#app",
  16.         data: {
  17.           name: "Google",
  18.           url: "http://www.google.com",
  19.         },
  20.         computed: {
  21.           site: {
  22.             // getter
  23.             get: function () {
  24.               return this.name + " " + this.url;
  25.             },
  26.             // setter
  27.             set: function (newValue) {
  28.               var names = newValue.split(" ");
  29.               this.name = names[0];
  30.               this.url = names[names.length - 1];
  31.             },
  32.           },
  33.         },
  34.       });
  35.       // 调用 setter， vm.name 和 vm.url 也会被对应更新
  36.       vm.site = "猪脚饭 http://www.runoob.com";
  37.       document.write("name: " + vm.name);
  38.       document.write("<br>");
  39.       document.write("url: " + vm.url);
  40.     </script>
  41.   </body>
  42. </html>

实例2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>计算属性的setter和getter</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div id="app">{{ fullName }}</div>
  11.     <script>
  12.       var vm = new Vue({
  13.         el: "#app",
  14.         data: {
  15.           firstName: "Alex",
  16.           lastName: "Xu",
  17.         },
  18.         computed: {
  19.           fullName: {
  20.             get: function () {
  21.               return this.firstName + " " + this.lastName;
  22.             },
  23.             set: function (value) {
  24.               var arr = value.split(" ");
  25.               this.firstName = arr[0];
  26.               this.lastName = arr[1];
  27.             },
  28.           },
  29.         },
  31.       });
  32.       // vm.firstName="八嘎"
  33.     </script>
  34.   </body>
  35. </html>