Vue的实例、生命周期与Vue脚手架（vue-cli）实例详(4)

日期：2020-05-11 栏目：程序人生浏览：次

1.5.1、computed计算属性

在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<span>{{msg.split('').reverse().join('')}}</span>

使用计算属性定义成一个方法可以复用且模板会更加简洁：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>vue2实例</title>
 </head>
 <body>
 <div id="app1">
  <p>
  <input type="text" v-model="msg" />
  <span>{{msg.split('').reverse().join('')}}</span>
  </p>
  <p>
  <input type="text" v-model="msg" />
  <span>{{revMsg}}</span>
  </p>
 </div>
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
  var app1 = new Vue({
  el: "#app1",
  data: {
   msg: "hello"
  },
  computed: {
   revMsg: function() {
   return this.msg.split('').reverse().join('');
   }
  }
  });
 </script>
 </body>
</html>

结果：

注意：

1、computed中定义的方法只允许当着属性用，不能带参数，这限制它的复用性。

2、当方法中的属性发生变化时方法将重新调用

3、不应该使用箭头函数来定义计算属性函数

4、 computed计算属性可以对属性进行缓存的，计算属性只有当该属性发生变化的时候才会重新计算值

5、如果一个属性不能完成需要的功能时可以考虑转成计算

1.5.2、watch计算属性

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用＄watch()，遍历 watch 对象的每一个属性。

示例：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>vue2实例</title>
 </head>
 <body>
 <div id="app1">
  <p>
  a:
  <input type="text" v-model="a" />{{a}}<br/> b:
  <input type="text" v-model="b" />{{b}}<br/> c:
  <input type="text" v-model="c.x.y.z" />{{c.x.y.z}}<br/> d:
  <input type="text" v-model="d" />{{d}}<br/>
  </p>
  <p>
  n:<input type="text" v-model="c.x.y.n" />{{c.x.y.n}}
  </p>
 </div>
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
  var app1 = new Vue({
  el: "#app1",
  data: {
   a: 1,
   b: 2,
   c: {
   x: {
    y: {
    z: 3,
    n: 3
    }
   }
   },
   d: 4
  },
  watch: {
   a: function(val, oldVal) {
   console.log('a新: %5s, 原: %5s', val, oldVal);
   },
   // 方法名
   b: 'watchb',
   //对象，深度监视
   c: {
   handler: function(val, oldVal) {
    console.log('c新: %5s, 原: %5s', JSON.stringify(val),JSON.stringify(oldVal));
   },
   deep:true
   },
   //立即监视
   d: {
   handler: function(val, oldVal) {
    console.log('c新: %5s, 原: %5s', val,oldVal);
   },
   immediate:true //设置初始值时也将调用
   }
  },
  methods: {
   watchb: function(val, oldVal) {
   console.log('b新: %5s, 原: %5s', val, oldVal);
   }
  }
  });
  var watchb = function(val, oldVal) {
  console.log('b新: %5s, 原: %5s', val, oldVal);
  }
 </script>
 </body>
</html>

转载注明出处：http://www.heiqu.com/426.html

Vue的实例、生命周期与Vue脚手架（vue-cli）实例详(4)

相关推荐