通过前面的文章：初识Vue中计算属性，方法以及侦听器 我们可以发现计算属性的强大，本篇文章带我们一起来深入了解一下计算属性的setter和getter，我们先来看一个基础的vue实例：
- <div id="app">
- {{fullName}}
- </div>
- <script>
- var vm = new Vue({
- el: "#app",
- data: {
- firstName: "Dell",
- lastName: "Lee"
- },
- computed: {
- fullName: function () {
- return this.firstName + " " + this.lastName;
- }
- }
- })
- </script>
此代码的运行流程是，因为我们用到了插值表达式，当我们打开这个网页，插值表达式会先去实例中的data中找数据，找不到后就会去computed(计算属性)中找对应的数据，找到后便会显示在页面上。
当然我们还可以换种写法来实现，也就是本文的主题，用到setter和getter，实例如下：
- <div id="app">
- {{fullName}}
- </div>
- <script>
- var vm = new Vue({
- el: "#app",
- data: {
- firstName: "Dell",
- lastName: "Lee"
- },
- computed: {
- fullName: {
- get: function() {
- return this.firstName + " " + this.lastName;
- },
- set: function(value) {
- console.log(value);
- }
- }
- }
- })
- </script>
当打开网页使用计算属性的时候，插值表达式会走get方法读取内容，那么set方法在什么时候会被执行呢？当我们去修改fullName值的时候就会执行set方法了，上面代码的set方法是获取修改的值并用console.log打印出来，效果如图：
图中第一个say hello是console.log打印的结果，第二个则是fullName返回的修改后结果，我们可以看出value已经被打印出来了，然后我们就可以用这个value去做一些别的事情：
- <div id="app">
- {{fullName}}
- </div>
- <script>
- var vm = new Vue({
- el: "#app",
- data: {
- firstName: "Dell",
- lastName: "Lee"
- },
- computed: {
- fullName: {
- get: function() {
- return this.firstName + " " + this.lastName;
- },
- set: function(value) {
- var arr = value.split(" ");
- this.firstName = arr[0];
- this.lastName = arr[1];
- console.log(value);
- }
- }
- }
- })
- </script>
使用split方法，把接收到的fullName值分割成字符串数组，然后间接改变了firstName和lastName的值，运行效果如图：
由图我们可以看出，控制台输出的效果和上张图的效果一样，但是与之不同的是页面的内容也变为了say hello而不是之前的Dell Lee，这是为什么呢？因为当我们设置值的时候，会把这个值分隔成字符串数组，然后给firstName赋值为数组的第0项，lastName赋值为数组的第1项，由computed(计算属性)的机制可知，计算属性依赖的值firstName和lastName发生了改变，因此需要重新计算数据，所以页面也随之发生改变。
微信小程序
互联网开发，终身学习者，欢迎您的关注！
