Vue中计算属性的setter和getter

2019年1月19日14:14:41 发表评论 阅读(2,111)

通过前面的文章:初识Vue中计算属性,方法以及侦听器  我们可以发现计算属性的强大,本篇文章带我们一起来深入了解一下计算属性的settergetter,我们先来看一个基础的vue实例:

  1. <div id="app">
  2.     {{fullName}}
  3. </div>
  4. <script>
  5.     var vm = new Vue({
  6.         el: "#app",
  7.         data: {
  8.             firstName: "Dell",
  9.             lastName: "Lee"
  10.         },
  11.         computed: {
  12.             fullName: function () {
  13.                 return this.firstName + " " + this.lastName;
  14.             }
  15.         }
  16.     })
  17. </script>

此代码的运行流程是,因为我们用到了插值表达式,当我们打开这个网页,插值表达式会先去实例中的data中找数据,找不到后就会去computed(计算属性)中找对应的数据,找到后便会显示在页面上。

当然我们还可以换种写法来实现,也就是本文的主题,用到setter和getter,实例如下:

  1. <div id="app">
  2.     {{fullName}}
  3. </div>
  4. <script>
  5.     var vm = new Vue({
  6.         el: "#app",
  7.         data: {
  8.             firstName: "Dell",
  9.             lastName: "Lee"
  10.         },
  11.         computed: {
  12.             fullName:  {
  13.                 get: function() {
  14.                     return this.firstName + " " + this.lastName;
  15.                 },
  16.                 set: function(value) {
  17.                     console.log(value);
  18.                 }
  19.             }
  20.         }
  21.     })
  22. </script>

当打开网页使用计算属性的时候,插值表达式会走get方法读取内容,那么set方法在什么时候会被执行呢?当我们去修改fullName值的时候就会执行set方法了,上面代码的set方法是获取修改的值并用console.log打印出来,效果如图:

Vue中计算属性的setter和getter

图中第一个say hello是console.log打印的结果,第二个则是fullName返回的修改后结果,我们可以看出value已经被打印出来了,然后我们就可以用这个value去做一些别的事情:

  1. <div id="app">
  2.     {{fullName}}
  3. </div>
  4. <script>
  5.     var vm = new Vue({
  6.         el: "#app",
  7.         data: {
  8.             firstName: "Dell",
  9.             lastName: "Lee"
  10.         },
  11.         computed: {
  12.             fullName:  {
  13.                 get: function() {
  14.                     return this.firstName + " " + this.lastName;
  15.                 },
  16.                 set: function(value) {
  17.                     var arr = value.split(" ");
  18.                     this.firstName = arr[0];
  19.                     this.lastName = arr[1];
  20.                     console.log(value);
  21.                 }
  22.             }
  23.         }
  24.     })
  25. </script>

使用split方法,把接收到的fullName值分割成字符串数组,然后间接改变了firstName和lastName的值,运行效果如图:

Vue中计算属性的setter和getter

由图我们可以看出,控制台输出的效果和上张图的效果一样,但是与之不同的是页面的内容也变为了say hello而不是之前的Dell Lee,这是为什么呢?因为当我们设置值的时候,会把这个值分隔成字符串数组,然后给firstName赋值为数组的第0项,lastName赋值为数组的第1项,由computed(计算属性)的机制可知,计算属性依赖的值firstName和lastName发生了改变,因此需要重新计算数据,所以页面也随之发生改变。

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛